@wordpress/edit-site 6.19.0 → 6.20.0

package/src/components/site-editor-routes/page-item.js

@@ -9,19 +9,39 @@ import { __ } from '@wordpress/i18n';
 import Editor from '../editor';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 
 export const pageItemRoute = {
 	name: 'page-item',
 	path: '/page/:postId',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreen
-				title={ __( 'Pages' ) }
-				backPath="/"
-				content={ <DataViewsSidebarContent postType="page" /> }
-			/>
-		),
-		mobile: <Editor />,
-		preview: <Editor />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreen
+					title={ __( 'Pages' ) }
+					backPath="/"
+					content={ <DataViewsSidebarContent postType="page" /> }
+				/>
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

package/src/components/site-editor-routes/pages.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  */
 import Editor from '../editor';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import PostList from '../post-list';
 import { unlock } from '../../lock-unlock';
@@ -27,21 +28,40 @@ export const pagesRoute = {
 	name: 'pages',
 	path: '/page',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreen
-				title={ __( 'Pages' ) }
-				backPath="/"
-				content={ <DataViewsSidebarContent postType="page" /> }
-			/>
-		),
-		content: <PostList postType="page" />,
-		preview( { query } ) {
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreen
+					title={ __( 'Pages' ) }
+					backPath="/"
+					content={ <DataViewsSidebarContent postType="page" /> }
+				/>
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		content( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <PostList postType="page" /> : undefined;
+		},
+		preview( { query, siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			if ( ! isBlockTheme ) {
+				return undefined;
+			}
 			const isListView =
 				( query.layout === 'list' || ! query.layout ) &&
 				query.isCustom !== 'true';
 			return isListView ? <Editor /> : undefined;
 		},
-		mobile: <MobilePagesView />,
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobilePagesView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 		edit( { query } ) {
 			const hasQuickEdit =
 				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;

package/src/components/site-editor-routes/pattern-item.js

@@ -3,12 +3,20 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const patternItemRoute = {
 	name: 'pattern-item',
 	path: '/wp_block/:postId',
 	areas: {
-		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			const backPath =
+				isBlockTheme || isClassicThemeWithStyleBookSupport( siteData )
+					? '/'
+					: undefined;
+			return <SidebarNavigationScreenPatterns backPath={ backPath } />;
+		},
 		mobile: <Editor />,
 		preview: <Editor />,
 	},

package/src/components/site-editor-routes/patterns.js

@@ -1,34 +1,35 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import PagePatterns from '../page-patterns';
-import { unlock } from '../../lock-unlock';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-function MobilePatternsView() {
-	const { query = {} } = useLocation();
-	const { categoryId } = query;
-
-	return !! categoryId ? (
-		<PagePatterns />
-	) : (
-		<SidebarNavigationScreenPatterns backPath="/" />
-	);
-}
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const patternsRoute = {
 	name: 'patterns',
 	path: '/pattern',
 	areas: {
-		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			const backPath =
+				isBlockTheme || isClassicThemeWithStyleBookSupport( siteData )
+					? '/'
+					: undefined;
+			return <SidebarNavigationScreenPatterns backPath={ backPath } />;
+		},
 		content: <PagePatterns />,
-		mobile: <MobilePatternsView />,
+		mobile( { siteData, query } ) {
+			const { categoryId } = query;
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			const backPath =
+				isBlockTheme || isClassicThemeWithStyleBookSupport( siteData )
+					? '/'
+					: undefined;
+			return !! categoryId ? (
+				<PagePatterns />
+			) : (
+				<SidebarNavigationScreenPatterns backPath={ backPath } />
+			);
+		},
 	},
 };

package/src/components/site-editor-routes/stylebook.js

@@ -7,22 +7,36 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { StyleBookPreview } from '../style-book';
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const stylebookRoute = {
 	name: 'stylebook',
 	path: '/stylebook',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreen
-				title={ __( 'Styles' ) }
-				backPath="/"
-				description={ __(
-					`Preview your website's visual identity: colors, typography, and blocks.`
-				) }
-			/>
-		),
-		preview: <StyleBookPreview isStatic />,
-		mobile: <StyleBookPreview isStatic />,
+		sidebar( { siteData } ) {
+			return isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<SidebarNavigationScreen
+					title={ __( 'Styles' ) }
+					backPath="/"
+					description={ __(
+						`Preview your website's visual identity: colors, typography, and blocks.`
+					) }
+				/>
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			return isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<StyleBookPreview isStatic />
+			) : undefined;
+		},
+		mobile( { siteData } ) {
+			return isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<StyleBookPreview isStatic />
+			) : undefined;
+		},
 	},
 };

package/src/components/site-editor-routes/template-item.js

@@ -3,13 +3,35 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 
 export const templateItemRoute = {
 	name: 'template-item',
 	path: '/wp_template/*postId',
 	areas: {
-		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenTemplatesBrowse backPath="/" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

package/src/components/site-editor-routes/templates.js

@@ -3,19 +3,41 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import PageTemplates from '../page-templates';
 
 export const templatesRoute = {
 	name: 'templates',
 	path: '/template',
 	areas: {
-		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		content: <PageTemplates />,
-		preview( { query } ) {
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenTemplatesBrowse backPath="/" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		content( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <PageTemplates /> : undefined;
+		},
+		preview( { query, siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			if ( ! isBlockTheme ) {
+				return undefined;
+			}
 			const isListView = query.layout === 'list';
 			return isListView ? <Editor /> : undefined;
 		},
-		mobile: <PageTemplates />,
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<PageTemplates />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 	widths: {
 		content( { query } ) {

package/src/components/site-editor-routes/utils.js

@@ -0,0 +1,14 @@
+/**
+ * Check if the classic theme supports the stylebook.
+ *
+ * @param {Object} siteData - The site data provided by the site editor route area resolvers.
+ * @return {boolean} True if the stylebook is supported, false otherwise.
+ */
+export function isClassicThemeWithStyleBookSupport( siteData ) {
+	const isBlockTheme = siteData.currentTheme?.is_block_theme;
+	const supportsEditorStyles =
+		siteData.currentTheme?.theme_supports[ 'editor-styles' ];
+	// This is a temp solution until the has_theme_json value is available for the current theme.
+	const hasThemeJson = siteData.editorSettings?.supportsLayout;
+	return ! isBlockTheme && ( supportsEditorStyles || hasThemeJson );
+}

package/src/components/site-hub/index.js

@@ -121,21 +121,65 @@ export const SiteHubMobile = memo(
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
 
-		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
+		const {
+			dashboardLink,
+			homeUrl,
+			siteTitle,
+			isBlockTheme,
+			isClassicThemeWithStyleBookSupport,
+		} = useSelect( ( select ) => {
 			const { getSettings } = unlock( select( editSiteStore ) );
-			const { getEntityRecord } = select( coreStore );
+			const { getEntityRecord, getCurrentTheme } = select( coreStore );
 			const _site = getEntityRecord( 'root', 'site' );
+			const currentTheme = getCurrentTheme();
+			const settings = getSettings();
+			const supportsEditorStyles =
+				currentTheme.theme_supports[ 'editor-styles' ];
+			// This is a temp solution until the has_theme_json value is available for the current theme.
+			const hasThemeJson = settings.supportsLayout;
+
 			return {
-				dashboardLink: getSettings().__experimentalDashboardLink,
+				dashboardLink: settings.__experimentalDashboardLink,
 				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				siteTitle:
 					! _site?.title && !! _site?.url
 						? filterURLForDisplay( _site?.url )
 						: _site?.title,
+				isBlockTheme: currentTheme?.is_block_theme,
+				isClassicThemeWithStyleBookSupport:
+					! currentTheme?.is_block_theme &&
+					( supportsEditorStyles || hasThemeJson ),
 			};
 		}, [] );
 		const { open: openCommandCenter } = useDispatch( commandsStore );
-		const isRoot = path === '/';
+
+		let backPath;
+
+		// If the current path is not the root page, find a page to back to.
+		if ( path !== '/' ) {
+			if ( isBlockTheme || isClassicThemeWithStyleBookSupport ) {
+				// If the current theme is a block theme or a classic theme that supports StyleBook,
+				// back to the Design screen.
+				backPath = '/';
+			} else if ( path !== '/pattern' ) {
+				// If the current theme is a classic theme that does not support StyleBook,
+				// back to the Patterns page.
+				backPath = '/pattern';
+			}
+		}
+
+		const backButtonProps = {
+			href: !! backPath ? undefined : dashboardLink,
+			label: !! backPath
+				? __( 'Go to Site Editor' )
+				: __( 'Go to the Dashboard' ),
+			onClick: !! backPath
+				? () => {
+						history.navigate( backPath );
+						navigate( 'back' );
+				  }
+				: undefined,
+		};
 
 		return (
 			<div className="edit-site-site-hub">
@@ -156,18 +200,7 @@ export const SiteHubMobile = memo(
 								transform: 'scale(0.5)',
 								borderRadius: 4,
 							} }
-							{ ...( isRoot
-								? {
-										href: dashboardLink,
-										label: __( 'Go to the Dashboard' ),
-								  }
-								: {
-										onClick: () => {
-											history.navigate( '/' );
-											navigate( 'back' );
-										},
-										label: __( 'Go to Site Editor' ),
-								  } ) }
+							{ ...backButtonProps }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</Button>