@wordpress/edit-site 5.16.0 → 5.17.0

package/src/components/global-styles/block-preview-panel.js

@@ -4,26 +4,37 @@
 import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 
 const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const blockExample = getBlockType( name )?.example;
-	const blockExampleWithVariation = {
-		...blockExample,
-		attributes: {
-			...blockExample?.attributes,
-			className: 'is-style-' + variation,
-		},
-	};
-	const blocks =
-		blockExample &&
-		getBlockFromExample(
-			name,
-			variation ? blockExampleWithVariation : blockExample
-		);
-	const viewportWidth = blockExample?.viewportWidth || null;
+	const blocks = useMemo( () => {
+		if ( ! blockExample ) {
+			return null;
+		}
+
+		let example = blockExample;
+		if ( variation ) {
+			example = {
+				...example,
+				attributes: {
+					...example.attributes,
+					className: 'is-style-' + variation,
+				},
+			};
+		}
+
+		return getBlockFromExample( name, example );
+	}, [ name, blockExample, variation ] );
+
+	const viewportWidth = blockExample?.viewportWidth ?? null;
 	const previewHeight = '150px';
 
-	return ! blockExample ? null : (
+	if ( ! blockExample ) {
+		return null;
+	}
+
+	return (
 		<Spacer marginX={ 4 } marginBottom={ 4 }>
 			<div
 				className="edit-site-global-styles__block-preview-panel"

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

@@ -16,7 +16,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -52,6 +52,32 @@ export function useColorRandomizer( name ) {
 		: [];
 }
 
+export function useStylesPreviewColors() {
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ headingColor = textColor ] = useGlobalStyle(
+		'elements.h1.color.text'
+	);
+	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
+
+	const paletteColors = ( themeColors ?? [] )
+		.concat( customColors ?? [] )
+		.concat( coreColors ?? [] );
+	const highlightedColors = paletteColors
+		.filter(
+			// we exclude these two colors because they are already visible in the preview.
+			( { color } ) => color !== backgroundColor && color !== headingColor
+		)
+		.slice( 0, 2 );
+
+	return {
+		paletteColors,
+		highlightedColors,
+	};
+}
+
 export function useSupportedStyles( name, element ) {
 	const { supportedPanels } = useSelect(
 		( select ) => {

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

@@ -18,8 +18,9 @@ import { useState, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from './hooks';
 
-const { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(
+const { useGlobalStyle, useGlobalStylesOutput } = unlock(
 	blockEditorPrivateApis
 );
 
@@ -76,22 +77,11 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
 	const disableMotion = useReducedMotion();
-	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
-	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
 	const ratio = width ? width / normalizedWidth : 1;
 
-	const paletteColors = ( themeColors ?? [] )
-		.concat( customColors ?? [] )
-		.concat( coreColors ?? [] );
-	const highlightedColors = paletteColors
-		.filter(
-			// we exclude these two colors because they are already visible in the preview.
-			( { color } ) => color !== backgroundColor && color !== headingColor
-		)
-		.slice( 0, 2 );
+	const { paletteColors, highlightedColors } = useStylesPreviewColors();
 
 	// Reset leaked styles from WP common.css and remove main content layout padding and border.
 	const editorStyles = useMemo( () => {

package/src/components/global-styles/screen-colors.js

@@ -10,7 +10,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 
 const {
@@ -38,9 +37,6 @@ function ScreenColors() {
 					'Manage palettes and the default color of different global elements on the site.'
 				) }
 			/>
-
-			<BlockPreviewPanel />
-
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
 					<Palette />

package/src/components/global-styles/screen-layout.js

@@ -9,7 +9,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
@@ -22,7 +21,6 @@ function ScreenLayout() {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			<BlockPreviewPanel />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);

package/src/components/global-styles/screen-revisions/index.js

@@ -79,9 +79,9 @@ function ScreenRevisions() {
 
 	const selectRevision = ( revision ) => {
 		setGlobalStylesRevision( {
-			styles: revision?.styles,
-			settings: revision?.settings,
-			behaviors: revision?.behaviors,
+			styles: revision?.styles || {},
+			settings: revision?.settings || {},
+			behaviors: revision?.behaviors || {},
 			id: revision?.id,
 		} );
 		setSelectedRevisionId( revision?.id );
@@ -137,7 +137,9 @@ function ScreenRevisions() {
 										}
 									} }
 								>
-									{ __( 'Apply' ) }
+									{ globalStylesRevision?.id === 'parent'
+										? __( 'Reset to defaults' )
+										: __( 'Apply' ) }
 								</Button>
 							</SidebarFixedBottom>
 						) }

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -9,6 +9,8 @@ import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Returns a button label for the revision.
@@ -19,6 +21,10 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 function getRevisionLabel( revision ) {
 	const authorDisplayName = revision?.author?.name || __( 'User' );
 
+	if ( 'parent' === revision?.id ) {
+		return __( 'Reset the styles to the theme defaults' );
+	}
+
 	if ( 'unsaved' === revision?.id ) {
 		return sprintf(
 			/* translators: %s author display name */
@@ -26,6 +32,7 @@ function getRevisionLabel( revision ) {
 			authorDisplayName
 		);
 	}
+
 	const formattedDate = dateI18n(
 		getSettings().formats.datetimeAbbreviated,
 		getDate( revision?.modified )
@@ -58,6 +65,10 @@ function getRevisionLabel( revision ) {
  * @return {JSX.Element} The modal component.
  */
 function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
@@ -72,6 +83,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 				const isSelected = selectedRevisionId
 					? selectedRevisionId === revision?.id
 					: index === 0;
+				const isReset = 'parent' === revision?.id;
 
 				return (
 					<li
@@ -79,6 +91,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,
+								'is-reset': isReset,
 							}
 						) }
 						key={ id }
@@ -91,29 +104,41 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							} }
 							label={ getRevisionLabel( revision ) }
 						>
-							<span className="edit-site-global-styles-screen-revisions__description">
-								<time dateTime={ modified }>
-									{ humanTimeDiff( modified ) }
-								</time>
-								<span className="edit-site-global-styles-screen-revisions__meta">
-									{ isUnsaved
-										? sprintf(
-												/* translators: %s author display name */
-												__( 'Unsaved changes by %s' ),
-												authorDisplayName
-										  )
-										: sprintf(
-												/* translators: %s author display name */
-												__( 'Changes saved by %s' ),
-												authorDisplayName
-										  ) }
+							{ isReset ? (
+								<span className="edit-site-global-styles-screen-revisions__description">
+									{ __( 'Default styles' ) }
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										{ currentTheme?.name?.rendered ||
+											currentTheme?.stylesheet }
+									</span>
+								</span>
+							) : (
+								<span className="edit-site-global-styles-screen-revisions__description">
+									<time dateTime={ modified }>
+										{ humanTimeDiff( modified ) }
+									</time>
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										{ isUnsaved
+											? sprintf(
+													/* translators: %s author display name */
+													__(
+														'Unsaved changes by %s'
+													),
+													authorDisplayName
+											  )
+											: sprintf(
+													/* translators: %s author display name */
+													__( 'Changes saved by %s' ),
+													authorDisplayName
+											  ) }
 
-									<img
-										alt={ author?.name }
-										src={ authorAvatar }
-									/>
+										<img
+											alt={ author?.name }
+											src={ authorAvatar }
+										/>
+									</span>
 								</span>
-							</span>
+							) }
 						</Button>
 					</li>
 				);

package/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js

@@ -71,6 +71,11 @@ describe( 'useGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
 		] );
 	} );
 
@@ -106,6 +111,11 @@ describe( 'useGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
 		] );
 	} );
 

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -99,6 +99,12 @@ export default function useGlobalStylesRevisions() {
 
 				_modifiedRevisions.unshift( unsavedRevision );
 			}
