Classic themes: prevent access to parts of the Site Editor

packages/edit-site/src/components/sidebar-dataviews/index.js

@@ -3,6 +3,8 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -19,9 +21,16 @@ export default function DataViewsSidebarContent( { postType } ) {
 		query: { activeView = 'all', isCustom = 'false' },
 	} = useLocation();
 	const defaultViews = useDefaultViews( { postType } );
-	if ( ! postType ) {
+
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! postType || ( ! isBlockBasedTheme && postType === 'page' ) ) {
 		return null;
 	}
+
 	const isCustomBoolean = isCustom === 'true';
 
 	return (

packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js

@@ -5,9 +5,11 @@ import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { seen } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -73,6 +75,21 @@ export default function GlobalStylesUIWrapper() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ section, onChangeSection ] = useSection();
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! isBlockBasedTheme ) {
+		return (
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</Notice>
+		);
+	}
+
 	return (
 		<>
 			<Page

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

@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -45,6 +46,11 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	);
 	const { set: setPreference } = useDispatch( preferencesStore );
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
 	const openGlobalStyles = useCallback( async () => {
 		history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
 			transition: 'canvas-mode-edit-transition',
@@ -68,6 +74,10 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const shouldShowGlobalStylesFooter =
 		!! revisionsCount && ! isLoadingRevisions;
 
+	if ( ! isBlockBasedTheme ) {
+		return null;
+	}
+
 	return (
 		<>
 			<SidebarNavigationScreen

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
-import { Spinner } from '@wordpress/components';
+import { Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -61,6 +61,21 @@ export default function SidebarNavigationScreenNavigationMenu( { backPath } ) {
 	const _handleSave = ( edits ) => handleSave( navigationMenu, edits );
 	const _handleDuplicate = () => handleDuplicate( navigationMenu );
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! isBlockBasedTheme ) {
+		return (
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</Notice>
+		);
+	}
+
 	if ( isLoading ) {
 		return (
 			<SidebarNavigationScreenWrapper

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

@@ -9,6 +9,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import {
 	__experimentalItemGroup as ItemGroup,
 	Spinner,
+	Notice,
 } from '@wordpress/components';
 import { navigation } from '@wordpress/icons';
 
@@ -82,6 +83,21 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! isBlockBasedTheme ) {
+		return (
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</Notice>
+		);
+	}
+
 	if ( isLoading ) {
 		return (
 			<SidebarNavigationScreenWrapper backPath={ backPath }>

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

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -10,14 +12,23 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import DataviewsTemplatesSidebarContent from './content';
 
 export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 	return (
 		<SidebarNavigationScreen
 			title={ __( 'Templates' ) }
-			description={ __(
-				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
-			) }
+			description={
+				isBlockBasedTheme &&
+				__(
+					'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+				)
+			}
 			backPath={ backPath }
-			content={ <DataviewsTemplatesSidebarContent /> }
+			content={
+				isBlockBasedTheme && <DataviewsTemplatesSidebarContent />
+			}
 		/>
 	);
 }

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

@@ -2,6 +2,10 @@
  * WordPress dependencies
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { Notice } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -12,12 +16,29 @@ import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 
+const PreviewComponent = () => {
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	return isBlockBasedTheme ? (
+		<Editor />
+	) : (
+		<Notice status="warning" isDismissible={ false }>
+			{ __(
+				'The theme you are currently using is not compatible with the Site Editor.'
+			) }
+		</Notice>
+	);
+};
+
 function MobileNavigationItemView() {
 	const { query = {} } = useLocation();
 	const { canvas = 'view' } = query;
 
 	return canvas === 'edit' ? (
-		<Editor />
+		<PreviewComponent />
 	) : (
 		<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
 	);
@@ -30,7 +51,7 @@ export const navigationItemRoute = {
 		sidebar: (
 			<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
 		),
-		preview: <Editor />,
+		preview: <PreviewComponent />,
 		mobile: <MobileNavigationItemView />,
 	},
 };

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

@@ -3,6 +3,9 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { Notice } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -16,11 +19,40 @@ import { PostEdit } from '../post-edit';
 
 const { useLocation } = unlock( routerPrivateApis );
 
+const useIsBlockBasedTheme = () =>
+	useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+const ContentComponent = () => {
+	const isBlockBasedTheme = useIsBlockBasedTheme();
+
+	return isBlockBasedTheme ? (
+		<PostList postType="page" />
+	) : (
+		<Notice status="warning" isDismissible={ false }>
+			{ __(
+				'The theme you are currently using is not compatible with the Site Editor.'
+			) }
+		</Notice>
+	);
+};
+
+const PreviewComponent = ( { query } ) => {
+	const isBlockBasedTheme = useIsBlockBasedTheme();
+	const isListView =
+		( query.layout === 'list' || ! query.layout ) &&
+		query.isCustom !== 'true';
+
+	return isListView && isBlockBasedTheme ? <Editor /> : null;
+};
+
 function MobilePagesView() {
 	const { query = {} } = useLocation();
 	const { canvas = 'view' } = query;
 
-	return canvas === 'edit' ? <Editor /> : <PostList postType="page" />;
+	return canvas === 'edit' ? <Editor /> : <ContentComponent />;
 }
 
 export const pagesRoute = {
@@ -34,12 +66,9 @@ export const pagesRoute = {
 				content={ <DataViewsSidebarContent postType="page" /> }
 			/>
 		),
-		content: <PostList postType="page" />,
+		content: <ContentComponent />,
 		preview( { query } ) {
-			const isListView =
-				( query.layout === 'list' || ! query.layout ) &&
-				query.isCustom !== 'true';
-			return isListView ? <Editor /> : undefined;
+			return <PreviewComponent query={ query } />;
 		},
 		mobile: <MobilePagesView />,
 		edit( { query } ) {

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

@@ -1,21 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import PageTemplates from '../page-templates';
 
+const ContentComponent = () => {
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	return isBlockBasedTheme ? (
+		<PageTemplates />
+	) : (
+		<Notice status="warning" isDismissible={ false }>
+			{ __(
+				'The theme you are currently using is not compatible with the Site Editor.'
+			) }
+		</Notice>
+	);
+};
+
 export const templatesRoute = {
 	name: 'templates',
 	path: '/template',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		content: <PageTemplates />,
+		content: <ContentComponent />,
 		preview( { query } ) {
 			const isListView = query.layout === 'list';
 			return isListView ? <Editor /> : undefined;
 		},
-		mobile: <PageTemplates />,
+		mobile: <ContentComponent />,
 	},
 	widths: {
 		content( { query } ) {