Add: Site editor template mosaic view

lib/full-site-editing/block-templates.php

@@ -225,6 +225,7 @@ function _gutenberg_build_template_result_from_file( $template_file, $template_t
 	$template->title          = $template_file['slug'];
 	$template->status         = 'publish';
 	$template->has_theme_file = true;
+	$template->author         = null;
 
 	if ( 'wp_template' === $template_type && isset( $default_template_types[ $template_file['slug'] ] ) ) {
 		$template->description = $default_template_types[ $template_file['slug'] ]['description'];
@@ -272,6 +273,7 @@ function _gutenberg_build_template_result_from_post( $post ) {
 	$template->title          = $post->post_title;
 	$template->status         = $post->post_status;
 	$template->has_theme_file = $has_theme_file;
+	$template->author         = intval( $post->post_author );
 
 	if ( 'wp_template_part' === $post->post_type ) {
 		$type_terms = get_the_terms( $post, 'wp_template_part_area' );

lib/full-site-editing/class-gutenberg-rest-templates-controller.php

@@ -408,6 +408,7 @@ public function prepare_item_for_response( $template, $request ) { // phpcs:igno
 			'status'         => $template->status,
 			'wp_id'          => $template->wp_id,
 			'has_theme_file' => $template->has_theme_file,
+			'author'         => $template->author,
 		);
 
 		if ( 'wp_template_part' === $template->type ) {
@@ -567,6 +568,12 @@ public function get_item_schema() {
 					'context'     => array( 'embed', 'view', 'edit' ),
 					'readonly'    => true,
 				),
+				'author'         => array(
+					'description' => __( 'Template author', 'gutenberg' ),
+					'type'        => 'integer',
+					'context'     => array( 'embed', 'view', 'edit' ),
+					'readonly'    => true,
+				),
 			),
 		);
 

lib/full-site-editing/class-wp-block-template.php

@@ -87,4 +87,11 @@ class WP_Block_Template {
 	 * @var boolean
 	 */
 	public $has_theme_file;
+
+	/**
+	 * Template author.
+	 *
+	 * @var integer|null
+	 */
+	public $author;
 }

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function SiteEditorBlockEditorProvider( {
+	setIsInserterOpen,
+	children,
+} ) {
+	const { settings, templateType } = useSelect(
+		( select ) => {
+			const { getSettings, getEditedPostType } = select( editSiteStore );
+			return {
+				settings: getSettings( setIsInserterOpen ),
+				templateType: getEditedPostType(),
+			};
+		},
+		[ setIsInserterOpen ]
+	);
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		templateType
+	);
+	return (
+		<BlockEditorProvider
+			settings={ settings }
+			value={ blocks }
+			onInput={ onInput }
+			onChange={ onChange }
+			useSubRegistry={ false }
+		>
+			{ children }
+		</BlockEditorProvider>
+	);
+}

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

@@ -3,9 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useRef } from '@wordpress/element';
-import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
-	BlockEditorProvider,
 	__experimentalLinkControl,
 	BlockInspector,
 	BlockList,
@@ -35,41 +33,29 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings, templateType, page, deviceType } = useSelect(
+	const { styles, page, deviceType } = useSelect(
 		( select ) => {
 			const {
 				getSettings,
-				getEditedPostType,
 				getPage,
 				__experimentalGetPreviewDeviceType,
 			} = select( editSiteStore );
 			return {
-				settings: getSettings( setIsInserterOpen ),
-				templateType: getEditedPostType(),
+				styles: getSettings().styles,
 				page: getPage(),
 				deviceType: __experimentalGetPreviewDeviceType(),
 			};
 		},
 		[ setIsInserterOpen ]
 	);
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		templateType
-	);
 	const { setPage } = useDispatch( editSiteStore );
 	const resizedCanvasStyles = useResizeCanvas( deviceType, true );
 	const ref = useMouseMoveTypingReset();
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 
 	return (
-		<BlockEditorProvider
-			settings={ settings }
-			value={ blocks }
-			onInput={ onInput }
-			onChange={ onChange }
-			useSubRegistry={ false }
-		>
+		<>
 			<TemplatePartConverter />
 			<__experimentalLinkControl.ViewerFill>
 				{ useCallback(
@@ -92,7 +78,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			>
 				<Iframe
 					style={ resizedCanvasStyles }
-					head={ <EditorStyles styles={ settings.styles } /> }
+					head={ <EditorStyles styles={ styles } /> }
 					ref={ ref }
 					contentRef={ mergedRefs }
 					name="editor-canvas"
@@ -108,6 +94,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					) }
 				</__unstableBlockSettingsMenuFirstItem>
 			</BlockTools>
-		</BlockEditorProvider>
+		</>
 	);
 }

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

@@ -33,6 +33,7 @@ import { PluginArea } from '@wordpress/plugins';
 import Header from '../header';
 import { SidebarComplementaryAreaFills } from '../sidebar';
 import BlockEditor from '../block-editor';
+import SiteEditorBlockEditorProvider from '../block-editor/block-editor-provider';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
 import NavigationSidebar from '../navigation-sidebar';
