diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 7d6dcdbd05440..63e20b9c22c14 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -30,51 +30,63 @@ import { unlock } from '../../lock-unlock'; const { useHistory } = unlock( routerPrivateApis ); -function useEditModeCommandLoader() { - const { isLoaded, record: template } = useEditedEntityRecord(); - const { removeTemplate, revertTemplate, setHasPageContentFocus } = - useDispatch( editSiteStore ); - const history = useHistory(); - const { isPage, hasPageContentFocus } = useSelect( +function usePageContentFocusCommands() { + const { isPage, canvasMode, hasPageContentFocus } = useSelect( ( select ) => ( { isPage: select( editSiteStore ).isPage(), + canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(), } ), [] ); + const { setHasPageContentFocus } = useDispatch( editSiteStore ); - if ( ! isLoaded ) { - return { isLoading: true, commands: [] }; + if ( ! isPage || canvasMode !== 'edit' ) { + return { isLoading: false, commands: [] }; } const commands = []; - if ( isPage ) { - if ( hasPageContentFocus ) { - commands.push( { - name: 'core/switch-to-template-focus', - label: __( 'Edit template' ), - icon: layout, - context: 'site-editor-edit', - callback: ( { close } ) => { - setHasPageContentFocus( false ); - close(); - }, - } ); - } else { - commands.push( { - name: 'core/switch-to-page-focus', - label: __( 'Back to page' ), - icon: page, - context: 'site-editor-edit', - callback: ( { close } ) => { - setHasPageContentFocus( true ); - close(); - }, - } ); - } + if ( hasPageContentFocus ) { + commands.push( { + name: 'core/switch-to-template-focus', + label: __( 'Edit template' ), + icon: layout, + callback: ( { close } ) => { + setHasPageContentFocus( false ); + close(); + }, + } ); + } else { + commands.push( { + name: 'core/switch-to-page-focus', + label: __( 'Back to page' ), + icon: page, + callback: ( { close } ) => { + setHasPageContentFocus( true ); + close(); + }, + } ); + } + + return { isLoading: false, commands }; +} + +function useManipulateDocumentCommands() { + const { isLoaded, record: template } = useEditedEntityRecord(); + const { removeTemplate, revertTemplate } = useDispatch( editSiteStore ); + const history = useHistory(); + const hasPageContentFocus = useSelect( + ( select ) => select( editSiteStore ).hasPageContentFocus(), + [] + ); + + if ( ! isLoaded ) { + return { isLoading: true, commands: [] }; } + const commands = []; + if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) { const label = template.type === 'wp_template' @@ -100,7 +112,6 @@ function useEditModeCommandLoader() { name: 'core/remove-template', label, icon: trash, - context: 'site-editor-edit', callback: ( { close } ) => { removeTemplate( template ); // Navigate to the template list @@ -118,13 +129,11 @@ function useEditModeCommandLoader() { }; } -function useEditUICommandLoader() { +function useEditUICommands() { const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } = useDispatch( editSiteStore ); const { canvasMode, editorMode, activeSidebar } = useSelect( ( select ) => ( { - isPage: select( editSiteStore ).isPage(), - hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(), canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), editorMode: select( editSiteStore ).getEditorMode(), activeSidebar: select( interfaceStore ).getActiveComplementaryArea( @@ -206,14 +215,20 @@ function useEditUICommandLoader() { } export function useEditModeCommands() { + useCommandLoader( { + name: 'core/edit-site/page-content-focus', + hook: usePageContentFocusCommands, + context: 'site-editor-edit', + } ); + useCommandLoader( { name: 'core/edit-site/manipulate-document', - hook: useEditModeCommandLoader, + hook: useManipulateDocumentCommands, context: 'site-editor-edit', } ); useCommandLoader( { name: 'core/edit-site/edit-ui', - hook: useEditUICommandLoader, + hook: useEditUICommands, } ); }