[Core Commands]: Handle navigation commands based on access of site e…

…ditor (#52987)

* [Core Commands]: Pass options to `useCommands`

* add block editor dep

packages/core-commands/package.json

@@ -27,6 +27,7 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/commands": "file:../commands",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",

packages/core-commands/src/admin-navigation-commands.js

@@ -4,34 +4,20 @@
 import { useCommand } from '@wordpress/commands';
 import { __ } from '@wordpress/i18n';
 import { external, plus, symbol } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { addQueryArgs, getPath } from '@wordpress/url';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
+import { useIsSiteEditorAccessible } from './hooks';
 import { unlock } from './lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 export function useAdminNavigationCommands() {
 	const history = useHistory();
-
-	const { isBlockTheme, canAccessSiteEditor } = useSelect( ( select ) => {
-		return {
-			isBlockTheme:
-				// To avoid making core-commands dependent on block-editor using store string literal name.
-				// eslint-disable-next-line @wordpress/data-no-store-string-literals
-				select( 'core/block-editor' )?.getSettings()
-					.__unstableIsBlockBasedTheme,
-			canAccessSiteEditor: select( coreStore ).canUser(
-				'read',
-				'templates'
-			),
-		};
-	}, [] );
+	const isSiteEditorAccessible = useIsSiteEditorAccessible();
 
 	const isSiteEditor = getPath( window.location.href )?.includes(
 		'site-editor.php'
@@ -57,20 +43,16 @@ export function useAdminNavigationCommands() {
 		name: 'core/manage-reusable-blocks',
 		label: __( 'Open patterns' ),
 		callback: ( { close } ) => {
-			if (
-				( ! isSiteEditor && ! isBlockTheme ) ||
-				! canAccessSiteEditor
-			) {
+			if ( ! isSiteEditorAccessible ) {
 				document.location.href = 'edit.php?post_type=wp_block';
 			} else {
 				const args = {
 					path: '/patterns',
 				};
-				const targetUrl = addQueryArgs( 'site-editor.php', args );
 				if ( isSiteEditor ) {
 					history.push( args );
 				} else {
-					document.location = targetUrl;
+					document.location = addQueryArgs( 'site-editor.php', args );
 				}
 				close();
 			}

packages/core-commands/src/hooks.js

@@ -0,0 +1,16 @@
+/**
+ * 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() {
+	return useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__unstableIsBlockBasedTheme &&
+			select( coreStore ).canUser( 'read', 'templates' ),
+		[]
+	);
+}

packages/core-commands/src/site-editor-navigation-commands.js

@@ -20,6 +20,7 @@ import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import { useIsSiteEditorAccessible } from './hooks';
 import { unlock } from './lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -123,8 +124,13 @@ function useSiteEditorBasicNavigationCommands() {
 	const isSiteEditor = getPath( window.location.href )?.includes(
 		'site-editor.php'
 	);
+	const isSiteEditorAccessible = useIsSiteEditorAccessible();
 	const commands = useMemo( () => {
 		const result = [];
+
+		if ( ! isSiteEditorAccessible ) {
+			return result;
+		}
 		result.push( {
 			name: 'core/edit-site/open-navigation',
 			label: __( 'Open navigation' ),
@@ -198,7 +204,7 @@ function useSiteEditorBasicNavigationCommands() {
 		} );
 
 		return result;
-	}, [ history, isSiteEditor ] );
+	}, [ history, isSiteEditor, isSiteEditorAccessible ] );
 
 	return {
 		commands,