Add global styles page and package

docs/manifest-devhub.json

@@ -1259,6 +1259,12 @@
 		"markdown_source": "../packages/e2e-tests/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/edit-global-styles",
+		"slug": "packages-edit-global-styles",
+		"markdown_source": "../packages/edit-global-styles/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/edit-post",
 		"slug": "packages-edit-post",

gutenberg.php

@@ -43,6 +43,16 @@ function gutenberg_menu() {
 		'gutenberg'
 	);
 
+	// For now the page is only accessible by URL.
+	add_submenu_page(
+		'',
+		__( 'Edit Global Styles', 'gutenberg' ),
+		__( 'Edit Global Styles', 'gutenberg' ),
+		'edit_theme_options',
+		'gutenberg-edit-global-styles',
+		'the_gutenberg_edit_global_styles'
+	);
+
 	if ( get_option( 'gutenberg-experiments' ) ) {
 		if ( array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) {
 			add_submenu_page(

lib/client-assets.php

@@ -275,6 +275,9 @@ function gutenberg_register_packages_scripts( &$scripts ) {
 			case 'wp-edit-site':
 				array_push( $dependencies, 'wp-dom-ready' );
 				break;
+			case 'wp-edit-global-styles':
+				array_push( $dependencies, 'wp-dom-ready' );
+				break;
 		}
 
 		// Get the path from Gutenberg directory as expected by `gutenberg_url`.
@@ -407,6 +410,15 @@ function gutenberg_register_packages_styles( &$styles ) {
 	);
 	$styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-edit-global-styles',
+		gutenberg_url( 'build/edit-global-styles/style.css' ),
+		array( 'wp-components' ),
+		filemtime( gutenberg_dir_path() . 'build/edit-global-styles/style.css' )
+	);
+	$styles->add_data( 'wp-edit-global-styles', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-edit-widgets',

lib/edit-global-styles-page.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Bootstraping the Gutenberg Edit Global Styles page.
+ *
+ * @package gutenberg
+ */
+
+function the_gutenberg_edit_global_styles() {
+	?>
+	<div
+		id="edit-global-styles"
+		class="edit-global-styles"
+	>
+	</div>
+	<?php
+}
+
+/**
+ * Initialize the Gutenberg Edit Global Styles Page.
+ *
+ * @since 7.4.0
+ *
+ * @param string $hook Page.
+ */
+function gutenberg_edit_global_styles_init( $hook ) {
+	if ( 'admin_page_gutenberg-edit-global-styles' !== $hook ) {
+		return;
+	}
+
+	// Initialize editor.
+	wp_add_inline_script(
+		'wp-edit-global-styles',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editGlobalStyles.initialize( "edit-global-styles", %s );
+			} );',
+			wp_json_encode( array() )
+		)
+	);
+
+	wp_enqueue_script( 'wp-edit-global-styles' );
+	wp_enqueue_style( 'wp-edit-global-styles' );
+}
+add_action( 'admin_enqueue_scripts', 'gutenberg_edit_global_styles_init' );
+

lib/load.php

@@ -64,4 +64,5 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/experiments-page.php';
 require dirname( __FILE__ ) . '/customizer.php';
 require dirname( __FILE__ ) . '/edit-site-page.php';
+require dirname( __FILE__ ) . '/edit-global-styles-page.php';
 require dirname( __FILE__ ) . '/global-styles.php';

package.json

@@ -38,6 +38,7 @@
 		"@wordpress/deprecated": "file:packages/deprecated",
 		"@wordpress/dom": "file:packages/dom",
 		"@wordpress/dom-ready": "file:packages/dom-ready",
+		"@wordpress/edit-global-styles": "file:packages/edit-global-styles",
 		"@wordpress/edit-post": "file:packages/edit-post",
 		"@wordpress/edit-site": "file:packages/edit-site",
 		"@wordpress/edit-widgets": "file:packages/edit-widgets",

packages/base-styles/_z-index.scss

