Only show Page Content Focus commands when in edit mode (#51888)

WordPress · Jun 26, 2023 · a75a633 · a75a633
1 parent aafef4f
commit a75a633
Showing 1 changed file with 53 additions and 38 deletions.
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
@@ -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,
 	} );
 }