@wordpress/edit-site 4.19.0 → 5.0.0

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,7 +20,11 @@ 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';
@@ -52,10 +56,13 @@ function useSecondaryText() {
 		[]
 	);
 
+	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
+
 	if ( activeEntityBlockId ) {
 		return {
 			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
 			isActive: true,
+			icon: blockInformation?.icon,
 		};
 	}
 
@@ -90,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.
@@ -150,13 +158,10 @@ export default function DocumentActions() {
 					</VisuallyHidden>
 					{ decodeEntities( entityTitle ) }
 				</Text>
-
-				<Text
-					size="body"
-					className="edit-site-document-actions__secondary-item"
-				>
-					{ label ?? '' }
-				</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

@@ -27,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
@@ -37,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,
@@ -53,6 +55,7 @@ export default function Header( { showIconLabels } ) {
 		isVisualMode,
 		blockEditorMode,
 		homeUrl,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -81,6 +84,10 @@ export default function Header( { showIconLabels } ) {
 			isVisualMode: getEditorMode() === 'visual',
 			blockEditorMode: __unstableGetEditorMode(),
 			homeUrl: getUnstableBase()?.home,
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 
@@ -107,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. */
@@ -121,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',

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( {