Don't allow access to Styles-related pages via the command palette in…

… the hybrid theme (#53123) * Don't allow access to Styles-related pages via the command palette in the hybrid theme * Don't use
WordPress · Aug 7, 2023 · ff5ab72 · ff5ab72
1 parent f2c1e87
commit ff5ab72
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 83 deletions.
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
@@ -10,14 +10,15 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { useIsSiteEditorAccessible } from './hooks';
+import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
 import { unlock } from './lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 export function useAdminNavigationCommands() {
 	const history = useHistory();
-	const isSiteEditorAccessible = useIsSiteEditorAccessible();
+	const isTemplatesAccessible = useIsTemplatesAccessible();
+	const isBlockBasedTheme = useIsBlockBasedTheme();
 
 	const isSiteEditor = getPath( window.location.href )?.includes(
 		'site-editor.php'
@@ -43,9 +44,7 @@ export function useAdminNavigationCommands() {
 		name: 'core/manage-reusable-blocks',
 		label: __( 'Open patterns' ),
 		callback: ( { close } ) => {
-			if ( ! isSiteEditorAccessible ) {
-				document.location.href = 'edit.php?post_type=wp_block';
-			} else {
+			if ( isTemplatesAccessible && isBlockBasedTheme ) {
 				const args = {
 					path: '/patterns',
 				};
@@ -55,6 +54,8 @@ export function useAdminNavigationCommands() {
 					document.location = addQueryArgs( 'site-editor.php', args );
 				}
 				close();
+			} else {
+				document.location.href = 'edit.php?post_type=wp_block';
 			}
 		},
 		icon: isSiteEditor ? symbol : external,

diff --git a/packages/core-commands/src/hooks.js b/packages/core-commands/src/hooks.js
@@ -1,16 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
-export function useIsSiteEditorAccessible() {
+export function useIsTemplatesAccessible() {
 	return useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings()
-				.__unstableIsBlockBasedTheme &&
-			select( coreStore ).canUser( 'read', 'templates' ),
+		( select ) => select( coreStore ).canUser( 'read', 'templates' ),
+		[]
+	);
+}
+
+export function useIsBlockBasedTheme() {
+	return useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
 		[]
 	);
 }
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -20,7 +20,7 @@ import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { useIsSiteEditorAccessible } from './hooks';
+import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
 import { unlock } from './lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -124,13 +124,15 @@ function useSiteEditorBasicNavigationCommands() {
 	const isSiteEditor = getPath( window.location.href )?.includes(
 		'site-editor.php'
 	);
-	const isSiteEditorAccessible = useIsSiteEditorAccessible();
+	const isTemplatesAccessible = useIsTemplatesAccessible();
+	const isBlockBasedTheme = useIsBlockBasedTheme();
 	const commands = useMemo( () => {
 		const result = [];
 
-		if ( ! isSiteEditorAccessible ) {
+		if ( ! isTemplatesAccessible || ! isBlockBasedTheme ) {
 			return result;
 		}
+
 		result.push( {
 			name: 'core/edit-site/open-navigation',
 			label: __( 'Open navigation' ),
@@ -204,7 +206,7 @@ function useSiteEditorBasicNavigationCommands() {
 		} );
 
 		return result;
-	}, [ history, isSiteEditor, isSiteEditorAccessible ] );
+	}, [ history, isSiteEditor, isTemplatesAccessible, isBlockBasedTheme ] );
 
 	return {
 		commands,

diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -23,6 +23,143 @@ import getIsListPage from '../../utils/get-is-list-page';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
+function useGlobalStylesOpenStylesCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
+	const { set } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	const history = useHistory();
+	const isDistractionFree = useSelect( ( select ) => {
+		return select( preferencesStore ).get(
+			editSiteStore.name,
+			'distractionFree'
+		);
+	}, [] );
+
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! isBlockBasedTheme ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-styles',
+				label: __( 'Open styles' ),
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					if ( isDistractionFree ) {
+						set( editSiteStore.name, 'distractionFree', false );
+						createInfoNotice(
+							__( 'Distraction free mode turned off.' ),
+							{
+								type: 'snackbar',
+							}
+						);
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+				},
+				icon: styles,
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setCanvasMode,
+		isEditorPage,
+		createInfoNotice,
+		getCanvasMode,
+		isDistractionFree,
+		isBlockBasedTheme,
+		set,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+function useGlobalStylesToggleWelcomeGuideCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
+	const { set } = useDispatch( preferencesStore );
+
+	const history = useHistory();
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! isBlockBasedTheme ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/toggle-styles-welcome-guide',
+				label: __( 'Learn about styles' ),
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+					set( 'core/edit-site', 'welcomeGuideStyles', true );
+					// sometimes there's a focus loss that happens after some time
+					// that closes the modal, we need to force reopening it.
+					setTimeout( () => {
+						set( 'core/edit-site', 'welcomeGuideStyles', true );
+					}, 500 );
+				},
+				icon: help,
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setCanvasMode,
+		isEditorPage,
+		getCanvasMode,
+		isBlockBasedTheme,
+		set,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
 function useGlobalStylesResetCommands() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const commands = useMemo( () => {
@@ -170,80 +307,14 @@ function useGlobalStylesOpenRevisionsCommands() {
 }
 
 export function useCommonCommands() {
-	const { openGeneralSidebar, setCanvasMode } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
-	const { set } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
-	const history = useHistory();
-	const { homeUrl, isDistractionFree } = useSelect( ( select ) => {
+	const homeUrl = useSelect( ( select ) => {
 		const {
 			getUnstableBase, // Site index.
 		} = select( coreStore );
 
-		return {
-			homeUrl: getUnstableBase()?.home,
-			isDistractionFree: select( preferencesStore ).get(
-				editSiteStore.name,
-				'distractionFree'
-			),
-		};
+		return getUnstableBase()?.home;
 	}, [] );
 
-	useCommand( {
-		name: 'core/edit-site/open-styles',
-		label: __( 'Open styles' ),
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			if ( isDistractionFree ) {
-				set( editSiteStore.name, 'distractionFree', false );
-				createInfoNotice( __( 'Distraction free mode turned off.' ), {
-					type: 'snackbar',
-				} );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-		},
-		icon: styles,
-	} );
-
-	useCommand( {
-		name: 'core/edit-site/toggle-styles-welcome-guide',
-		label: __( 'Learn about styles' ),
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-			set( 'core/edit-site', 'welcomeGuideStyles', true );
-			// sometimes there's a focus loss that happens after some time
-			// that closes the modal, we need to force reopening it.
-			setTimeout( () => {
-				set( 'core/edit-site', 'welcomeGuideStyles', true );
-			}, 500 );
-		},
-		icon: help,
-	} );
-
 	useCommand( {
 		name: 'core/edit-site/view-site',
 		label: __( 'View site' ),
@@ -254,6 +325,16 @@ export function useCommonCommands() {
 		icon: external,
 	} );
 
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles',
+		hook: useGlobalStylesOpenStylesCommands,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/toggle-styles-welcome-guide',
+		hook: useGlobalStylesToggleWelcomeGuideCommands,
+	} );
+
 	useCommandLoader( {
 		name: 'core/edit-site/reset-global-styles',
 		hook: useGlobalStylesResetCommands,