+
+			_modifiedRevisions.push( {
+				id: 'parent',
+				styles: {},
+				settings: {},
+			} );
 		}
 
 		return {

package/src/components/global-styles/screen-typography.js

@@ -16,7 +16,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
-import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -83,9 +82,6 @@ function ScreenTypography() {
 					'Manage the typography settings for different elements.'
 				) }
 			/>
-
-			<BlockPreviewPanel />
-
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 3 }>
 					<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>

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

@@ -139,7 +139,7 @@ function GlobalStylesRevisionsMenu() {
 		goTo( '/revisions' );
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	};
-	const hasRevisions = revisionsCount >= 2;
+	const hasRevisions = revisionsCount > 0;
 
 	return (
 		<GlobalStylesMenuFill>

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { sprintf, __, isRTL } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -33,8 +33,18 @@ import { store as coreStore } from '@wordpress/core-data';
 import useEditedEntityRecord from '../../use-edited-entity-record';
 import { store as editSiteStore } from '../../../store';
 
+const typeLabels = {
+	wp_block: __( 'Editing pattern:' ),
+	wp_navigation: __( 'Editing navigation menu:' ),
+	wp_template: __( 'Editing template:' ),
+	wp_template_part: __( 'Editing template part:' ),
+};
+
 export default function DocumentActions() {
-	const isPage = useSelect( ( select ) => select( editSiteStore ).isPage() );
+	const isPage = useSelect(
+		( select ) => select( editSiteStore ).isPage(),
+		[]
+	);
 	return isPage ? <PageDocumentActions /> : <TemplateDocumentActions />;
 }
 
@@ -118,8 +128,6 @@ function TemplateDocumentActions( { className, onBack } ) {
 		);
 	}
 
