Edit Site: Render basic editor.

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
@@ -67,6 +68,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
@@ -76,6 +78,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/package.json

@@ -21,7 +21,16 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.4.4"
+		"@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>
+	);
+}

packages/edit-site/src/components/block-editor/style.scss

@@ -0,0 +1,19 @@
+.editor-styles-wrapper {
+	-webkit-overflow-scrolling: touch;
+	background: $white;
+	height: calc(100% - #{$header-height});
+	left: 0;
+	overflow: auto;
+	position: absolute;
+	top: $header-height;
+	width: 100%;
+
+	@include break-small {
+		width: calc(100% - #{$sidebar-width});
+	}
+}
+
+.edit-site-block-editor__block-list {
+	padding-bottom: $grid-size-xlarge;
+	padding-top: $grid-size-xlarge + 5;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SlotFillProvider,
+	DropZoneProvider,
+	Popover,
+	navigateRegions,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Notices from '../notices';
+import Header from '../header';
+import Sidebar from '../sidebar';
+import BlockEditor from '../block-editor';
+
+function Editor( { settings } ) {
+	return (
+		<SlotFillProvider>
+			<DropZoneProvider>
+				<Notices />
+				<Header />
+				<Sidebar />
+				<BlockEditor settings={ settings } />
+				<Popover.Slot />
+			</DropZoneProvider>
+		</SlotFillProvider>
+	);
+}
+
+export default navigateRegions( Editor );

packages/edit-site/src/components/header/index.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default function Header() {
+	return (
+		<div
+			className="edit-site-header"
+			role="region"
+			aria-label={ __( 'Site editor top bar.' ) }
+			tabIndex="-1"
+		>
+			<h1 className="edit-site-header__title">
+				{ __( 'Site Editor' ) } { __( '(beta)' ) }
+			</h1>
+		</div>
+	);
+}

packages/edit-site/src/components/header/style.scss

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

packages/edit-site/src/components/notices/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { SnackbarList } from '@wordpress/components';
+
+export default function Notices() {
+	const notices = useSelect(
+		( select ) =>
+			select( 'core/notices' )
+				.getNotices()
+				.filter( ( notice ) => notice.type === 'snackbar' ),
+		[]
+	);
+	const { removeNotice } = useDispatch( 'core/notices' );
+	return (
+		<SnackbarList
+			className="edit-site-notices"
+			notices={ notices }
+			onRemove={ removeNotice }
+		/>
+	);
+}

packages/edit-site/src/components/notices/style.scss

@@ -0,0 +1,9 @@
+.edit-site-notices {
+	bottom: 20px;
+	padding-left: 16px;
+	padding-right: 16px;
+	position: fixed;
+	right: 0;
+}
+
+@include editor-left(".edit-site-notices");

packages/edit-site/src/components/sidebar/index.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, Panel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
+	'EditSiteSidebarInspector'
+);
+
+function Sidebar() {
+	return (
+		<div
+			className="edit-site-sidebar"
+			role="region"
+			aria-label={ __( 'Site editor advanced settings.' ) }
+			tabIndex="-1"
+		>
+			<Panel header={ __( 'Inspector' ) }>
+				<InspectorSlot bubblesVirtually />
+			</Panel>
+		</div>
+	);
+}
+
+Sidebar.InspectorFill = InspectorFill;
+
+export default Sidebar;

packages/edit-site/src/components/sidebar/style.scss

@@ -0,0 +1,46 @@
+.edit-site-sidebar {
+	background: $white;
+	border-left: $border-width solid $light-gray-500;
+	bottom: 0;
+	color: $dark-gray-500;
+	height: 100vh;
+	overflow: hidden;
+	position: fixed;
+	right: 0;
+	top: 0;
+	width: $sidebar-width;
+	z-index: z-index(".edit-site-sidebar");
+
+	@include break-small() {
+		-webkit-overflow-scrolling: touch;
+		height: auto;
+		overflow: auto;
+		top: $admin-bar-height-big + $header-height;
+		z-index: z-index(".edit-site-sidebar {greater than small}");
+	}
+
+	@include break-medium() {
+		top: $admin-bar-height + $header-height;
+	}
+
+	// Temporarily disable the sidebar on mobile.
+	display: none;
+	@include break-small() {
+		display: block;
+	}
+
+	> .components-panel {
+		border-left: 0;
+		border-right: 0;
+		margin-bottom: -1px;
+		margin-top: -1px;
+
+		> .components-panel__header {
+			background: $light-gray-200;
+		}
+	}
+
+	.block-editor-block-inspector__card {
+		margin: 0;
+	}
+}

packages/edit-site/src/hooks/components.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { MediaUpload } from '@wordpress/media-utils';
+
+addFilter(
+	'editor.MediaUpload',
+	'core/edit-site/components/media-upload',
+	() => MediaUpload
+);

packages/edit-site/src/hooks/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './components';

packages/edit-site/src/index.js

@@ -1 +1,29 @@
-export function initialize() {}
+/**
+ * WordPress dependencies
+ */
+import '@wordpress/notices';
+import {
+	registerCoreBlocks,
+	__experimentalRegisterExperimentalCoreBlocks,
+} from '@wordpress/block-library';
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './hooks';
+import Editor from './components/editor';
+
+/**
+ * Initializes the site editor screen.
+ *
+ * @param {string} id       ID of the root element to render the screen in.
+ * @param {Object} settings Editor settings.
+ */
+export function initialize( id, settings ) {
+	registerCoreBlocks();
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		__experimentalRegisterExperimentalCoreBlocks( settings );
+	}
+	render( <Editor settings={ settings } />, document.getElementById( id ) );
+}