@wordpress/edit-site 6.0.0 → 6.0.2

package/src/components/editor/use-editor-title.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../use-edited-entity-record';
+import useTitle from '../routes/use-title';
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
+
+function useEditorTitle() {
+	const {
+		record: editedPost,
+		getTitle,
+		isLoaded: hasLoadedPost,
+	} = useEditedEntityRecord();
+	let title;
+	if ( hasLoadedPost ) {
+		title = sprintf(
+			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
+			__( '%1$s ‹ %2$s' ),
+			getTitle(),
+			POST_TYPE_LABELS[ editedPost.type ] ??
+				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
+		);
+	}
+
+	// Only announce the title once the editor is ready to prevent "Replace"
+	// action in <URLQueryController> from double-announcing.
+	useTitle( hasLoadedPost && title );
+}
+
+export default useEditorTitle;

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -382,6 +382,7 @@ function ConfirmDeleteDialog( {
 			confirmButtonText={ __( 'Delete' ) }
 			onCancel={ handleCancelUninstall }
 			onConfirm={ handleConfirmUninstall }
+			size="medium"
 		>
 			{ font &&
 				sprintf(

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

@@ -34,7 +34,7 @@ function ScreenCSS() {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://wordpress.org/documentation/article/css/"
+							href="https://developer.wordpress.org/advanced-administration/wordpress/css/"
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }

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

@@ -81,28 +81,11 @@ function ScreenRevisions() {
 	};
 
 	const restoreRevision = ( revision ) => {
-		setUserConfig( () => ( {
-			styles: revision?.styles,
-			settings: revision?.settings,
-			_links: revision?._links,
-		} ) );
+		setUserConfig( () => revision );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
 	};
 
-	const selectRevision = ( revision ) => {
-		setCurrentlySelectedRevision( {
-			/*
-			 * The default must be an empty object so that
-			 * `mergeBaseAndUserConfigs()` can merge them correctly.
-			 */
-			styles: revision?.styles || {},
-			settings: revision?.settings || {},
-			_links: revision?._links || {},
-			id: revision?.id,
-		} );
-	};
-
 	useEffect( () => {
 		if (
 			! editorCanvasContainerView ||
@@ -134,11 +117,7 @@ function ScreenRevisions() {
 		 * See: https://github.com/WordPress/gutenberg/issues/55866
 		 */
 		if ( shouldSelectFirstItem ) {
-			setCurrentlySelectedRevision( {
-				styles: firstRevision?.styles || {},
-				settings: firstRevision?.settings || {},
-				id: firstRevision?.id,
-			} );
+			setCurrentlySelectedRevision( firstRevision );
 		}
 	}, [ shouldSelectFirstItem, firstRevision ] );
 
@@ -186,7 +165,7 @@ function ScreenRevisions() {
 					/>
 				) ) }
 			<RevisionsButtons
-				onChange={ selectRevision }
+				onChange={ setCurrentlySelectedRevision }
 				selectedRevisionId={ currentlySelectedRevisionId }
 				userRevisions={ currentRevisions }
 				canApplyRevision={ isLoadButtonEnabled }
@@ -219,6 +198,7 @@ function ScreenRevisions() {
 					onCancel={ () =>
 						setIsLoadingRevisionWithUnsavedChanges( false )
 					}
+					size="medium"
 				>
 					{ __(
 						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'

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

@@ -163,6 +163,7 @@ function RevisionsButtons( {
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
+							__experimentalIsFocusable
 							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );
@@ -219,7 +220,6 @@ function RevisionsButtons( {
 								</p>
 							) : (
 								<Button
-									disabled={ areStylesEqual }
 									size="compact"
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"

package/src/components/global-styles/screen-revisions/style.scss

@@ -173,19 +173,15 @@
 		// Safari from rendering the page / total text.
 		will-change: opacity;
 	}
+
 	.components-button.is-tertiary {
-		font-size: 28px;
-		font-weight: 200;
 		color: $gray-900;
-		margin-bottom: $grid-unit-05;
-		line-height: 1.2;
 	}
-	.components-button.is-tertiary:disabled {
+
+	.components-button.is-tertiary:disabled,
+	.components-button.is-tertiary[aria-disabled="true"] {
 		color: $gray-600;
 	}
-	.components-button.is-tertiary:hover {
-		background: transparent;
-	}
 }
 
 .edit-site-global-styles-screen-revisions__footer {

package/src/components/global-styles/shadows-edit-panel.js

@@ -201,6 +201,7 @@ export default function ShadowsEditPanel() {
 						setIsConfirmDialogVisible( false );
 					} }
 					confirmButtonText={ __( 'Delete' ) }
+					size="medium"
 				>
 					{ sprintf(
 						// translators: %s: name of the shadow

package/src/components/global-styles/variations/variation.js

@@ -15,6 +15,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
+import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -22,30 +23,24 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children, isPill } ) {
+export default function Variation( { variation, children, isPill, property } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo(
-		() => ( {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-				_links: variation._links ?? {},
-			},
+
+	const context = useMemo( () => {
+		let merged = mergeBaseAndUserConfigs( base, variation );
+		if ( property ) {
+			merged = filterObjectByProperty( merged, property );
+		}
+		return {
+			user: variation,
 			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
+			merged,
 			setUserConfig: () => {},
-		} ),
-		[ variation, base ]
-	);
+		};
+	}, [ variation, base, property ] );
 
-	const selectVariation = () => {
-		setUserConfig( () => ( {
-			settings: variation.settings,
-			styles: variation.styles,
-			_links: variation._links,
-		} ) );
-	};
+	const selectVariation = () => setUserConfig( variation );
 
 	const selectOnEnter = ( event ) => {
 		if ( event.keyCode === ENTER ) {

package/src/components/global-styles/variations/variations-color.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	__experimentalVStack as VStack,
+	__experimentalGrid as Grid,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -22,13 +25,18 @@ export default function ColorVariations( { title, gap = 2 } ) {
 	return (
 		<VStack spacing={ 3 }>
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<VStack spacing={ gap }>
+			<Grid spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation } isPill>
+					<Variation
+						key={ index }
+						variation={ variation }
+						isPill
+						property="color"
+					>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
-			</VStack>
+			</Grid>
 		</VStack>
 	);
 }

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

@@ -35,7 +35,11 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 				{ typographyVariations &&
 					typographyVariations.length &&
 					typographyVariations.map( ( variation, index ) => (
-						<Variation key={ index } variation={ variation }>
+						<Variation
+							key={ index }
+							variation={ variation }
+							property="typography"
+						>
 							{ ( isFocused ) => (
 								<PreviewIframe
 									label={ variation?.title }

package/src/components/global-styles-sidebar/index.js

@@ -152,6 +152,7 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isStyleBookOpened || isRevisionsStyleBookOpened
 							}
+							__experimentalIsFocusable
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
 							size="compact"
@@ -162,6 +163,7 @@ export default function GlobalStylesSidebar() {
 							label={ __( 'Revisions' ) }
 							icon={ backup }
 							onClick={ toggleRevisions }
+							__experimentalIsFocusable
 							disabled={ ! hasRevisions }
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened

package/src/components/layout/index.js

@@ -16,9 +16,10 @@ import {
 	useReducedMotion,
 	useViewportMatch,
 	useResizeObserver,
+	usePrevious,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	CommandMenu,
@@ -72,7 +73,7 @@ export default function Layout() {
 	useCommonCommands();
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
+	const toggleRef = useRef();
 	const {
 		isDistractionFree,
 		hasFixedToolbar,
@@ -80,7 +81,6 @@ export default function Layout() {
 		canvasMode,
 		previousShortcut,
 		nextShortcut,
-		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { getAllShortcutKeyCombinations } = select(
 			keyboardShortcutsStore
@@ -102,10 +102,6 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
-			hasBlockBreadcrumbs: select( preferencesStore ).get(
-				'core',
-				'showBlockBreadcrumbs'
-			),
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -125,27 +121,6 @@ export default function Layout() {
 		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
 
-	// This determines which animation variant should apply to the header.
-	// There is also a `isDistractionFreeHovering` state that gets priority
-	// when hovering the `edit-site-layout__header-container` in distraction
-	// free mode. It's set via framer and trickles down to all the children
-	// so they can use this variant state too.
-	//
-	// TODO: The issue with this is we want to have the hover state stick when hovering
-	// a popover opened via the header. We'll probably need to lift this state to
-	// handle it ourselves. Also, focusWithin the header needs to be handled.
-	let headerAnimationState;
-
-	if ( canvasMode === 'view' ) {
-		// We need 'view' to always take priority so 'isDistractionFree'
-		// doesn't bleed over into the view (sidebar) state
-		headerAnimationState = 'view';
-	} else if ( isDistractionFree ) {
-		headerAnimationState = 'isDistractionFree';
-	} else {
-		headerAnimationState = canvasMode; // edit, view, init
-	}
-
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
 
@@ -159,6 +134,14 @@ export default function Layout() {
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+	const previousCanvaMode = usePrevious( canvasMode );
+	useEffect( () => {
+		if ( previousCanvaMode === 'edit' ) {
+			toggleRef.current?.focus();
+		}
+		// Should not depend on the previous canvas mode value but the next.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ canvasMode ] );
 
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
@@ -185,48 +168,9 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
-						'has-block-breadcrumbs':
-							hasBlockBreadcrumbs &&
-							! isDistractionFree &&
-							canvasMode === 'edit',
 					}
 				) }
 			>
-				<motion.div
-					className="edit-site-layout__header-container"
-					variants={ {
-						isDistractionFree: {
-							opacity: 0,
-							transition: {
-								type: 'tween',
-								delay: 0.8,
-								delayChildren: 0.8,
-							}, // How long to wait before the header exits
-						},
-						isDistractionFreeHovering: {
-							opacity: 1,
-							transition: {
-								type: 'tween',
-								delay: 0.2,
-								delayChildren: 0.2,
-							}, // How long to wait before the header shows
-						},
-						view: { opacity: 1 },
-						edit: { opacity: 1 },
-					} }
-					whileHover={
-						isDistractionFree
-							? 'isDistractionFreeHovering'
-							: undefined
-					}
-					animate={ headerAnimationState }
-				>
-					<SiteHub
-						isTransparent={ isResizableFrameOversized }
-						className="edit-site-layout__hub"
-					/>
-				</motion.div>
-
 				<div className="edit-site-layout__content">
 					{ /*
 						The NavigableRegion must always be rendered and not use
@@ -255,6 +199,12 @@ export default function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
+										<SiteHub
+											ref={ toggleRef }
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
 										<SidebarContent routeKey={ routeKey }>
 											{ areas.sidebar }
 										</SidebarContent>

package/src/components/layout/style.scss

@@ -4,39 +4,13 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
-}
-
-.edit-site-layout__hub {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: calc(100vw - #{$canvas-padding * 2});
-	height: $header-height;
-	z-index: z-index(".edit-site-layout__hub");
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$grid-unit-15});
-	}
-
-	.edit-site-layout.is-full-canvas & {
-		padding-right: 0;
-		border-radius: 0;
-		width: $header-height;
-		box-shadow: none;
-	}
-}
 
-.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) {
-	margin-bottom: $header-height;
-	@include break-medium {
-		margin-bottom: 0;
+	// Show a dark background in "frame" mode to avoid edge artifacts.
+	&:not(.is-full-canvas) .editor-visual-editor {
+		background: $gray-900;
 	}
 }
 
-.edit-site-layout__header-container {
-	z-index: z-index(".edit-site-layout__header-container");
-}
-
 .edit-site-layout__content {
 	height: 100%;
 	flex-grow: 1;
@@ -158,10 +132,22 @@
 	height: 100%;
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+html.canvas-mode-edit-transition::view-transition-group(toggle) {
+	animation-delay: 255ms;
+}
+/* stylelint-enable  */
+
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
+	display: none;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: toggle;
+	/* stylelint-enable  */
 	position: relative;
 	color: $white;
-	border-radius: 0;
 	height: $header-height;
 	width: $header-height;
 	overflow: hidden;
@@ -169,6 +155,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	background: $gray-900;
+	border-radius: 0;
 
 	&:hover,
 	&:active {
@@ -202,7 +190,6 @@
 
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
-		border-radius: $radius-block-ui;
 		height: $grid-unit-80;
 		width: $grid-unit-80;
 		justify-content: center;
@@ -239,33 +226,6 @@
 	}
 }
 
-.edit-site-layout.is-distraction-free {
-	.edit-site-layout__header-container {
-		height: $header-height;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: z-index(".edit-site-layout__header-container");
-		width: 100%;
-
-		// We need ! important because we override inline styles
-		// set by the motion component.
-		&:focus-within {
-			opacity: 1 !important;
-			div {
-				transform: translateX(0) translateY(0) translateZ(0) !important;
-			}
-		}
-	}
-
-	.edit-site-site-hub {
-		position: absolute;
-		top: 0;
-		z-index: z-index(".edit-site-layout__hub");
-	}
-}
-
 .edit-site-layout__area {
 	flex-grow: 1;
 	margin: 0;

package/src/components/page-patterns/index.js

@@ -86,15 +86,12 @@ const DEFAULT_VIEW = {
 const SYNC_FILTERS = [
 	{
 		value: PATTERN_SYNC_TYPES.full,
-		label: _x( 'Synced', 'Option that shows all synchronized patterns' ),
+		label: _x( 'Synced', 'pattern (singular)' ),
 		description: __( 'Patterns that are kept in sync across the site.' ),
 	},
 	{
 		value: PATTERN_SYNC_TYPES.unsynced,
-		label: _x(
-			'Not synced',
-			'Option that shows all patterns that are not synchronized'
-		),
+		label: _x( 'Not synced', 'pattern (singular)' ),
 		description: __(
 			'Patterns that can be changed freely without affecting the site.'
 		),
@@ -298,13 +295,19 @@ export default function DataviewsPatterns() {
 						<span
 							className={ `edit-site-patterns__field-sync-status-${ item.syncStatus }` }
 						>
-							{ SYNC_FILTERS.find(
-								( { value } ) => value === item.syncStatus
-							)?.label ||
-								SYNC_FILTERS.find(
-									( { value } ) =>
-										value === PATTERN_SYNC_TYPES.unsynced
-								).label }
+							{
+								(
+									SYNC_FILTERS.find(
+										( { value } ) =>
+											value === item.syncStatus
+									) ||
+									SYNC_FILTERS.find(
+										( { value } ) =>
+											value ===
+											PATTERN_SYNC_TYPES.unsynced
+									)
+								).label
+							}
 						</span>
 					);
 				},

package/src/components/pagination/index.js

@@ -12,6 +12,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
 
 export default function Pagination( {
 	currentPage,
@@ -46,19 +47,21 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
-					aria-label={ __( 'First page' ) }
-				>
-					«
-				</Button>
+					label={ __( 'First page' ) }
+					icon={ previous }
+					size="compact"
+				/>
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage - 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
-					aria-label={ __( 'Previous page' ) }
-				>
-					‹
-				</Button>
+					label={ __( 'Previous page' ) }
+					icon={ chevronLeft }
+					size="compact"
+				/>
 			</HStack>
 			<Text variant="muted">
 				{ sprintf(
@@ -72,19 +75,21 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage + 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
-					aria-label={ __( 'Next page' ) }
-				>
-					›
-				</Button>
+					label={ __( 'Next page' ) }
+					icon={ chevronRight }
+					size="compact"
+				/>
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( numPages ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
-					aria-label={ __( 'Last page' ) }
-				>
-					»
-				</Button>
+					label={ __( 'Last page' ) }
+					icon={ next }
+					size="compact"
+				/>
 			</HStack>
 		</HStack>
 	);

package/src/components/sidebar-dataviews/dataview-item.js

@@ -35,11 +35,15 @@ export default function DataViewItem( {
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
+	let activeView = isCustom ? customViewId : slug;
+	if ( activeView === 'all' ) {
+		activeView = undefined;
+	}
 	const linkInfo = useLink( {
 		postType,
 		layout,
-		activeView: isCustom ? customViewId : slug,
-		isCustom: isCustom ? 'true' : 'false',
+		activeView,
+		isCustom: isCustom ? 'true' : undefined,
 	} );
 	return (
 		<HStack

package/src/components/sidebar-navigation-screen/index.js

@@ -76,7 +76,7 @@ export default function SidebarNavigationScreen( {
 				justify="flex-start"
 			>
 				<HStack
-					spacing={ 4 }
+					spacing={ 3 }
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>