diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index a787183a0a6100..f516bcec310632 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/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', + } ); }