Tweak, and add, more consistent commands (#53496)

* Simple main site editor menu item commands * Simplify css and style revisions commands * Add context for exiting code editor * Simpler, consistent common commands * Update packages/edit-site/src/hooks/commands/use-edit-mode-commands.js Co-authored-by: Riad Benguella <[email protected]> --------- Co-authored-by: Riad Benguella <[email protected]>
WordPress · Aug 14, 2023 · 59a346d · 59a346d
1 parent b81557b
commit 59a346d
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 33 deletions.
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -10,6 +10,7 @@ import {
 	post,
 	page,
 	layout,
+	symbol,
 	symbolFilled,
 	styles,
 	navigation,
@@ -135,7 +136,7 @@ function useSiteEditorBasicNavigationCommands() {
 
 		result.push( {
 			name: 'core/edit-site/open-navigation',
-			label: __( 'Open navigation' ),
+			label: __( 'Navigation' ),
 			icon: navigation,
 			callback: ( { close } ) => {
 				const args = {
@@ -152,12 +153,12 @@ function useSiteEditorBasicNavigationCommands() {
 		} );
 
 		result.push( {
-			name: 'core/edit-site/open-pages',
-			label: __( 'Open pages' ),
-			icon: page,
+			name: 'core/edit-site/open-styles',
+			label: __( 'Styles' ),
+			icon: styles,
 			callback: ( { close } ) => {
 				const args = {
-					path: '/page',
+					path: '/wp_global_styles',
 				};
 				const targetUrl = addQueryArgs( 'site-editor.php', args );
 				if ( isSiteEditor ) {
@@ -170,12 +171,12 @@ function useSiteEditorBasicNavigationCommands() {
 		} );
 
 		result.push( {
-			name: 'core/edit-site/open-style-variations',
-			label: __( 'Open style variations' ),
-			icon: styles,
+			name: 'core/edit-site/open-pages',
+			label: __( 'Pages' ),
+			icon: page,
 			callback: ( { close } ) => {
 				const args = {
-					path: '/wp_global_styles',
+					path: '/page',
 				};
 				const targetUrl = addQueryArgs( 'site-editor.php', args );
 				if ( isSiteEditor ) {
@@ -189,7 +190,7 @@ function useSiteEditorBasicNavigationCommands() {
 
 		result.push( {
 			name: 'core/edit-site/open-templates',
-			label: __( 'Open templates' ),
+			label: __( 'Templates' ),
 			icon: layout,
 			callback: ( { close } ) => {
 				const args = {
@@ -205,6 +206,24 @@ function useSiteEditorBasicNavigationCommands() {
 			},
 		} );
 
+		result.push( {
+			name: 'core/edit-site/open-patterns',
+			label: __( 'Patterns' ),
+			icon: symbol,
+			callback: ( { close } ) => {
+				const args = {
+					path: '/patterns',
+				};
+				const targetUrl = addQueryArgs( 'site-editor.php', args );
+				if ( isSiteEditor ) {
+					history.push( args );
+				} else {
+					document.location = targetUrl;
+				}
+				close();
+			},
+		} );
+
 		return result;
 	}, [ history, isSiteEditor, isTemplatesAccessible, isBlockBasedTheme ] );
 

diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -227,8 +227,8 @@ function KeyboardShortcuts() {
 		toggleFeature( 'distractionFree' );
 		createInfoNotice(
 			isFeatureActive( 'distractionFree' )
-				? __( 'Distraction free mode turned on.' )
-				: __( 'Distraction free mode turned off.' ),
+				? __( 'Distraction free on.' )
+				: __( 'Distraction free off.' ),
 			{
 				id: 'core/edit-post/distraction-free-mode/notice',
 				type: 'snackbar',

diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js
@@ -151,7 +151,7 @@ export default function useCommonCommands() {
 
 	useCommand( {
 		name: 'core/open-preferences',
-		label: __( 'Open editor preferences' ),
+		label: __( 'Editor preferences' ),
 		icon: cog,
 		callback: () => {
 			openModal( PREFERENCES_MODAL_NAME );
@@ -160,7 +160,7 @@ export default function useCommonCommands() {
 
 	useCommand( {
 		name: 'core/open-shortcut-help',
-		label: __( 'Open keyboard shortcuts' ),
+		label: __( 'Keyboard shortcuts' ),
 		icon: keyboard,
 		callback: () => {
 			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
@@ -178,8 +178,8 @@ export default function useCommonCommands() {
 			close();
 			createInfoNotice(
 				showBlockBreadcrumbs
-					? __( 'Breadcrumbs off.' )
-					: __( 'Breadcrumbs on.' ),
+					? __( 'Breadcrumbs hidden.' )
+					: __( 'Breadcrumbs visible.' ),
 				{
 					id: 'core/edit-post/toggle-breadcrumbs/notice',
 					type: 'snackbar',

diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -4,7 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { trash, backup, help, styles, external } from '@wordpress/icons';
+import { trash, backup, help, styles, external, brush } from '@wordpress/icons';
 import { useCommandLoader, useCommand } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -218,8 +218,8 @@ function useGlobalStylesOpenCssCommands() {
 		return [
 			{
 				name: 'core/edit-site/open-styles-css',
-				label: __( 'Open CSS' ),
-				icon: styles,
+				label: __( 'Customize CSS' ),
+				icon: brush,
 				callback: ( { close } ) => {
 					close();
 					if ( ! isEditorPage ) {
@@ -272,7 +272,7 @@ function useGlobalStylesOpenRevisionsCommands() {
 		return [
 			{
 				name: 'core/edit-site/open-global-styles-revisions',
-				label: __( 'Open styles revisions' ),
+				label: __( 'Style revisions' ),
 				icon: backup,
 				callback: ( { close } ) => {
 					close();

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
@@ -83,6 +83,37 @@ function usePageContentFocusCommands() {
 	return { isLoading: false, commands };
 }
 
+function useEditorModeCommands() {
+	const { switchEditorMode } = useDispatch( editSiteStore );
+	const { canvasMode, editorMode } = useSelect(
+		( select ) => ( {
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+			editorMode: select( editSiteStore ).getEditorMode(),
+		} ),
+		[]
+	);
+
+	if ( canvasMode !== 'edit' || editorMode !== 'text' ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const commands = [];
+
+	if ( editorMode === 'text' ) {
+		commands.push( {
+			name: 'core/exit-code-editor',
+			label: __( 'Exit code editor' ),
+			icon: code,
+			callback: ( { close } ) => {
+				switchEditorMode( 'visual' );
+				close();
+			},
+		} );
+	}
+
+	return { isLoading: false, commands };
+}
+
 function useManipulateDocumentCommands() {
 	const { isLoaded, record: template } = useEditedEntityRecord();
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
@@ -244,8 +275,8 @@ function useEditUICommands() {
 			toggle( 'core/edit-site', 'distractionFree' );
 			createInfoNotice(
 				getPreference( 'core/edit-site', 'distractionFree' )
-					? __( 'Distraction free mode turned on.' )
-					: __( 'Distraction free mode turned off.' ),
+					? __( 'Distraction free on.' )
+					: __( 'Distraction free off.' ),
 				{
 					id: 'core/edit-site/distraction-free-mode/notice',
 					type: 'snackbar',
@@ -265,19 +296,21 @@ function useEditUICommands() {
 		},
 	} );
 
-	commands.push( {
-		name: 'core/toggle-code-editor',
-		label: __( 'Toggle code editor' ),
-		icon: code,
-		callback: ( { close } ) => {
-			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
-			close();
-		},
-	} );
+	if ( editorMode === 'visual' ) {
+		commands.push( {
+			name: 'core/toggle-code-editor',
+			label: __( 'Open code editor' ),
+			icon: code,
+			callback: ( { close } ) => {
+				switchEditorMode( 'text' );
+				close();
+			},
+		} );
+	}
 
 	commands.push( {
 		name: 'core/open-preferences',
-		label: __( 'Open editor preferences' ),
+		label: __( 'Editor preferences' ),
 		icon: cog,
 		callback: () => {
 			openModal( PREFERENCES_MODAL_NAME );
@@ -286,7 +319,7 @@ function useEditUICommands() {
 
 	commands.push( {
 		name: 'core/open-shortcut-help',
-		label: __( 'Open keyboard shortcuts' ),
+		label: __( 'Keyboard shortcuts' ),
 		icon: keyboard,
 		callback: () => {
 			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
@@ -302,6 +335,15 @@ function useEditUICommands() {
 		callback: ( { close } ) => {
 			toggle( 'core/edit-site', 'showBlockBreadcrumbs' );
 			close();
+			createInfoNotice(
+				showBlockBreadcrumbs
+					? __( 'Breadcrumbs hidden.' )
+					: __( 'Breadcrumbs visible.' ),
+				{
+					id: 'core/edit-site/toggle-breadcrumbs/notice',
+					type: 'snackbar',
+				}
+			);
 		},
 	} );
 
@@ -312,6 +354,12 @@ function useEditUICommands() {
 }
 
 export function useEditModeCommands() {
+	useCommandLoader( {
+		name: 'core/exit-code-editor',
+		hook: useEditorModeCommands,
+		context: 'site-editor-edit',
+	} );
+
 	useCommandLoader( {
 		name: 'core/edit-site/page-content-focus',
 		hook: usePageContentFocusCommands,