@wordpress/edit-site 4.18.0 → 5.0.0

package/src/components/global-styles/use-global-styles-output.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, pickBy, reduce, set } from 'lodash';
+import { get, isEmpty, kebabCase, pickBy, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,8 +61,7 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Array<Object>} An array of style declarations.
  */
 function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
-	return reduce(
-		PRESET_METADATA,
+	return PRESET_METADATA.reduce(
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
 			const presetByOrigin = get( blockPresets, path, [] );
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
@@ -102,8 +101,7 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
  * @return {string} CSS declarations for the preset classes.
  */
 function getPresetsClasses( blockSelector, blockPresets = {} ) {
-	return reduce(
-		PRESET_METADATA,
+	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
 				return declarations;
@@ -193,9 +191,11 @@ export function getStylesDeclarations(
 	tree = {}
 ) {
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
-	const output = reduce(
-		STYLE_PROPERTY,
-		( declarations, { value, properties, useEngine, rootOnly }, key ) => {
+	const output = Object.entries( STYLE_PROPERTY ).reduce(
+		(
+			declarations,
+			[ key, { value, properties, useEngine, rootOnly } ]
+		) => {
 			if ( rootOnly && ! isRoot ) {
 				return declarations;
 			}
@@ -453,6 +453,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			[
 				'border',
 				'color',
+				'dimensions',
 				'spacing',
 				'typography',
 				'filter',
@@ -845,8 +846,44 @@ export const getBlockSelectors = ( blockTypes ) => {
 	return result;
 };
 
+/**
+ * If there is a separator block whose color is defined in theme.json via background,
+ * update the separator color to the same value by using border color.
+ *
+ * @param {Object} config Theme.json configuration file object.
+ * @return {Object} configTheme.json configuration file object updated.
+ */
+function updateConfigWithSeparator( config ) {
+	const needsSeparatorStyleUpdate =
+		config.styles?.blocks[ 'core/separator' ] &&
+		config.styles?.blocks[ 'core/separator' ].color?.background &&
+		! config.styles?.blocks[ 'core/separator' ].color?.text &&
+		! config.styles?.blocks[ 'core/separator' ].border?.color;
+	if ( needsSeparatorStyleUpdate ) {
+		return {
+			...config,
+			styles: {
+				...config.styles,
+				blocks: {
+					...config.styles.blocks,
+					'core/separator': {
+						...config.styles.blocks[ 'core/separator' ],
+						color: {
+							...config.styles.blocks[ 'core/separator' ].color,
+							text: config.styles?.blocks[ 'core/separator' ]
+								.color.background,
+						},
+					},
+				},
+			},
+		};
+	}
+	return config;
+}
+
 export function useGlobalStylesOutput() {
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	let { merged: mergedConfig } = useContext( GlobalStylesContext );
+
 	const [ blockGap ] = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
@@ -859,7 +896,7 @@ export function useGlobalStylesOutput() {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
 			return [];
 		}
-
+		mergedConfig = updateConfigWithSeparator( mergedConfig );
 		const blockSelectors = getBlockSelectors( getBlockTypes() );
 		const customProperties = toCustomProperties(
 			mergedConfig,
@@ -882,6 +919,11 @@ export function useGlobalStylesOutput() {
 				css: globalStyles,
 				isGlobalStyles: true,
 			},
+			// Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
+			{
+				css: mergedConfig.styles.css ?? '',
+				isGlobalStyles: true,
+			},
 		];
 
 		return [ stylesheets, mergedConfig.settings, filters ];

package/src/components/global-styles/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, find } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -120,8 +120,7 @@ function findInPresetsBy(
 			for ( const origin of origins ) {
 				const presets = presetByOrigin[ origin ];
 				if ( presets ) {
-					const presetObject = find(
-						presets,
+					const presetObject = presets.find(
 						( preset ) =>
 							preset[ presetProperty ] === presetValueValue
 					);
@@ -164,7 +163,9 @@ export function getPresetVariableFromValue(
 
 	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
 
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', cssVarInfix ] );
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === cssVarInfix
+	);
 
 	if ( ! metadata ) {
 		// The property doesn't have preset data
@@ -196,7 +197,9 @@ function getValueFromPresetVariable(
 	variable,
 	[ presetType, slug ]
 ) {
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', presetType ] );
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === presetType
+	);
 	if ( ! metadata ) {
 		return variable;
 	}

package/src/components/{editor/global-styles-renderer.js → global-styles-renderer/index.js}

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,10 +25,9 @@ function useGlobalStylesRenderer() {
 		}
 
 		const currentStoreSettings = getSettings();
-		const nonGlobalStyles = filter(
-			currentStoreSettings.styles,
-			( style ) => ! style.isGlobalStyles
-		);
+		const nonGlobalStyles = Object.values(
+			currentStoreSettings.styles ?? []
+		).filter( ( style ) => ! style.isGlobalStyles );
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],

package/src/components/header-edit-mode/document-actions/index.js

@@ -20,10 +20,15 @@ import {
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+	BlockIcon,
+} from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -51,10 +56,13 @@ function useSecondaryText() {
 		[]
 	);
 
+	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
+
 	if ( activeEntityBlockId ) {
 		return {
 			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
 			isActive: true,
+			icon: blockInformation?.icon,
 		};
 	}
 
@@ -89,9 +97,10 @@ export default function DocumentActions() {
 				templateType: postType,
 			};
 		}, [] );
+
 	const entityLabel =
 		templateType === 'wp_template_part' ? 'template part' : 'template';
-	const { label } = useSecondaryText();
+	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -147,15 +156,12 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ entityTitle }
-				</Text>
-
-				<Text
-					size="body"
-					className="edit-site-document-actions__secondary-item"
-				>
-					{ label ?? '' }
+					{ decodeEntities( entityTitle ) }
 				</Text>
+				<div className="edit-site-document-actions__secondary-item">
+					<BlockIcon icon={ icon } showColors />
+					<Text size="body">{ label ?? '' }</Text>
+				</div>
 
 				<Dropdown
 					popoverProps={ popoverProps }

package/src/components/header-edit-mode/document-actions/style.scss

@@ -41,9 +41,12 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		color: currentColor;
 	}
 
 	.edit-site-document-actions__secondary-item {
+		display: flex;
+		align-items: center;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -51,9 +54,13 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
-		background: $gray-200;
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		border-radius: 2px;
 		@include reduce-motion(transition);
+
+		.block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
+		}
 	}
 
 	&.has-secondary-label {

package/src/components/header-edit-mode/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
 import {
 	ToolSelector,
 	__experimentalPreviewOptions as PreviewOptions,
@@ -26,6 +27,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -36,12 +38,13 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
+import { useHasStyleBook } from '../style-book';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function Header( { showIconLabels } ) {
+export default function HeaderEditMode() {
 	const inserterButton = useRef();
 	const {
 		deviceType,
@@ -50,8 +53,9 @@ export default function Header( { showIconLabels } ) {
 		isListViewOpen,
 		listViewShortcut,
 		isVisualMode,
-		settings,
 		blockEditorMode,
+		homeUrl,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -59,13 +63,16 @@ export default function Header( { showIconLabels } ) {
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
-			getSettings,
 		} = select( editSiteStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		const postType = getEditedPostType();
 
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			templateType: postType,
@@ -75,8 +82,12 @@ export default function Header( { showIconLabels } ) {
 				'core/edit-site/toggle-list-view'
 			),
 			isVisualMode: getEditorMode() === 'visual',
-			settings: getSettings(),
 			blockEditorMode: __unstableGetEditorMode(),
+			homeUrl: getUnstableBase()?.home,
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 
@@ -103,6 +114,8 @@ export default function Header( { showIconLabels } ) {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const hasStyleBook = useHasStyleBook();
+
 	const isFocusMode = templateType === 'wp_template_part';
 
 	/* translators: button label text should, if possible, be under 16 characters. */
@@ -117,93 +130,102 @@ export default function Header( { showIconLabels } ) {
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
 	return (
-		<div className="edit-site-header-edit-mode">
-			<NavigableToolbar
-				className="edit-site-header-edit-mode__start"
-				aria-label={ __( 'Document tools' ) }
-			>
-				<div className="edit-site-header-edit-mode__toolbar">
-					<ToolbarItem
-						ref={ inserterButton }
-						as={ Button }
-						className="edit-site-header-edit-mode__inserter-toggle"
-						variant="primary"
-						isPressed={ isInserterOpen }
-						onMouseDown={ preventDefault }
-						onClick={ openInserter }
-						disabled={ ! isVisualMode }
-						icon={ plus }
-						label={ showIconLabels ? shortLabel : longLabel }
-						showTooltip={ ! showIconLabels }
-					/>
-					{ isLargeViewport && (
-						<>
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ ! isVisualMode }
-							/>
-							<ToolbarItem
-								as={ UndoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ RedoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ Button }
-								className="edit-site-header-edit-mode__list-view-toggle"
-								disabled={ ! isVisualMode && isZoomedOutView }
-								icon={ listView }
-								isPressed={ isListViewOpen }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ __( 'List View' ) }
-								onClick={ toggleListView }
-								shortcut={ listViewShortcut }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							{ isZoomedOutViewExperimentEnabled && (
+		<div
+			className={ classnames( 'edit-site-header-edit-mode', {
+				'show-icon-labels': showIconLabels,
+			} ) }
+		>
+			{ ! hasStyleBook && (
+				<NavigableToolbar
+					className="edit-site-header-edit-mode__start"
+					aria-label={ __( 'Document tools' ) }
+				>
+					<div className="edit-site-header-edit-mode__toolbar">
+						<ToolbarItem
+							ref={ inserterButton }
+							as={ Button }
+							className="edit-site-header-edit-mode__inserter-toggle"
+							variant="primary"
+							isPressed={ isInserterOpen }
+							onMouseDown={ preventDefault }
+							onClick={ openInserter }
+							disabled={ ! isVisualMode }
+							icon={ plus }
+							label={ showIconLabels ? shortLabel : longLabel }
+							showTooltip={ ! showIconLabels }
+						/>
+						{ isLargeViewport && (
+							<>
+								<ToolbarItem
+									as={ ToolSelector }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+									disabled={ ! isVisualMode }
+								/>
+								<ToolbarItem
+									as={ UndoButton }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+								/>
+								<ToolbarItem
+									as={ RedoButton }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+								/>
 								<ToolbarItem
 									as={ Button }
-									icon={ chevronUpDown }
-									isPressed={ isZoomedOutView }
+									className="edit-site-header-edit-mode__list-view-toggle"
+									disabled={
+										! isVisualMode || isZoomedOutView
+									}
+									icon={ listView }
+									isPressed={ isListViewOpen }
 									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'Zoom-out View' ) }
-									onClick={ () => {
-										setPreviewDeviceType( 'desktop' );
-										__unstableSetEditorMode(
-											isZoomedOutView
-												? 'edit'
-												: 'zoom-out'
-										);
-									} }
+									label={ __( 'List View' ) }
+									onClick={ toggleListView }
+									shortcut={ listViewShortcut }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
 								/>
-							) }
-						</>
-					) }
-				</div>
-			</NavigableToolbar>
+								{ isZoomedOutViewExperimentEnabled && (
+									<ToolbarItem
+										as={ Button }
+										className="edit-site-header-edit-mode__zoom-out-view-toggle"
+										icon={ chevronUpDown }
+										isPressed={ isZoomedOutView }
+										/* translators: button label text should, if possible, be under 16 characters. */
+										label={ __( 'Zoom-out View' ) }
+										onClick={ () => {
+											setPreviewDeviceType( 'desktop' );
+											__unstableSetEditorMode(
+												isZoomedOutView
+													? 'edit'
+													: 'zoom-out'
+											);
+										} }
+									/>
+								) }
+							</>
+						) }
+					</div>
+				</NavigableToolbar>
+			) }
 
 			<div className="edit-site-header-edit-mode__center">
-				<DocumentActions />
+				{ hasStyleBook ? __( 'Style Book' ) : <DocumentActions /> }
 			</div>
 
 			<div className="edit-site-header-edit-mode__end">
 				<div className="edit-site-header-edit-mode__actions">
-					{ ! isFocusMode && (
+					{ ! isFocusMode && ! hasStyleBook && (
 						<div
 							className={ classnames(
 								'edit-site-header-edit-mode__preview-options',
@@ -218,7 +240,7 @@ export default function Header( { showIconLabels } ) {
 							>
 								<MenuGroup>
 									<MenuItem
-										href={ settings?.siteUrl }
+										href={ homeUrl }
 										target="_blank"
 										icon={ external }
 									>

package/src/components/header-edit-mode/style.scss

@@ -1,20 +1,15 @@
 $header-toolbar-min-width: 335px;
 
 .edit-site-header-edit-mode {
+	height: $header-height;
 	align-items: center;
 	background-color: $white;
+	color: $gray-900;
 	display: flex;
-	height: $header-height;
 	box-sizing: border-box;
 	width: 100%;
 	justify-content: space-between;
-
-	body.is-fullscreen-mode & {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
-	}
+	border-bottom: $border-width solid $gray-200;
 
 	.edit-site-header-edit-mode__start {
 		display: flex;
@@ -40,29 +35,6 @@ $header-toolbar-min-width: 335px;
 	}
 }
 
-// Keeps the document title centered when the sidebar is open
-body.is-navigation-sidebar-open {
-	.edit-site-header-edit-mode {
-		padding-left: 0;
-		transition: padding-left 20ms linear;
-		transition-delay: 0ms;
-		@include reduce-motion("transition");
-	}
-}
-
-// Centred document title on small screens with sidebar open
-@media ( max-width: #{ ($break-large - 1) } ) {
-	body.is-navigation-sidebar-open .edit-site-header-edit-mode {
-		.edit-site-header-edit-mode__inserter-toggle ~ .components-button,
-		.edit-site-header-edit-mode__end .components-button:not(.is-primary) {
-			display: none;
-		}
-		.edit-site-save-button__button {
-			margin-right: 0;
-		}
-	}
-}
-
 .edit-site-header-edit-mode__toolbar {
 	display: flex;
 	align-items: center;
@@ -177,7 +149,7 @@ body.is-navigation-sidebar-open {
 
 // Button text label styles
 
-.show-icon-labels .edit-site-header-edit-mode {
+.edit-site-header-edit-mode.show-icon-labels {
 	.components-button.has-icon {
 		width: auto;
 
@@ -218,7 +190,7 @@ body.is-navigation-sidebar-open {
 		padding: 0 $grid-unit-10;
 	}
 
-	.edit-site-header__start .edit-site-header__toolbar > * + * {
+	.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > * + * {
 		margin-left: $grid-unit-10;
 	}
 }

package/src/components/keyboard-shortcuts/index.js

@@ -6,6 +6,7 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -119,6 +120,18 @@ function KeyboardShortcutsRegister() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 
 		registerShortcut( {
@@ -180,6 +193,10 @@ function KeyboardShortcutsRegister() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 		registerShortcut( {