From e8afdae60760c9978d2733540314ebbcee6a030a Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:37:20 +0900
Subject: [PATCH] Site Editor: Use the same editor component for all routes
 (#69093)

* Site Editor: Use the same editor component for all routes

* Remove MaybeEditor component

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
---
 .../edit-site/src/components/editor/index.js  | 18 ++++++++-----
 .../index.js => editor/site-preview.js}       | 27 +++++--------------
 .../src/components/site-editor-routes/home.js |  4 +--
 .../site-editor-routes/template-item.js       |  6 ++---
 .../site-editor-routes/template-part-item.js  |  6 ++---
 5 files changed, 27 insertions(+), 34 deletions(-)
 rename packages/edit-site/src/components/{maybe-editor/index.js => editor/site-preview.js} (74%)

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index ad88ee07e2150f..3a4828d93e911c 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/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>
 			) }
 		</>
diff --git a/packages/edit-site/src/components/maybe-editor/index.js b/packages/edit-site/src/components/editor/site-preview.js
similarity index 74%
rename from packages/edit-site/src/components/maybe-editor/index.js
rename to packages/edit-site/src/components/editor/site-preview.js
index 3ffa5a35b82ef7..e53f87bc5b2498 100644
--- a/packages/edit-site/src/components/maybe-editor/index.js
+++ b/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' ) }
diff --git a/packages/edit-site/src/components/site-editor-routes/home.js b/packages/edit-site/src/components/site-editor-routes/home.js
index 1c32000acb177a..d28b44ee4ec414 100644
--- a/packages/edit-site/src/components/site-editor-routes/home.js
+++ b/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 />,
 	},
 };
diff --git a/packages/edit-site/src/components/site-editor-routes/template-item.js b/packages/edit-site/src/components/site-editor-routes/template-item.js
index 22726f6a5ac430..8ad3ab2b699904 100644
--- a/packages/edit-site/src/components/site-editor-routes/template-item.js
+++ b/packages/edit-site/src/components/site-editor-routes/template-item.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
@@ -9,7 +9,7 @@ export const templateItemRoute = {
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };
diff --git a/packages/edit-site/src/components/site-editor-routes/template-part-item.js b/packages/edit-site/src/components/site-editor-routes/template-part-item.js
index e98af337b1c669..a2b21cf23f808d 100644
--- a/packages/edit-site/src/components/site-editor-routes/template-part-item.js
+++ b/packages/edit-site/src/components/site-editor-routes/template-part-item.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
@@ -9,7 +9,7 @@ export const templatePartItemRoute = {
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };