WIP

packages/edit-site/src/components/sidebar-navigation-screen-not-supported/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Notice, __experimentalSpacer as Spacer } from '@wordpress/components';
+
+export default function SidebarNavigationScreenNotSupported() {
+	return (
+		<Spacer paddingY={ 6 }>
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'The theme you are currently using does not support current screen.'
+				) }
+			</Notice>
+		</Spacer>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js

@@ -100,7 +100,10 @@ function CategoriesGroup( {
 	);
 }
 
-export default function SidebarNavigationScreenPatterns( { backPath } ) {
+export default function SidebarNavigationScreenPatterns( {
+	isRoot,
+	backPath,
+} ) {
 	const {
 		query: { postType = 'wp_block', categoryId },
 	} = useLocation();
@@ -120,6 +123,7 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 			description={ __(
 				'Manage what patterns are available when editing the site.'
 			) }
+			isRoot={ isRoot }
 			backPath={ backPath }
 			content={
 				<>

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

@@ -2,14 +2,38 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenNotSupported from '../sidebar-navigation-screen-not-supported';
 import Editor from '../editor';
+import { isClassicThemeStyleBookSupported } from './utils';
+
+// TODO: Classic themes that do not support StyleBooks should not display any navigation screen or preview.
+// However, in the home root of a classic theme, the block editor is not present because only
+// the front-end site preview is rendered. This means that siteData.editorSettings?.supportsLayout
+// will always assume its default value of true. As a result, the navigation screen will be
+// displayed even if the classic theme does not support StyleBooks.
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
-		sidebar: <SidebarNavigationScreenMain />,
-		preview: <Editor isHomeRoute />,
-		mobile: <SidebarNavigationScreenMain />,
+		sidebar( { siteData } ) {
+			return isClassicThemeStyleBookSupported( siteData ) ? (
+				<SidebarNavigationScreenMain />
+			) : (
+				<SidebarNavigationScreenNotSupported />
+			);
+		},
+		preview( { siteData } ) {
+			return isClassicThemeStyleBookSupported( siteData ) ? (
+				<Editor isHomeRoute />
+			) : undefined;
+		},
+		mobile( { siteData } ) {
+			return isClassicThemeStyleBookSupported( siteData ) ? (
+				<SidebarNavigationScreenMain />
+			) : (
+				<SidebarNavigationScreenNotSupported />
+			);
+		},
 	},
 };

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

@@ -8,27 +8,48 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import PagePatterns from '../page-patterns';
+import { isClassicThemeStyleBookSupported } from './utils';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-function MobilePatternsView() {
+function MobilePatternsView( { siteData } ) {
 	const { query = {} } = useLocation();
 	const { categoryId } = query;
+	const backPath = isClassicThemeStyleBookSupported( siteData )
+		? undefined
+		: '/';
+	const isRoot = isClassicThemeStyleBookSupported( siteData );
 
 	return !! categoryId ? (
 		<PagePatterns />
 	) : (
-		<SidebarNavigationScreenPatterns backPath="/" />
+		<SidebarNavigationScreenPatterns
+			backPath={ backPath }
+			isRoot={ isRoot }
+		/>
 	);
 }
 
 export const patternsRoute = {
 	name: 'patterns',
 	path: '/pattern',
 	areas: {
-		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		sidebar( { siteData } ) {
+			const backPath = isClassicThemeStyleBookSupported( siteData )
+				? undefined
+				: '/';
+			const isRoot = isClassicThemeStyleBookSupported( siteData );
+			return (
+				<SidebarNavigationScreenPatterns
+					backPath={ backPath }
+					isRoot={ isRoot }
+				/>
+			);
+		},
 		content: <PagePatterns />,
-		mobile: <MobilePatternsView />,
+		mobile( { siteData } ) {
+			return <MobilePatternsView siteData={ siteData } />;
+		},
 	},
 };

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

@@ -7,22 +7,36 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenNotSupported from '../sidebar-navigation-screen-not-supported';
 import { StyleBookPreview } from '../style-book';
+import { isClassicThemeStyleBookSupported } 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 isClassicThemeStyleBookSupported( siteData ) ? (
+				<SidebarNavigationScreen
+					title={ __( 'Styles' ) }
+					backPath="/"
+					description={ __(
+						`Preview your website's visual identity: colors, typography, and blocks.`
+					) }
+				/>
+			) : (
+				<SidebarNavigationScreenNotSupported />
+			);
+		},
+		preview( { siteData } ) {
+			return isClassicThemeStyleBookSupported( siteData ) ? (
+				<StyleBookPreview isStatic />
+			) : undefined;
+		},
+		mobile( { siteData } ) {
+			return isClassicThemeStyleBookSupported( siteData ) ? (
+				<StyleBookPreview isStatic />
+			) : undefined;
+		},
 	},
 };

packages/edit-site/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 isClassicThemeStyleBookSupported( siteData ) {
+	const isBlockTheme = siteData.currentTheme?.is_block_theme;
+	const supportsEditorStyles =
+		siteData.currentTheme?.theme_supports[ 'editor-styles' ];
+	// supportsLayout is equivalent to the `wp_theme_has_theme_json()` PHP function.
+	const hasThemeJson = siteData.editorSettings?.supportsLayout;
+	return ! isBlockTheme && ( supportsEditorStyles || hasThemeJson );
+}

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

@@ -137,6 +137,21 @@ export const SiteHubMobile = memo(
 		const { open: openCommandCenter } = useDispatch( commandsStore );
 		const isRoot = path === '/';
 
+		console.log( isRoot );
+
+		const backButtonProps = {
+			href: isRoot ? dashboardLink : undefined,
+			label: isRoot
+				? __( 'Go to the Dashboard' )
+				: __( 'Go to Site Editor' ),
+			onClick: isRoot
+				? undefined
+				: () => {
+						history.navigate( '/' );
+						navigate( 'back' );
+				  },
+		};
+
 		return (
 			<div className="edit-site-site-hub">
 				<HStack justify="flex-start" spacing="0">
@@ -156,18 +171,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>