Edit Site: Add package with barebones site editor screen.

docs/manifest-devhub.json

@@ -1265,6 +1265,12 @@
 		"markdown_source": "../packages/edit-post/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/edit-site",
+		"slug": "packages-edit-site",
+		"markdown_source": "../packages/edit-site/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/edit-widgets",
 		"slug": "packages-edit-widgets",

gutenberg.php

@@ -43,15 +43,27 @@ function gutenberg_menu() {
 		'gutenberg'
 	);
 
-	if ( get_option( 'gutenberg-experiments' ) && array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) {
-		add_submenu_page(
-			'gutenberg',
-			__( 'Widgets (beta)', 'gutenberg' ),
-			__( 'Widgets (beta)', 'gutenberg' ),
-			'edit_theme_options',
-			'gutenberg-widgets',
-			'the_gutenberg_widgets'
-		);
+	if ( get_option( 'gutenberg-experiments' ) ) {
+		if ( array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) {
+			add_submenu_page(
+				'gutenberg',
+				__( 'Widgets (beta)', 'gutenberg' ),
+				__( 'Widgets (beta)', 'gutenberg' ),
+				'edit_theme_options',
+				'gutenberg-widgets',
+				'the_gutenberg_widgets'
+			);
+		}
+		if ( array_key_exists( 'gutenberg-full-site-editing', get_option( 'gutenberg-experiments' ) ) ) {
+			add_submenu_page(
+				'gutenberg',
+				__( 'Site Editor (beta)', 'gutenberg' ),
+				__( 'Site Editor (beta)', 'gutenberg' ),
+				'edit_theme_options',
+				'gutenberg-edit-site',
+				'gutenberg_edit_site_page'
+			);
+		}
 	}
 
 	if ( current_user_can( 'edit_posts' ) ) {

lib/client-assets.php

@@ -252,6 +252,10 @@ function gutenberg_register_packages_scripts( &$scripts ) {
 			case 'wp-edit-post':
 				array_push( $dependencies, 'media-models', 'media-views', 'postbox' );
 				break;
+
+			case 'wp-edit-site':
+				array_push( $dependencies, 'wp-dom-ready' );
+				break;
 		}
 
 		// Get the path from Gutenberg directory as expected by `gutenberg_url`.
@@ -375,6 +379,15 @@ function gutenberg_register_packages_styles( &$styles ) {
 	);
 	$styles->add_data( 'wp-list-reusable-block', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-edit-site',
+		gutenberg_url( 'build/edit-site/style.css' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
+		filemtime( gutenberg_dir_path() . 'build/edit-site/style.css' )
+	);
+	$styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-edit-widgets',

lib/edit-site-page.php

@@ -0,0 +1,98 @@
+<?php
+/**
+ * Bootstraping the Gutenberg Edit Site Page.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * The main entry point for the Gutenberg Edit Site Page.
+ *
+ * @since 7.2.0
+ */
+function gutenberg_edit_site_page() {
+	?>
+	<div
+		id="edit-site-editor"
+		class="edit-site"
+	>
+	</div>
+	<?php
+}
+
+/**
+ * Initialize the Gutenberg Edit Site Page.
+ *
+ * @since 7.2.0
+ *
+ * @param string $hook Page.
+ */
+function gutenberg_edit_site_init( $hook ) {
+	if ( 'gutenberg_page_gutenberg-edit-site' !== $hook ) {
+		return;
+	}
+
+	// Get editor settings.
+	$max_upload_size = wp_max_upload_size();
+	if ( ! $max_upload_size ) {
+		$max_upload_size = 0;
+	}
+
+	// This filter is documented in wp-admin/includes/media.php.
+	$image_size_names      = apply_filters(
+		'image_size_names_choose',
+		array(
+			'thumbnail' => __( 'Thumbnail', 'gutenberg' ),
+			'medium'    => __( 'Medium', 'gutenberg' ),
+			'large'     => __( 'Large', 'gutenberg' ),
+			'full'      => __( 'Full Size', 'gutenberg' ),
+		)
+	);
+	$available_image_sizes = array();
+	foreach ( $image_size_names as $image_size_slug => $image_size_name ) {
+		$available_image_sizes[] = array(
+			'slug' => $image_size_slug,
+			'name' => $image_size_name,
+		);
+	}
+
+	$settings = array(
+		'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
+		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
+		'imageSizes'             => $available_image_sizes,
+		'isRTL'                  => is_rtl(),
+		'maxUploadFileSize'      => $max_upload_size,
+	);
+
+	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
+	list( $font_sizes, )    = (array) get_theme_support( 'editor-font-sizes' );
+	if ( false !== $color_palette ) {
+		$settings['colors'] = $color_palette;
+	}
+	if ( false !== $font_sizes ) {
+		$settings['fontSizes'] = $font_sizes;
+	}
+
+	// Initialize editor.
+	wp_add_inline_script(
+		'wp-edit-site',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editSite.initialize( "edit-site-editor", %s );
+			} );',
+			wp_json_encode( gutenberg_experiments_editor_settings( $settings ) )
+		)
+	);
+
+	// Preload server-registered block schemas.
+	wp_add_inline_script(
+		'wp-blocks',
+		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
+	);
+
+	wp_enqueue_script( 'wp-edit-site' );
+	wp_enqueue_script( 'wp-format-library' );
+	wp_enqueue_style( 'wp-edit-site' );
+	wp_enqueue_style( 'wp-format-library' );
+}
+add_action( 'admin_enqueue_scripts', 'gutenberg_edit_site_init' );

