Site Editor: Use the same editor component for all routes

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

@@ -23,6 +23,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Icon, arrowUpLeft } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -53,7 +54,7 @@ import {
 	useResolveEditedEntity,
 	useSyncDeprecatedEntityIntoState,
 } from './use-resolve-edited-entity';
-import { addQueryArgs } from '@wordpress/url';
+import SitePreview from './site-preview';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -117,7 +118,10 @@ function getNavigationPath( location, postType ) {
 	return addQueryArgs( path, { canvas: undefined } );
 }
 
-export default function EditSiteEditor( { isPostsList = false } ) {
+export default function EditSiteEditor( {
+	isHomeRoute = false,
+	isPostsList = false,
+} ) {
 	const disableMotion = useReducedMotion();
 	const location = useLocation();
 	const { canvas = 'view' } = location.query;
@@ -128,7 +132,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	useSyncDeprecatedEntityIntoState( entity );
 	const { postType, postId, context } = entity;
 	const {
-		supportsGlobalStyles,
+		isBlockBasedTheme,
 		editorCanvasView,
 		currentPostIsTrashed,
 		hasSiteIcon,
@@ -140,7 +144,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
-			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
 			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
@@ -244,7 +248,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		duration: disableMotion ? 0 : 0.2,
 	};
 
-	return (
+	return ! isBlockBasedTheme && isHomeRoute ? (
+		<SitePreview />
+	) : (
 		<>
 			<GlobalStylesRenderer
 				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
@@ -349,7 +355,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						</BackButton>
 					) }
 					<SiteEditorMoreMenu />
-					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+					{ isBlockBasedTheme && <GlobalStylesSidebar /> }
 				</Editor>
 			) }
 		</>

packages/edit-site/src/components/maybe-editor/index.js → packages/edit-site/src/components/editor/site-preview.js

@@ -1,32 +1,19 @@
 /**
  * WordPress dependencies
  */
-
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-
-import Editor from '../editor';
-
-export function MaybeEditor( { showEditor = true } ) {
-	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+export default function SitePreview() {
+	const siteUrl = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
-
-		return {
-			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-			siteUrl: siteData?.home,
-		};
+		return siteData?.home;
 	}, [] );
 
 	// If theme is block based, return the Editor, otherwise return the site preview.
-	return isBlockBasedTheme || showEditor ? (
-		<Editor />
-	) : (
+	return (
 		<iframe
 			src={ siteUrl }
 			title={ __( 'Site Preview' ) }

packages/edit-site/src/components/site-editor-routes/home.js

@@ -2,14 +2,14 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <MaybeEditor showEditor={ false } />,
+		preview: <Editor isHomeRoute />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };

packages/edit-site/src/components/site-editor-routes/template-item.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
 	name: 'template-item',
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };

packages/edit-site/src/components/site-editor-routes/template-part-item.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
 	name: 'template-part-item',
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };