Classic themes: prevent access to parts of the Site Editor

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

@@ -157,7 +157,6 @@ export default function EditSiteEditor( {
 		postWithTemplate ? context.postType : postType,
 		postWithTemplate ? context.postId : postId
 	);
-	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
 	const isEditMode = canvas === 'edit';
@@ -183,6 +182,9 @@ export default function EditSiteEditor( {
 		],
 		[ settings.styles, canvas, currentPostIsTrashed ]
 	);
+
+	// Disable Reason: useDispatch needs to be before the early return.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
@@ -240,14 +242,26 @@ export default function EditSiteEditor( {
 		]
 	);
 
-	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
-	const title = getEditorCanvasContainerTitle( editorCanvasView );
-
 	const isReady = ! isLoading;
 	const transition = {
 		duration: disableMotion ? 0 : 0.2,
 	};
 
+	// Do not render the editor preview for pages or navigation menus in classic themes,
+	// because editing these in the Site Editor is not supported.
+	// The wp_template post type is used in the condition because it is used on the page screen.
+	if (
+		! isBlockBasedTheme &&
+		( postType === 'wp_navigation' || postType === 'wp_template' )
+	) {
+		return null;
+	}
+
+	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
+	const title = getEditorCanvasContainerTitle( editorCanvasView );
+
+	const _isPreviewingTheme = isPreviewingTheme();
+
 	return ! isBlockBasedTheme && isHomeRoute ? (
 		<SitePreview />
 	) : (

packages/edit-site/src/components/layout/style.scss

@@ -262,7 +262,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 }
 
-.edit-site-layout__area__404 {
+.edit-site-layout__area__404,
+.edit-site-layout__area__unsupported {
 	margin: $canvas-padding;
 }
 

packages/edit-site/src/components/page-templates/index.js

@@ -3,11 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
-import { privateApis as corePrivateApis } from '@wordpress/core-data';
+import {
+	privateApis as corePrivateApis,
+	store as coreStore,
+} from '@wordpress/core-data';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { addQueryArgs } from '@wordpress/url';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -189,6 +193,21 @@ export default function PageTemplates() {
 		}
 	} );
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! isBlockBasedTheme ) {
+		return (
+			<p className="edit-site-layout__area__unsupported">
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</p>
+		);
+	}
+
 	return (
 		<Page
 			className="edit-site-page-templates"

packages/edit-site/src/components/post-list/index.js

@@ -384,6 +384,21 @@ export default function PostList( { postType } ) {
 		closeModal();
 	};
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! isBlockBasedTheme ) {
+		return (
+			<p className="edit-site-layout__area__unsupported">
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</p>
+		);
+	}
+
 	return (
 		<Page
 			title={ labels?.name }

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,20 @@ export default function DataViewsSidebarContent( { postType } ) {
 		query: { activeView = 'all', isCustom = 'false' },
 	} = useLocation();
 	const defaultViews = useDefaultViews( { postType } );
+
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
 	if ( ! postType ) {
 		return null;
 	}
+
+	if ( ! isBlockBasedTheme && postType === 'page' ) {
+		return null;
+	}
+
 	const isCustomBoolean = isCustom === 'true';
 
 	return (

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

@@ -8,6 +8,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { Button } 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 (
+			<p className="edit-site-layout__area__unsupported">
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</p>
+		);
+	}
+
 	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

@@ -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 (
+			<p className="edit-site-layout__area__unsupported">
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</p>
+		);
+	}
+
 	if ( isLoading ) {
 		return (
 			<SidebarNavigationScreenWrapper

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

@@ -82,6 +82,21 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! isBlockBasedTheme ) {
+		return (
+			<p className="edit-site-layout__area__unsupported">
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</p>
+		);
+	}
+
 	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,24 @@ 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.'
+					  )
+					: null
+			}
 			backPath={ backPath }
-			content={ <DataviewsTemplatesSidebarContent /> }
+			content={
+				isBlockBasedTheme ? <DataviewsTemplatesSidebarContent /> : ''
+			}
 		/>
 	);
 }