-	const entityLabel = getEntityLabel( record.type );
-
 	let typeIcon = icon;
 	if ( record.type === 'wp_navigation' ) {
 		typeIcon = navigationIcon;
@@ -137,11 +145,7 @@ function TemplateDocumentActions( { className, onBack } ) {
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">
-				{ sprintf(
-					/* translators: %s: the entity being edited, like "template"*/
-					__( 'Editing %s: ' ),
-					entityLabel
-				) }
+				{ typeLabels[ record.type ] ?? typeLabels.wp_template }
 			</VisuallyHidden>
 			{ getTitle() }
 		</BaseDocumentActions>
@@ -187,20 +191,3 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 		</div>
 	);
 }
-
-function getEntityLabel( entityType ) {
-	let label = '';
-	switch ( entityType ) {
-		case 'wp_navigation':
-			label = 'navigation menu';
-			break;
-		case 'wp_template_part':
-			label = 'template part';
-			break;
-		default:
-			label = 'template';
-			break;
-	}
-
-	return label;
-}

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

@@ -17,6 +17,10 @@
 		width: min(100%, 380px);
 	}
 
+	&:hover {
+		background-color: $gray-200;
+	}
+
 	.components-button {
 		border-radius: $grid-unit-05;
 
@@ -26,10 +30,6 @@
 		}
 	}
 
-	@include break-medium() {
-		width: 50%;
-	}
-
 	@include break-large() {
 		width: min(100%, 450px);
 	}
@@ -54,6 +54,11 @@
 	flex-grow: 1;
 	overflow: hidden;
 
+	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
+	@include break-small() {
+		padding-left: $grid-unit-40;
+	}
+
 	&:hover {
 		color: var(--wp-block-synced-color);
 	}
