Add commands to access template, template parts and styles

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

@@ -6,7 +6,14 @@ import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { post, page, layout, symbolFilled } from '@wordpress/icons';
+import {
+	post,
+	page,
+	layout,
+	symbolFilled,
+	styles,
+	navigation,
+} from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
 
@@ -55,9 +62,6 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 						'getEntityRecords',
 						[ 'postType', postType, query ]
 					),
-					// We're using the string literal to check whether we're in the site editor.
-					/* eslint-disable-next-line @wordpress/data-no-store-string-literals */
-					isSiteEditor: !! select( 'edit-site' ),
 				};
 			},
 			[ supportsSearch, search ]
@@ -114,6 +118,111 @@ const useTemplateNavigationCommandLoader =
 const useTemplatePartNavigationCommandLoader =
 	getNavigationCommandLoaderPerPostType( 'wp_template_part' );
 
+function useSiteEditorBasicNavigationCommands() {
+	const history = useHistory();
+	const isSiteEditor = getPath( window.location.href )?.includes(
+		'site-editor.php'
+	);
+	const commands = useMemo( () => {
+		const result = [];
+		result.push( {
+			name: 'core/edit-site/open-navigation',
+			label: __( 'Open navigation' ),
+			icon: navigation,
+			callback: ( { close } ) => {
+				const args = {
+					path: '/navigation',
+				};
+				const targetUrl = addQueryArgs( 'site-editor.php', args );
+				if ( isSiteEditor ) {
+					history.push( args );
+				} else {
+					document.location = targetUrl;
+				}
+				close();
+			},
+		} );
+
+		result.push( {
+			name: 'core/edit-site/open-pages',
+			label: __( 'Open pages' ),
+			icon: page,
+			callback: ( { close } ) => {
+				const args = {
+					path: '/page',
+				};
+				const targetUrl = addQueryArgs( 'site-editor.php', args );
+				if ( isSiteEditor ) {
+					history.push( args );
+				} else {
+					document.location = targetUrl;
+				}
+				close();
+			},
+		} );
+
+		result.push( {
+			name: 'core/edit-site/open-styles',
+			label: __( 'Open style variations' ),
+			icon: styles,
+			callback: ( { close } ) => {
+				const args = {
+					path: '/wp_global_styles',
+				};
+				const targetUrl = addQueryArgs( 'site-editor.php', args );
+				if ( isSiteEditor ) {
+					history.push( args );
+				} else {
+					document.location = targetUrl;
+				}
+				close();
+			},
+		} );
+
+		result.push( {
+			name: 'core/edit-site/open-templates',
+			label: __( 'Open templates' ),
+			icon: layout,
+			callback: ( { close } ) => {
+				const args = {
+					path: '/wp_template',
+				};
+				const targetUrl = addQueryArgs( 'site-editor.php', args );
+				if ( isSiteEditor ) {
+					history.push( args );
+				} else {
+					document.location = targetUrl;
+				}
+				close();
+			},
+		} );
+
+		result.push( {
+			name: 'core/edit-site/open-template-parts',
+			label: __( 'Open library' ),
+			icon: symbolFilled,
+			callback: ( { close } ) => {
+				const args = {
+					path: '/wp_template_part',
+				};
+				const targetUrl = addQueryArgs( 'site-editor.php', args );
+				if ( isSiteEditor ) {
+					history.push( args );
+				} else {
+					document.location = targetUrl;
+				}
+				close();
+			},
+		} );
+		return result;
+	}, [ history, isSiteEditor ] );
+
+	return {
+		commands,
+		isLoading: false,
+	};
+}
+
 export function useSiteEditorNavigationCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/navigate-pages',
@@ -131,4 +240,9 @@ export function useSiteEditorNavigationCommands() {
 		name: 'core/edit-site/navigate-template-parts',
 		hook: useTemplatePartNavigationCommandLoader,
 	} );
+	useCommandLoader( {
+		name: 'core/edit-site/basic-navigation',
+		hook: useSiteEditorBasicNavigationCommands,
+		context: 'site-editor',
+	} );
 }