lib/load.php

@@ -63,3 +63,4 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/widgets-page.php';
 require dirname( __FILE__ ) . '/experiments-page.php';
 require dirname( __FILE__ ) . '/customizer.php';
+require dirname( __FILE__ ) . '/edit-site-page.php';

lib/widgets.php

@@ -17,7 +17,12 @@ function gutenberg_is_block_editor() {
 		return false;
 	}
 	$screen = get_current_screen();
-	return ! empty( $screen ) && ( $screen->is_block_editor() || 'gutenberg_page_gutenberg-widgets' === $screen->id );
+	return ! empty( $screen ) &&
+		(
+			$screen->is_block_editor() ||
+			'gutenberg_page_gutenberg-widgets' === $screen->id ||
+			'gutenberg_page_gutenberg-edit-site' === $screen->id
+		);
 }
 
 /**

package.json

@@ -39,6 +39,7 @@
 		"@wordpress/dom": "file:packages/dom",
 		"@wordpress/dom-ready": "file:packages/dom-ready",
 		"@wordpress/edit-post": "file:packages/edit-post",
+		"@wordpress/edit-site": "file:packages/edit-site",
 		"@wordpress/edit-widgets": "file:packages/edit-widgets",
 		"@wordpress/editor": "file:packages/editor",
 		"@wordpress/element": "file:packages/element",

packages/base-styles/_z-index.scss

@@ -26,6 +26,7 @@ $z-layers: (
 	".block-editor-url-input__suggestions": 30,
 	".edit-post-layout__footer": 30,
 	".edit-post-editor-regions__header": 30,
+	".edit-site-header": 62,
 	".edit-widgets-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
@@ -66,6 +67,7 @@ $z-layers: (
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	".edit-post-editor-regions__sidebar": 100000,
+	".edit-site-sidebar": 100000,
 	".edit-widgets-sidebar": 100000,
 	".edit-post-layout .edit-post-post-publish-panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be at top of
@@ -75,6 +77,7 @@ $z-layers: (
 	// Show sidebar in greater than small viewports above editor related elements
 	// but bellow #adminmenuback { z-index: 100 }
 	".edit-post-editor-regions__sidebar {greater than small}": 90,
+	".edit-site-sidebar {greater than small}": 90,
 	".edit-widgets-sidebar {greater than small}": 90,
 
 	// Show notices below expanded editor bar

packages/edit-site/.npmrc

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

packages/edit-site/CHANGELOG.md

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

packages/edit-site/README.md

@@ -0,0 +1,32 @@
+# Edit Site
+
+Edit Site 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-site
+```
+
+## Usage
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { initialize } from '@wordpress/edit-site';
+
+/**
+ * Internal dependencies
+ */
+import blockEditorSettings from './block-editor-settings';
+
+initialize( '#editor-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-site/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@wordpress/edit-site",
+	"version": "1.0.0-beta.0",
+	"private": true,
+	"description": "Edit Site 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-site/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/edit-site"
+	},
+	"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.4.4",
+		"@wordpress/block-editor": "file:../block-editor",
+		"@wordpress/block-library": "file:../block-library",
+		"@wordpress/components": "file:../components",
+		"@wordpress/data": "file:../data",
+		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/media-utils": "file:../media-utils",
+		"@wordpress/notices": "file:../notices"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/edit-site/src/components/block-editor/index.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+import { uploadMedia } from '@wordpress/media-utils';
+import {
+	BlockEditorProvider,
+	BlockEditorKeyboardShortcuts,
+	BlockInspector,
+	WritingFlow,
+	ObserveTyping,
+	BlockList,
+	ButtonBlockerAppender,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Sidebar from '../sidebar';
+
+export default function BlockEditor( { settings: _settings } ) {
+	const canUserCreateMedia = useSelect( ( select ) => {
+		const _canUserCreateMedia = select( 'core' ).canUser( 'create', 'media' );
+		return _canUserCreateMedia || _canUserCreateMedia !== false;
+	}, [] );
+	const settings = useMemo( () => {
+		if ( ! canUserCreateMedia ) {
+			return _settings;
+		}
+		return {
+			..._settings,
+			mediaUpload( { onError, ...rest } ) {
+				uploadMedia( {
+					wpAllowedMimeTypes: _settings.allowedMimeTypes,
+					onError: ( { message } ) => onError( message ),
+					...rest,
+				} );
+			},
+		};
+	}, [ canUserCreateMedia, _settings ] );
+	const [ blocks, setBlocks ] = useState( [] );
+	return (
+		<BlockEditorProvider
+			settings={ settings }
+			value={ blocks }
+			onInput={ setBlocks }
+			onChange={ setBlocks }
+		>
+			<BlockEditorKeyboardShortcuts />
+			<Sidebar.InspectorFill>
+				<BlockInspector />
+			</Sidebar.InspectorFill>
+			<div className="editor-styles-wrapper">
+				<WritingFlow>
+					<ObserveTyping>
+						<BlockList
+							className="edit-site-block-editor__block-list"
+							renderAppender={ ButtonBlockerAppender }
+						/>
+					</ObserveTyping>
+				</WritingFlow>
+			</div>
+		</BlockEditorProvider>
+	);
+}