@wordpress/edit-site 5.13.0 → 5.15.0

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

@@ -2,10 +2,23 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { trash, backup, layout, page } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	trash,
+	backup,
+	layout,
+	page,
+	drawerLeft,
+	drawerRight,
+	blockDefault,
+	cog,
+	code,
+	keyboardClose,
+} from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -14,55 +27,69 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
+import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 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'
@@ -84,16 +111,19 @@ function useEditModeCommandLoader() {
 			template.type === 'wp_template'
 				? __( 'Delete template' )
 				: __( 'Delete template part' );
+		const path =
+			template.type === 'wp_template'
+				? '/wp_template'
+				: '/wp_template_part/all';
 		commands.push( {
 			name: 'core/remove-template',
 			label,
 			icon: trash,
-			context: 'site-editor-edit',
 			callback: ( { close } ) => {
 				removeTemplate( template );
 				// Navigate to the template list
 				history.push( {
-					path: '/' + template.type,
+					path,
 				} );
 				close();
 			},
@@ -106,10 +136,124 @@ function useEditModeCommandLoader() {
 	};
 }
 
+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 { openModal } = useDispatch( interfaceStore );
+	const { toggle } = useDispatch( preferencesStore );
+
+	if ( canvasMode !== 'edit' ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const commands = [];
+
+	commands.push( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-site/template' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-site/template' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-site/block-inspector' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-site/block-inspector' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-spotlight-mode',
+		label: __( 'Toggle spotlight mode' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'focusMode' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'fixedToolbar' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-code-editor',
+		label: __( 'Toggle code editor' ),
+		icon: code,
+		callback: ( { close } ) => {
+			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-preferences',
+		label: __( 'Open editor preferences' ),
+		icon: cog,
+		callback: () => {
+			openModal( PREFERENCES_MODAL_NAME );
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-shortcut-help',
+		label: __( 'Open keyboard shortcuts' ),
+		icon: keyboardClose,
+		callback: () => {
+			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+		},
+	} );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
 export function useEditModeCommands() {
 	useCommandLoader( {
-		name: 'core/edit-site/manipulate-document',
-		hook: useEditModeCommandLoader,
+		name: 'core/edit-site/page-content-focus',
+		hook: usePageContentFocusCommands,
 		context: 'site-editor-edit',
 	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/manipulate-document',
+		hook: useManipulateDocumentCommands,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/edit-ui',
+		hook: useEditUICommands,
+	} );
 }

package/src/hooks/push-changes-to-global-styles/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get, set } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	getBlockType,
+	hasBlockSupport,
 } from '@wordpress/blocks';
 import { useContext, useMemo, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -93,6 +89,16 @@ const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
+const SUPPORTED_STYLES = [ 'border', 'color', 'spacing', 'typography' ];
+
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 function useChangesToPush( name, attributes ) {
 	const supports = useSupportedStyles( name );
 
@@ -112,13 +118,53 @@ function useChangesToPush( name, attributes ) {
 					];
 				const value = presetAttributeValue
 					? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
-					: get( attributes.style, path );
+					: getValueFromObjectPath( attributes.style, path );
 				return value ? [ { path, value } ] : [];
 			} ),
 		[ supports, name, attributes ]
 	);
 }
 
+/**
+ * Sets the value at path of object.
+ * If a portion of path doesn’t exist, it’s created.
+ * Arrays are created for missing index properties while objects are created
+ * for all other missing properties.
+ *
+ * This function intentionally mutates the input object.
+ *
+ * Inspired by _.set().
+ *
+ * @see https://lodash.com/docs/4.17.15#set
+ *
+ * @todo Needs to be deduplicated with its copy in `@wordpress/core-data`.
+ *
+ * @param {Object} object Object to modify
+ * @param {Array}  path   Path of the property to set.
+ * @param {*}      value  Value to set.
+ */
+function setNestedValue( object, path, value ) {
+	if ( ! object || typeof object !== 'object' ) {
+		return object;
+	}
+
+	path.reduce( ( acc, key, idx ) => {
+		if ( acc[ key ] === undefined ) {
+			if ( Number.isInteger( path[ idx + 1 ] ) ) {
+				acc[ key ] = [];
+			} else {
+				acc[ key ] = {};
+			}
+		}
+		if ( idx === path.length - 1 ) {
+			acc[ key ] = value;
+		}
+		return acc[ key ];
+	}, object );
+
+	return object;
+}
+
 function cloneDeep( object ) {
 	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
 }
@@ -148,8 +194,12 @@ function PushChangesToGlobalStylesControl( {
 		const newUserConfig = cloneDeep( userConfig );
 
 		for ( const { path, value } of changes ) {
-			set( newBlockStyles, path, undefined );
-			set( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );
+			setNestedValue( newBlockStyles, path, undefined );
+			setNestedValue(
+				newUserConfig,
+				[ 'styles', 'blocks', name, ...path ],
+				value
+			);
 		}
 
 		// @wordpress/core-data doesn't support editing multiple entity types in
@@ -212,10 +262,14 @@ function PushChangesToGlobalStylesControl( {
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const blockEditingMode = useBlockEditingMode();
+		const supportsStyles = SUPPORTED_STYLES.some( ( feature ) =>
+			hasBlockSupport( props.name, feature )
+		);
+
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ blockEditingMode === 'default' && (
+				{ blockEditingMode === 'default' && supportsStyles && (
 					<InspectorAdvancedControls>
 						<PushChangesToGlobalStylesControl { ...props } />
 					</InspectorAdvancedControls>

package/src/index.js

@@ -63,9 +63,12 @@ export function initializeEditor( id, settings ) {
 		editorMode: 'visual',
 		fixedToolbar: false,
 		focusMode: false,
+		distractionFree: false,
 		keepCaretInsideBlock: false,
 		welcomeGuide: true,
 		welcomeGuideStyles: true,
+		welcomeGuidePage: true,
+		welcomeGuideTemplate: true,
 		showListViewByDefault: false,
 		showBlockBreadcrumbs: true,
 	} );
@@ -106,3 +109,4 @@ export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-
 export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
 export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
 export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
+export { store } from './store';

package/src/store/actions.js

@@ -141,11 +141,18 @@ export const removeTemplate =
 				throw lastError;
 			}
 
+			// Depending on how the entity was retrieved it's title might be
+			// an object or simple string.
+			const templateTitle =
+				typeof template.title === 'string'
+					? template.title
+					: template.title?.rendered;
+
 			registry.dispatch( noticesStore ).createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" deleted.' ),
-					decodeEntities( template.title.rendered )
+					decodeEntities( templateTitle )
 				),
 				{ type: 'snackbar', id: 'site-editor-template-deleted-success' }
 			);

package/src/store/private-actions.js

@@ -11,7 +11,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 export const setCanvasMode =
 	( mode ) =>
-	( { registry, dispatch } ) => {
+	( { registry, dispatch, select } ) => {
 		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
 		dispatch( {
 			type: 'SET_CANVAS_MODE',
@@ -26,6 +26,10 @@ export const setCanvasMode =
 		) {
 			dispatch.setIsListViewOpened( true );
 		}
+		// Switch focus away from editing the template when switching to view mode.
+		if ( mode === 'view' && select.isPage() ) {
+			dispatch.setHasPageContentFocus( true );
+		}
 	};
 
 /**

package/src/store/selectors.js

@@ -107,6 +107,10 @@ export const getSettings = createSelector(
 			...state.settings,
 			outlineMode: true,
 			focusMode: !! __unstableGetPreference( state, 'focusMode' ),
+			isDistractionFree: !! __unstableGetPreference(
+				state,
+				'distractionFree'
+			),
 			hasFixedToolbar: !! __unstableGetPreference(
 				state,
 				'fixedToolbar'
@@ -143,6 +147,7 @@ export const getSettings = createSelector(
 		getCanUserCreateMedia( state ),
 		state.settings,
 		__unstableGetPreference( state, 'focusMode' ),
+		__unstableGetPreference( state, 'distractionFree' ),
 		__unstableGetPreference( state, 'fixedToolbar' ),
 		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
 		__unstableGetPreference( state, 'showIconLabels' ),

package/src/store/test/selectors.js

@@ -77,6 +77,7 @@ describe( 'selectors', () => {
 				outlineMode: true,
 				focusMode: false,
 				hasFixedToolbar: false,
+				isDistractionFree: false,
 				keepCaretInsideBlock: false,
 				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
@@ -102,6 +103,7 @@ describe( 'selectors', () => {
 				key: 'value',
 				focusMode: true,
 				hasFixedToolbar: true,
+				isDistractionFree: false,
 				keepCaretInsideBlock: false,
 				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,

package/src/style.scss

@@ -10,7 +10,7 @@
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
 @import "./components/page/style.scss";
-@import "./components/page-library/style.scss";
+@import "./components/page-patterns/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/page-panels/style.scss";
@@ -33,10 +33,11 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-global-styles/style.scss";
-@import "./components/sidebar-navigation-screen-library/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";
+@import "./components/sidebar-navigation-screen-pattern/style.scss";
+@import "./components/sidebar-navigation-screen-patterns/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
@@ -46,27 +47,20 @@
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 
-html #wpadminbar {
+body.js #wpadminbar {
 	display: none;
 }
 
-html #wpbody {
+body.js #wpbody {
 	padding-top: 0;
 }
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
-html.wp-toolbar {
-	background: $white;
-	padding-top: 0;
-}
-
-body.appearance_page_gutenberg-template-parts,
-body.site-editor-php {
+body.js.appearance_page_gutenberg-template-parts,
+body.js.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }
 
-body.site-editor-php {
+body.js.site-editor-php {
 	background: $gray-900;
 }
 
@@ -90,6 +84,11 @@ body.site-editor-php {
 		top: 0;
 	}
 
+	.no-js & {
+		min-height: 0;
+		position: static;
+	}
+
 	.interface-interface-skeleton {
 		top: 0;
 	}

package/src/utils/get-is-list-page.js

@@ -15,9 +15,10 @@ export default function getIsListPage(
 ) {
 	return (
 		path === '/wp_template/all' ||
-		( path === '/library' &&
-			// Don't treat "/library" without categoryType and categoryId as a list page
-			// in mobile because the sidebar covers the whole page.
+		path === '/wp_template_part/all' ||
+		( path === '/patterns' &&
+			// Don't treat "/patterns" without categoryType and categoryId as a
+			// list page in mobile because the sidebar covers the whole page.
 			( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) )
 	);
 }

package/src/utils/normalize-record-key.js

@@ -0,0 +1,11 @@
+function isNumericID( str ) {
+	return /^\s*\d+\s*$/.test( str );
+}
+
+export default function normalizeRecordKey( postId ) {
+	if ( isNumericID( postId ) ) {
+		postId = Number( postId );
+	}
+
+	return postId;
+}

package/src/utils/template-part-create.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies

package/src/utils/use-activate-theme.js

@@ -29,7 +29,7 @@ export function useActivateTheme() {
 				'themes.php?action=activate&stylesheet=' +
 				currentlyPreviewingTheme() +
 				'&_wpnonce=' +
-				window.BLOCK_THEME_ACTIVATE_NONCE;
+				window.WP_BLOCK_THEME_ACTIVATE_NONCE;
 			await window.fetch( activationURL );
 			const { wp_theme_preview: themePreview, ...params } =
 				location.params;