@@ -67,6 +72,7 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		max-width: 50%;
 	}
 
 	.edit-site-document-actions.is-page & {
@@ -90,6 +96,11 @@
 
 .edit-site-document-actions__shortcut {
 	color: $gray-800;
+	min-width: $grid-unit-40;
+	display: none;
+	@include break-small() {
+		display: initial;
+	}
 }
 
 .edit-site-document-actions__back.components-button.has-icon.has-text {
@@ -98,9 +109,11 @@
 	color: $gray-700;
 	gap: 0;
 	z-index: 1;
+	position: absolute;
 
 	&:hover {
 		color: currentColor;
+		background-color: transparent;
 	}
 
 	.edit-site-document-actions.is-animated & {

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

@@ -279,7 +279,7 @@ export default function HeaderEditMode() {
 											label={ __( 'Zoom-out View' ) }
 											onClick={ () => {
 												setPreviewDeviceType(
-													'desktop'
+													'Desktop'
 												);
 												__unstableSetEditorMode(
 													isZoomedOutView

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

@@ -88,15 +88,6 @@ $header-toolbar-min-width: 335px;
 	@include break-small() {
 		gap: $grid-unit-10;
 	}
-
-	// Pinned items.
-	.interface-pinned-items {
-		display: none;
-
-		@include break-medium() {
-			display: inline-flex;
-		}
-	}
 }
 
 .edit-site-header-edit-mode__preview-options {

package/src/components/layout/index.js

@@ -26,7 +26,10 @@ import {
 	privateApis as commandsPrivateApis,
 } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	useBlockCommands,
+} from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
@@ -66,6 +69,7 @@ export default function Layout() {
 	useCommands();
 	useEditModeCommands();
 	useCommonCommands();
+	useBlockCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();
@@ -212,7 +216,6 @@ export default function Layout() {
 					animate={ headerAnimationState }
 				>
 					<SiteHub
-						as={ motion.div }
 						variants={ {
 							isDistractionFree: { x: '-100%' },
 							isDistractionFreeHovering: { x: 0 },

package/src/components/page-actions/trash-page-menu-item.js

@@ -51,7 +51,11 @@ export default function TrashPageMenuItem( { postId, onRemove } ) {
 	}
 	return (
 		<>
-			<MenuItem onClick={ () => removePage() } isDestructive>
+			<MenuItem
+				onClick={ () => removePage() }
+				isDestructive
+				variant="secondary"
+			>
 				{ __( 'Move to Trash' ) }
 			</MenuItem>
 		</>

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -3,15 +3,12 @@
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter, removeFilter } from '@wordpress/hooks';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
-
-const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 const PAGE_CONTENT_BLOCK_TYPES = [
 	'core/post-title',

package/src/components/page-patterns/duplicate-menu-item.js

@@ -78,27 +78,22 @@ export default function DuplicateMenuItem( {
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-					__( '"%s" created.' ),
-					title
+					__( '"%s" duplicated.' ),
+					item.title
 				),
 				{
 					type: 'snackbar',
 					id: 'edit-site-patterns-success',
-					actions: [
-						{
-							label: __( 'Edit' ),
-							onClick: () =>
-								history.push( {
-									postType: TEMPLATE_PARTS,
-									postId: result?.id,
-									categoryType: TEMPLATE_PARTS,
-									categoryId,
-								} ),
-						},
-					],
 				}
 			);
 
+			history.push( {
+				postType: TEMPLATE_PARTS,
+				postId: result?.id,
+				categoryType: TEMPLATE_PARTS,
+				categoryId,
+			} );
+
 			onClose();
 		} catch ( error ) {
 			const errorMessage =
@@ -139,41 +134,25 @@ export default function DuplicateMenuItem( {
 				{ throwOnError: true }
 			);
 
-			const actionLabel = isThemePattern
-				? __( 'View my patterns' )
-				: __( 'Edit' );
-
-			const newLocation = isThemePattern
-				? {
-						categoryType: USER_PATTERNS,
-						categoryId: USER_PATTERN_CATEGORY,
-						path: '/patterns',
-				  }
-				: {
-						categoryType: USER_PATTERNS,
-						categoryId: USER_PATTERN_CATEGORY,
-						postType: USER_PATTERNS,
-						postId: result?.id,
-				  };
-
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
-					__( '"%s" added to my patterns.' ),
-					title
+					__( '"%s" duplicated.' ),
+					item.title
 				),
 				{
 					type: 'snackbar',
 					id: 'edit-site-patterns-success',
-					actions: [
-						{
-							label: actionLabel,
-							onClick: () => history.push( newLocation ),
-						},
-					],
 				}
 			);
 
+			history.push( {
+				categoryType: USER_PATTERNS,
+				categoryId: USER_PATTERN_CATEGORY,
+				postType: USER_PATTERNS,
+				postId: result?.id,
+			} );
+
 			onClose();
 		} catch ( error ) {
 			const errorMessage =