Classic themes: prevent access to parts of the Site Editor

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

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

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

@@ -8,6 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -27,10 +28,25 @@ export const navigationItemRoute = {
 	name: 'navigation-item',
 	path: '/wp_navigation/:postId',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
-		),
-		preview: <Editor />,
-		mobile: <MobileNavigationItemView />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <Editor /> : undefined;
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobileNavigationItemView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -8,6 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -27,8 +28,25 @@ export const navigationRoute = {
 	name: 'navigation',
 	path: '/navigation',
 	areas: {
-		sidebar: <SidebarNavigationScreenNavigationMenus backPath="/" />,
-		preview: <Editor />,
-		mobile: <MobileNavigationView />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenNavigationMenus backPath="/" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <Editor /> : undefined;
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobileNavigationView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

packages/edit-site/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 />
+			);
+		},
 	},
 };

packages/edit-site/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;

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

@@ -3,13 +3,31 @@
  */
 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 /> : undefined;
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

packages/edit-site/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 } ) {