@@ -41,6 +42,7 @@ import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
+import MosaicView from '../mosaic-view';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
@@ -59,6 +61,7 @@ function Editor( { initialSettings, onError } ) {
 		template,
 		templateResolved,
 		isNavigationOpen,
+		editorMode,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -68,6 +71,7 @@ function Editor( { initialSettings, onError } ) {
 			getEditedPostId,
 			getPage,
 			isNavigationOpened,
+			getEditorMode,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const postType = getEditedPostType();
@@ -95,6 +99,7 @@ function Editor( { initialSettings, onError } ) {
 				: false,
 			entityId: postId,
 			isNavigationOpen: isNavigationOpened(),
+			editorMode: getEditorMode(),
 		};
 	}, [] );
 	const { updateEditorSettings } = useDispatch( editorStore );
@@ -200,89 +205,99 @@ function Editor( { initialSettings, onError } ) {
 										settings.__experimentalGlobalStylesBaseStyles
 									}
 								>
-									<ErrorBoundary onError={ onError }>
-										<FullscreenMode isActive />
-										<UnsavedChangesWarning />
-										<KeyboardShortcuts.Register />
-										<SidebarComplementaryAreaFills />
-										<InterfaceSkeleton
-											labels={ interfaceLabels }
-											drawer={ <NavigationSidebar /> }
-											secondarySidebar={ secondarySidebar() }
-											sidebar={
-												sidebarIsOpened && (
-													<ComplementaryArea.Slot scope="core/edit-site" />
-												)
-											}
-											header={
-												<Header
-													openEntitiesSavedStates={
-														openEntitiesSavedStates
-													}
-												/>
-											}
-											notices={ <EditorSnackbars /> }
-											content={
-												<>
-													<EditorNotices />
-													{ template && (
-														<BlockEditor
-															setIsInserterOpen={
-																setIsInserterOpened
-															}
-														/>
-													) }
-													{ templateResolved &&
-														! template &&
-														settings?.siteUrl &&
-														entityId && (
-															<Notice
-																status="warning"
-																isDismissible={
-																	false
-																}
-															>
-																{ __(
-																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																) }
-															</Notice>
+									<SiteEditorBlockEditorProvider
+										setIsInserterOpen={
+											setIsInserterOpened
+										}
+									>
+										<ErrorBoundary onError={ onError }>
+											<FullscreenMode isActive />
+											<UnsavedChangesWarning />
+											<KeyboardShortcuts.Register />
+											<SidebarComplementaryAreaFills />
+											<InterfaceSkeleton
+												labels={ interfaceLabels }
+												drawer={ <NavigationSidebar /> }
+												secondarySidebar={ secondarySidebar() }
+												sidebar={
+													sidebarIsOpened && (
+														<ComplementaryArea.Slot scope="core/edit-site" />
+													)
+												}
+												header={
+													<Header
+														openEntitiesSavedStates={
+															openEntitiesSavedStates
+														}
+													/>
+												}
+												notices={ <EditorSnackbars /> }
+												content={
+													<>
+														<EditorNotices />
+														{ editorMode ===
+															'visual' &&
+															template && (
+																<BlockEditor />
+															) }
+														{ editorMode ===
+															'visual' &&
+															templateResolved &&
+															! template &&
+															settings?.siteUrl &&
+															entityId && (
+																<Notice
+																	status="warning"
+																	isDismissible={
+																		false
+																	}
+																>
+																	{ __(
+																		"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+																	) }
+																</Notice>
+															) }
+														{ editorMode ===
+															'mosaic' && (
+															<MosaicView />
 														) }
-													<KeyboardShortcuts />
-												</>
-											}
-											actions={
-												<>
-													{ isEntitiesSavedStatesOpen ? (
-														<EntitiesSavedStates
-															close={
-																closeEntitiesSavedStates
-															}
-														/>
-													) : (
-														<div className="edit-site-editor__toggle-save-panel">
-															<Button
-																variant="secondary"
-																className="edit-site-editor__toggle-save-panel-button"
-																onClick={
-																	openEntitiesSavedStates
-																}
-																aria-expanded={
-																	false
+														<KeyboardShortcuts />
+													</>
+												}
+												actions={
+													<>
+														{ isEntitiesSavedStatesOpen ? (
+															<EntitiesSavedStates
+																close={
+																	closeEntitiesSavedStates
 																}
-															>
-																{ __(
-																	'Open save panel'
-																) }
-															</Button>
-														</div>
-													) }
-												</>
-											}
-											footer={ <BlockBreadcrumb /> }
-										/>
-										<Popover.Slot />
-										<PluginArea />
-									</ErrorBoundary>
+															/>
+														) : (
+															<div className="edit-site-editor__toggle-save-panel">
+																<Button
+																	variant="secondary"
+																	className="edit-site-editor__toggle-save-panel-button"
+																	onClick={
+																		openEntitiesSavedStates
+																	}
+																	aria-expanded={
+																		false
+																	}
+																>
+																	{ __(
+																		'Open save panel'
+																	) }
+																</Button>
+															</div>
+														) }
+													</>
+												}
+												footer={ <BlockBreadcrumb /> }
+											/>
+											<Popover.Slot />
+											<PluginArea />
+										</ErrorBoundary>
+									</SiteEditorBlockEditorProvider>
 								</GlobalStylesProvider>
 							</BlockContextProvider>
 						</EntityProvider>