@wordpress/edit-site 5.15.0 → 5.17.0

package/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';
@@ -23,6 +23,143 @@ import getIsListPage from '../../utils/get-is-list-page';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
+function useGlobalStylesOpenStylesCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
+	const { set } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	const history = useHistory();
+	const isDistractionFree = useSelect( ( select ) => {
+		return select( preferencesStore ).get(
+			editSiteStore.name,
+			'distractionFree'
+		);
+	}, [] );
+
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! isBlockBasedTheme ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-styles',
+				label: __( 'Open styles' ),
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					if ( isDistractionFree ) {
+						set( editSiteStore.name, 'distractionFree', false );
+						createInfoNotice(
+							__( 'Distraction free mode turned off.' ),
+							{
+								type: 'snackbar',
+							}
+						);
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+				},
+				icon: styles,
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setCanvasMode,
+		isEditorPage,
+		createInfoNotice,
+		getCanvasMode,
+		isDistractionFree,
+		isBlockBasedTheme,
+		set,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+function useGlobalStylesToggleWelcomeGuideCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
+	const { set } = useDispatch( preferencesStore );
+
+	const history = useHistory();
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! isBlockBasedTheme ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/toggle-styles-welcome-guide',
+				label: __( 'Learn about styles' ),
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+					set( 'core/edit-site', 'welcomeGuideStyles', true );
+					// sometimes there's a focus loss that happens after some time
+					// that closes the modal, we need to force reopening it.
+					setTimeout( () => {
+						set( 'core/edit-site', 'welcomeGuideStyles', true );
+					}, 500 );
+				},
+				icon: help,
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setCanvasMode,
+		isEditorPage,
+		getCanvasMode,
+		isBlockBasedTheme,
+		set,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
 function useGlobalStylesResetCommands() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const commands = useMemo( () => {
@@ -81,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 ) {
@@ -114,109 +251,88 @@ function useGlobalStylesOpenCssCommands() {
 	};
 }
 
-export function useCommonCommands() {
+function useGlobalStylesOpenRevisionsCommands() {
 	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
 		unlock( useDispatch( editSiteStore ) );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params, isMobileViewport );
-	const isEditorPage = ! isListPage;
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
-	const { set } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const history = useHistory();
-	const { homeUrl, isDistractionFree } = useSelect( ( select ) => {
+	const hasRevisions = useSelect(
+		( select ) =>
+			select( coreStore ).getCurrentThemeGlobalStylesRevisions()?.length,
+		[]
+	);
+	const commands = useMemo( () => {
+		if ( ! hasRevisions ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-global-styles-revisions',
+				label: __( 'Style revisions' ),
+				icon: backup,
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+					setEditorCanvasContainerView( 'global-styles-revisions' );
+				},
+			},
+		];
+	}, [
+		hasRevisions,
+		history,
+		openGeneralSidebar,
+		setEditorCanvasContainerView,
+		isEditorPage,
+		getCanvasMode,
+		setCanvasMode,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+export function useCommonCommands() {
+	const homeUrl = useSelect( ( select ) => {
 		const {
 			getUnstableBase, // Site index.
 		} = select( coreStore );
 
-		return {
-			homeUrl: getUnstableBase()?.home,
-			isDistractionFree: select( preferencesStore ).get(
-				editSiteStore.name,
-				'distractionFree'
-			),
-		};
+		return getUnstableBase()?.home;
 	}, [] );
 
 	useCommand( {
-		name: 'core/edit-site/open-global-styles-revisions',
-		label: __( 'Open styles revisions' ),
-		icon: backup,
+		name: 'core/edit-site/view-site',
+		label: __( 'View site' ),
 		callback: ( { close } ) => {
 			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-			setEditorCanvasContainerView( 'global-styles-revisions' );
+			window.open( homeUrl, '_blank' );
 		},
+		icon: external,
 	} );
 
-	useCommand( {
+	useCommandLoader( {
 		name: 'core/edit-site/open-styles',
-		label: __( 'Open styles' ),
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			if ( isDistractionFree ) {
-				set( editSiteStore.name, 'distractionFree', false );
-				createInfoNotice( __( 'Distraction free mode turned off.' ), {
-					type: 'snackbar',
-				} );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-		},
-		icon: styles,
+		hook: useGlobalStylesOpenStylesCommands,
 	} );
 
-	useCommand( {
+	useCommandLoader( {
 		name: 'core/edit-site/toggle-styles-welcome-guide',
-		label: __( 'Learn about styles' ),
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-			set( 'core/edit-site', 'welcomeGuideStyles', true );
-			// sometimes there's a focus loss that happens after some time
-			// that closes the modal, we need to force reopening it.
-			setTimeout( () => {
-				set( 'core/edit-site', 'welcomeGuideStyles', true );
-			}, 500 );
-		},
-		icon: help,
-	} );
-
-	useCommand( {
-		name: 'core/edit-site/view-site',
-		label: __( 'View site' ),
-		callback: ( { close } ) => {
-			close();
-			window.open( homeUrl, '_blank' );
-		},
-		icon: external,
+		hook: useGlobalStylesToggleWelcomeGuideCommands,
 	} );
 
 	useCommandLoader( {
@@ -228,4 +344,9 @@ export function useCommonCommands() {
 		name: 'core/edit-site/open-styles-css',
 		hook: useGlobalStylesOpenCssCommands,
 	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles-revisions',
+		hook: useGlobalStylesOpenRevisionsCommands,
+	} );
 }

package/src/hooks/commands/use-edit-mode-commands.js

@@ -2,23 +2,25 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	trash,
-	backup,
+	rotateLeft,
+	rotateRight,
 	layout,
 	page,
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	cog,
 	code,
-	keyboardClose,
+	keyboard,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
+import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -34,6 +36,7 @@ import { unlock } from '../../lock-unlock';
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
+	const { record: template } = useEditedEntityRecord();
 	const { isPage, canvasMode, hasPageContentFocus } = useSelect(
 		( select ) => ( {
 			isPage: select( editSiteStore ).isPage(),
@@ -53,7 +56,11 @@ function usePageContentFocusCommands() {
 	if ( hasPageContentFocus ) {
 		commands.push( {
 			name: 'core/switch-to-template-focus',
-			label: __( 'Edit template' ),
+			/* translators: %1$s: template title */
+			label: sprintf(
+				'Edit template: %s',
+				decodeEntities( template.title )
+			),
 			icon: layout,
 			callback: ( { close } ) => {
 				setHasPageContentFocus( false );
@@ -75,6 +82,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 );
@@ -93,12 +131,20 @@ function useManipulateDocumentCommands() {
 	if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
 		const label =
 			template.type === 'wp_template'
-				? __( 'Reset template' )
-				: __( 'Reset template part' );
+				? /* translators: %1$s: template title */
+				  sprintf(
+						'Reset template: %s',
+						decodeEntities( template.title )
+				  )
+				: /* translators: %1$s: template part title */
+				  sprintf(
+						'Reset template part: %s',
+						decodeEntities( template.title )
+				  );
 		commands.push( {
 			name: 'core/reset-template',
 			label,
-			icon: backup,
+			icon: isRTL() ? rotateRight : rotateLeft,
 			callback: ( { close } ) => {
 				revertTemplate( template );
 				close();
@@ -109,8 +155,16 @@ function useManipulateDocumentCommands() {
 	if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) {
 		const label =
 			template.type === 'wp_template'
-				? __( 'Delete template' )
-				: __( 'Delete template part' );
+				? /* translators: %1$s: template title */
+				  sprintf(
+						'Delete template: %s',
+						decodeEntities( template.title )
+				  )
+				: /* translators: %1$s: template part title */
+				  sprintf(
+						'Delete template part: %s',
+						decodeEntities( template.title )
+				  );
 		const path =
 			template.type === 'wp_template'
 				? '/wp_template'
@@ -137,20 +191,32 @@ function useManipulateDocumentCommands() {
 }
 
 function useEditUICommands() {
-	const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
-		useDispatch( editSiteStore );
-	const { canvasMode, editorMode, activeSidebar } = useSelect(
-		( select ) => ( {
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			editorMode: select( editSiteStore ).getEditorMode(),
-			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			),
-		} ),
-		[]
-	);
+	const {
+		openGeneralSidebar,
+		closeGeneralSidebar,
+		setIsInserterOpened,
+		setIsListViewOpened,
+		switchEditorMode,
+	} = useDispatch( editSiteStore );
+	const { canvasMode, editorMode, activeSidebar, showBlockBreadcrumbs } =
+		useSelect(
+			( select ) => ( {
+				canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+				editorMode: select( editSiteStore ).getEditorMode(),
+				activeSidebar: select(
+					interfaceStore
+				).getActiveComplementaryArea( editSiteStore.name ),
+				showBlockBreadcrumbs: select( preferencesStore ).get(
+					'core/edit-site',
+					'showBlockBreadcrumbs'
+				),
+			} ),
+			[]
+		);
 	const { openModal } = useDispatch( interfaceStore );
-	const { toggle } = useDispatch( preferencesStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { set: setPreference, toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
 
 	if ( canvasMode !== 'edit' ) {
 		return { isLoading: false, commands: [] };
@@ -189,7 +255,6 @@ function useEditUICommands() {
 	commands.push( {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight mode' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-site', 'focusMode' );
 			close();
@@ -197,29 +262,51 @@ function useEditUICommands() {
 	} );
 
 	commands.push( {
-		name: 'core/toggle-top-toolbar',
-		label: __( 'Toggle top toolbar' ),
-		icon: cog,
+		name: 'core/toggle-distraction-free',
+		label: __( 'Toggle distraction free' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-site', 'fixedToolbar' );
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+			toggle( 'core/edit-site', 'distractionFree' );
+			createInfoNotice(
+				getPreference( 'core/edit-site', 'distractionFree' )
+					? __( 'Distraction free on.' )
+					: __( 'Distraction free off.' ),
+				{
+					id: 'core/edit-site/distraction-free-mode/notice',
+					type: 'snackbar',
+				}
+			);
 			close();
 		},
 	} );
 
 	commands.push( {
-		name: 'core/toggle-code-editor',
-		label: __( 'Toggle code editor' ),
-		icon: code,
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
 		callback: ( { close } ) => {
-			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			toggle( 'core/edit-site', 'fixedToolbar' );
 			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' ),
-		icon: cog,
+		label: __( 'Editor preferences' ),
 		callback: () => {
 			openModal( PREFERENCES_MODAL_NAME );
 		},
@@ -227,13 +314,33 @@ function useEditUICommands() {
 
 	commands.push( {
 		name: 'core/open-shortcut-help',
-		label: __( 'Open keyboard shortcuts' ),
-		icon: keyboardClose,
+		label: __( 'Keyboard shortcuts' ),
+		icon: keyboard,
 		callback: () => {
 			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
 		},
 	} );
 
+	commands.push( {
+		name: 'core/toggle-breadcrumbs',
+		label: showBlockBreadcrumbs
+			? __( 'Hide block breadcrumbs' )
+			: __( 'Show block breadcrumbs' ),
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'showBlockBreadcrumbs' );
+			close();
+			createInfoNotice(
+				showBlockBreadcrumbs
+					? __( 'Breadcrumbs hidden.' )
+					: __( 'Breadcrumbs visible.' ),
+				{
+					id: 'core/edit-site/toggle-breadcrumbs/notice',
+					type: 'snackbar',
+				}
+			);
+		},
+	} );
+
 	return {
 		isLoading: false,
 		commands,
@@ -241,6 +348,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,

package/src/hooks/navigation-menu-edit.js

@@ -3,10 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import {
-	BlockControls,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { BlockControls, useBlockEditingMode } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { ToolbarButton } from '@wordpress/components';
 import { addFilter } from '@wordpress/hooks';
@@ -20,7 +17,6 @@ import { useLink } from '../components/routes/link';
 import { unlock } from '../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
-const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 function NavigationMenuEdit( { attributes } ) {
 	const { ref } = attributes;