@@ -27,6 +27,7 @@ $z-layers: (
 	".edit-post-editor-regions__header": 30,
 	".edit-site-header": 62,
 	".edit-widgets-header": 30,
+	".edit-global-styles-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
 	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
@@ -67,6 +68,7 @@ $z-layers: (
 	".edit-post-editor-regions__sidebar": 100000,
 	".edit-site-sidebar": 100000,
 	".edit-widgets-sidebar": 100000,
+	".edit-global-styles-sidebar": 100000,
 	".edit-post-layout .edit-post-post-publish-panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be at top of
 	// the Publish Post sidebar.
@@ -77,6 +79,7 @@ $z-layers: (
 	".edit-post-editor-regions__sidebar {greater than small}": 90,
 	".edit-site-sidebar {greater than small}": 90,
 	".edit-widgets-sidebar {greater than small}": 90,
+	".edit-global-styles-sidebar {greater than small}": 90,
 
 	// Show notices below expanded editor bar
 	// .edit-post-header { z-index: 30 }

packages/edit-global-styles/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/edit-global-styles/CHANGELOG.md

@@ -0,0 +1,5 @@
+## Master
+
+### New Feature
+
+- Initial version of the module.

packages/edit-global-styles/README.md

@@ -0,0 +1,32 @@
+# Edit Global Styles
+
+Edit Global Styles Page Module for WordPress.
+
+> This package is meant to be used only with WordPress core. Feel free to use it in your own project but please keep in mind that it might never get fully documented.
+
+## Installation
+
+```bash
+npm install @wordpress/edit-global-styles
+```
+
+## Usage
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { initialize } from '@wordpress/edit-global-styles';
+
+/**
+ * Internal dependencies
+ */
+import globalStylesSettings from './global-styles-settings';
+
+initialize( '#global-styles-root', blockEditorSettings );
+
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/edit-global-styles/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/edit-global-styles",
+	"version": "1.1.0",
+	"private": true,
+	"description": "Edit Global Styles Page module for WordPress.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/edit-global-styles/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/edit-global-styles"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.8.3",
+		"@wordpress/components": "file:../components",
+		"@wordpress/core-data": "file:../core-data",
+		"@wordpress/data": "file:../data",
+		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
+		"@wordpress/i18n": "file:../i18n"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/edit-global-styles/src/components/edit-global-styles-initializer/index.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import Layout from '../layout';
+
+function EditGlobalStylesInitializer() {
+	return <Layout />;
+}
+
+export default EditGlobalStylesInitializer;

packages/edit-global-styles/src/components/header/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function Header() {
+	return (
+		<div
+			className="edit-global-styles-header"
+			role="region"
+			aria-label={ __( 'Global styles screen top bar' ) }
+			tabIndex="-1"
+		>
+			<h1 className="edit-global-styles-header__title">
+				{ __( 'Global styles' ) } { __( '(experimental)' ) }
+			</h1>
+			<div className="edit-global-styles-header__actions">
+				<Button isPrimary onClick={ () => {} }>
+					{ __( 'Update' ) }
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

packages/edit-global-styles/src/components/header/style.scss

@@ -0,0 +1,37 @@
+.edit-global-styles-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid $light-gray-500;
+	height: $header-height;
+	background: $white;
+	z-index: z-index(".edit-global-styles-header");
+
+	left: 0;
+	right: 0;
+	// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
+	top: 0;
+	position: sticky;
+
+	// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
+	@include break-small {
+		position: fixed;
+		padding: $grid-size;
+		top: $admin-bar-height-big;
+	}
+
+	@include break-medium() {
+		top: $admin-bar-height;
+	}
+}
+@include editor-left(".edit-global-styles-header");
+
+.edit-global-styles-header__title {
+	font-size: 16px;
+	padding: 0 20px;
+	margin: 0;
+}
+
+.edit-global-styles-header__actions {
+	padding: 0 20px;
+}

packages/edit-global-styles/src/components/layout/index.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Sidebar from '../sidebar';
+import Header from '../header';
+
+function Layout() {
+	return (
+		<>
+			<Header />
+			<Sidebar />
+			<div
+				className="edit-global-styles-layout__content"
+				role="region"
+				aria-label={ __( 'Global styles screen content' ) }
+				tabIndex="-1"
+			>
+				<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+				<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+			</div>
+		</>
+	);
+}
+
+export default Layout;

packages/edit-global-styles/src/components/layout/style.scss

@@ -0,0 +1,11 @@
+.edit-global-styles-layout__content {
+	min-height: 100%;
+	padding: 30px 0;
+
+	// Temporarily disable the sidebar on mobile
+	@include break-small() {
+		margin-left: 250px;
+		margin-right: $sidebar-width;
+		margin-top: $header-height;
+	}
+}