@wordpress/edit-site 5.15.0 → 5.16.0

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

@@ -7,6 +7,7 @@ import {
 	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
+	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext, useState, useEffect } from '@wordpress/element';
@@ -70,6 +71,7 @@ function ScreenRevisions() {
 		setUserConfig( () => ( {
 			styles: revision?.styles,
 			settings: revision?.settings,
+			behaviors: revision?.behaviors,
 		} ) );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
@@ -79,6 +81,7 @@ function ScreenRevisions() {
 		setGlobalStylesRevision( {
 			styles: revision?.styles,
 			settings: revision?.settings,
+			behaviors: revision?.behaviors,
 			id: revision?.id,
 		} );
 		setSelectedRevisionId( revision?.id );
@@ -87,6 +90,7 @@ function ScreenRevisions() {
 	const isLoadButtonEnabled =
 		!! globalStylesRevision?.id &&
 		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
+	const shouldShowRevisions = ! isLoading && revisions.length;
 
 	return (
 		<>
@@ -99,68 +103,70 @@ function ScreenRevisions() {
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
 			) }
-			{ ! isLoading && (
-				<Revisions
-					blocks={ blocks }
-					userConfig={ globalStylesRevision }
-					onClose={ onCloseRevisions }
-				/>
-			) }
-			<div className="edit-site-global-styles-screen-revisions">
-				<RevisionsButtons
-					onChange={ selectRevision }
-					selectedRevisionId={ selectedRevisionId }
-					userRevisions={ revisions }
-				/>
-				{ isLoadButtonEnabled && (
-					<SidebarFixedBottom>
-						<Button
-							variant="primary"
-							className="edit-site-global-styles-screen-revisions__button"
-							disabled={
-								! globalStylesRevision?.id ||
-								globalStylesRevision?.id === 'unsaved'
+			{ shouldShowRevisions ? (
+				<>
+					<Revisions
+						blocks={ blocks }
+						userConfig={ globalStylesRevision }
+						onClose={ onCloseRevisions }
+					/>
+					<div className="edit-site-global-styles-screen-revisions">
+						<RevisionsButtons
+							onChange={ selectRevision }
+							selectedRevisionId={ selectedRevisionId }
+							userRevisions={ revisions }
+						/>
+						{ isLoadButtonEnabled && (
+							<SidebarFixedBottom>
+								<Button
+									variant="primary"
+									className="edit-site-global-styles-screen-revisions__button"
+									disabled={
+										! globalStylesRevision?.id ||
+										globalStylesRevision?.id === 'unsaved'
+									}
+									onClick={ () => {
+										if ( hasUnsavedChanges ) {
+											setIsLoadingRevisionWithUnsavedChanges(
+												true
+											);
+										} else {
+											restoreRevision(
+												globalStylesRevision
+											);
+										}
+									} }
+								>
+									{ __( 'Apply' ) }
+								</Button>
+							</SidebarFixedBottom>
+						) }
+					</div>
+					{ isLoadingRevisionWithUnsavedChanges && (
+						<ConfirmDialog
+							isOpen={ isLoadingRevisionWithUnsavedChanges }
+							confirmButtonText={ __( 'Apply' ) }
+							onConfirm={ () =>
+								restoreRevision( globalStylesRevision )
+							}
+							onCancel={ () =>
+								setIsLoadingRevisionWithUnsavedChanges( false )
 							}
-							onClick={ () => {
-								if ( hasUnsavedChanges ) {
-									setIsLoadingRevisionWithUnsavedChanges(
-										true
-									);
-								} else {
-									restoreRevision( globalStylesRevision );
-								}
-							} }
 						>
-							{ __( 'Apply' ) }
-						</Button>
-					</SidebarFixedBottom>
-				) }
-			</div>
-			{ isLoadingRevisionWithUnsavedChanges && (
-				<ConfirmDialog
-					title={ __(
-						'Loading this revision will discard all unsaved changes.'
-					) }
-					isOpen={ isLoadingRevisionWithUnsavedChanges }
-					confirmButtonText={ __( ' Discard unsaved changes' ) }
-					onConfirm={ () => restoreRevision( globalStylesRevision ) }
-					onCancel={ () =>
-						setIsLoadingRevisionWithUnsavedChanges( false )
-					}
-				>
-					<>
-						<h2>
 							{ __(
-								'Loading this revision will discard all unsaved changes.'
+								'Any unsaved changes will be lost when you apply this revision.'
 							) }
-						</h2>
-						<p>
-							{ __(
-								'Do you want to replace your unsaved changes in the editor?'
-							) }
-						</p>
-					</>
-				</ConfirmDialog>
+						</ConfirmDialog>
+					) }
+				</>
+			) : (
+				<Spacer marginX={ 4 } data-testid="global-styles-no-revisions">
+					{
+						// Adding an existing translation here in case these changes are shipped to WordPress 6.3.
+						// Later we could update to something better, e.g., "There are currently no style revisions.".
+						__( 'No results found.' )
+					}
+				</Spacer>
 			) }
 		</>
 	);

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

@@ -21,11 +21,9 @@ function getRevisionLabel( revision ) {
 
 	if ( 'unsaved' === revision?.id ) {
 		return sprintf(
-			/* translators: %(name)s author display name */
-			__( 'Unsaved changes by %(name)s' ),
-			{
-				name: authorDisplayName,
-			}
+			/* translators: %s author display name */
+			__( 'Unsaved changes by %s' ),
+			authorDisplayName
 		);
 	}
 	const formattedDate = dateI18n(
@@ -35,20 +33,16 @@ function getRevisionLabel( revision ) {
 
 	return revision?.isLatest
 		? sprintf(
-				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Changes saved by %(name)s on %(date)s (current)' ),
-				{
-					name: authorDisplayName,
-					date: formattedDate,
-				}
+				/* translators: %1$s author display name, %2$s: revision creation date */
+				__( 'Changes saved by %1$s on %2$s (current)' ),
+				authorDisplayName,
+				formattedDate
 		  )
 		: sprintf(
-				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Changes saved by %(name)s on %(date)s' ),
-				{
-					name: authorDisplayName,
-					date: formattedDate,
-				}
+				/* translators: %1$s author display name, %2$s: revision creation date */
+				__( 'Changes saved by %1$s on %2$s' ),
+				authorDisplayName,
+				formattedDate
 		  );
 }
 
@@ -104,22 +98,14 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 								<span className="edit-site-global-styles-screen-revisions__meta">
 									{ isUnsaved
 										? sprintf(
-												/* translators: %(name)s author display name */
-												__(
-													'Unsaved changes by %(name)s'
-												),
-												{
-													name: authorDisplayName,
-												}
+												/* translators: %s author display name */
+												__( 'Unsaved changes by %s' ),
+												authorDisplayName
 										  )
 										: sprintf(
-												/* translators: %(name)s author display name */
-												__(
-													'Changes saved by %(name)s'
-												),
-												{
-													name: authorDisplayName,
-												}
+												/* translators: %s author display name */
+												__( 'Changes saved by %s' ),
+												authorDisplayName
 										  ) }
 
 									<img

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

@@ -49,6 +49,7 @@ describe( 'useGlobalStylesRevisions', () => {
 				styles: {},
 			},
 		],
+		isLoadingGlobalStylesRevisions: false,
 	};
 
 	it( 'returns loaded revisions with no unsaved changes', () => {
@@ -117,11 +118,23 @@ describe( 'useGlobalStylesRevisions', () => {
 		const { result } = renderHook( () => useGlobalStylesRevisions() );
 		const { revisions, isLoading, hasUnsavedChanges } = result.current;
 
-		expect( isLoading ).toBe( true );
+		expect( isLoading ).toBe( false );
 		expect( hasUnsavedChanges ).toBe( false );
 		expect( revisions ).toEqual( [] );
 	} );
 
+	it( 'returns loading status when resolving global revisions', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			isLoadingGlobalStylesRevisions: true,
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { isLoading } = result.current;
+
+		expect( isLoading ).toBe( true );
+	} );
+
 	it( 'returns empty revisions when authors are not yet available', () => {
 		useSelect.mockImplementation( () => ( {
 			...selectValue,

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

@@ -21,34 +21,40 @@ const EMPTY_ARRAY = [];
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 export default function useGlobalStylesRevisions() {
 	const { user: userConfig } = useContext( GlobalStylesContext );
-	const { authors, currentUser, isDirty, revisions } = useSelect(
-		( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				getCurrentUser,
-				getUsers,
-				getCurrentThemeGlobalStylesRevisions,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const _currentUser = getCurrentUser();
-			const _isDirty = dirtyEntityRecords.length > 0;
-			const globalStylesRevisions =
-				getCurrentThemeGlobalStylesRevisions() || EMPTY_ARRAY;
-			const _authors =
-				getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
+	const {
+		authors,
+		currentUser,
+		isDirty,
+		revisions,
+		isLoadingGlobalStylesRevisions,
+	} = useSelect( ( select ) => {
+		const {
+			__experimentalGetDirtyEntityRecords,
+			getCurrentUser,
+			getUsers,
+			getCurrentThemeGlobalStylesRevisions,
+			isResolving,
+		} = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const _currentUser = getCurrentUser();
+		const _isDirty = dirtyEntityRecords.length > 0;
+		const globalStylesRevisions =
+			getCurrentThemeGlobalStylesRevisions() || EMPTY_ARRAY;
+		const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
 
-			return {
-				authors: _authors,
-				currentUser: _currentUser,
-				isDirty: _isDirty,
-				revisions: globalStylesRevisions,
-			};
-		},
-		[]
-	);
+		return {
+			authors: _authors,
+			currentUser: _currentUser,
+			isDirty: _isDirty,
+			revisions: globalStylesRevisions,
+			isLoadingGlobalStylesRevisions: isResolving(
+				'getCurrentThemeGlobalStylesRevisions'
+			),
+		};
+	}, [] );
 	return useMemo( () => {
 		let _modifiedRevisions = [];
-		if ( ! authors.length || ! revisions.length ) {
+		if ( ! authors.length || isLoadingGlobalStylesRevisions ) {
 			return {
 				revisions: _modifiedRevisions,
 				hasUnsavedChanges: isDirty,
@@ -66,30 +72,33 @@ export default function useGlobalStylesRevisions() {
 			};
 		} );
 
-		// Flags the most current saved revision.
-		if ( _modifiedRevisions[ 0 ].id !== 'unsaved' ) {
-			_modifiedRevisions[ 0 ].isLatest = true;
-		}
+		if ( _modifiedRevisions.length ) {
+			// Flags the most current saved revision.
+			if ( _modifiedRevisions[ 0 ].id !== 'unsaved' ) {
+				_modifiedRevisions[ 0 ].isLatest = true;
+			}
 
-		// Adds an item for unsaved changes.
-		if (
-			isDirty &&
-			userConfig &&
-			Object.keys( userConfig ).length > 0 &&
-			currentUser
-		) {
-			const unsavedRevision = {
-				id: 'unsaved',
-				styles: userConfig?.styles,
-				settings: userConfig?.settings,
-				author: {
-					name: currentUser?.name,
-					avatar_urls: currentUser?.avatar_urls,
-				},
-				modified: new Date(),
-			};
+			// Adds an item for unsaved changes.
+			if (
+				isDirty &&
+				userConfig &&
+				Object.keys( userConfig ).length > 0 &&
+				currentUser
+			) {
+				const unsavedRevision = {
+					id: 'unsaved',
+					styles: userConfig?.styles,
+					settings: userConfig?.settings,
+					behaviors: userConfig?.behaviors,
+					author: {
+						name: currentUser?.name,
+						avatar_urls: currentUser?.avatar_urls,
+					},
+					modified: new Date(),
+				};
 
-			_modifiedRevisions.unshift( unsavedRevision );
+				_modifiedRevisions.unshift( unsavedRevision );
+			}
 		}
 
 		return {
@@ -97,5 +106,12 @@ export default function useGlobalStylesRevisions() {
 			hasUnsavedChanges: isDirty,
 			isLoading: false,
 		};
-	}, [ isDirty, revisions, currentUser, authors, userConfig ] );
+	}, [
+		isDirty,
+		revisions,
+		currentUser,
+		authors,
+		userConfig,
+		isLoadingGlobalStylesRevisions,
+	] );
 }

package/src/components/global-styles/style-variations-container.js

@@ -113,11 +113,13 @@ export default function StyleVariationsContainer() {
 				title: __( 'Default' ),
 				settings: {},
 				styles: {},
+				behaviors: {},
 			},
 			...( variations ?? [] ).map( ( variation ) => ( {
 				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
+				behaviors: variation.behaviors ?? {},
 			} ) ),
 		];
 	}, [ variations ] );

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -17,7 +17,8 @@ import {
 import { BlockIcon } from '@wordpress/block-editor';
 import { store as commandsStore } from '@wordpress/commands';
 import {
-	chevronLeftSmall as chevronLeftSmallIcon,
+	chevronLeftSmall,
+	chevronRightSmall,
 	page as pageIcon,
 	navigation as navigationIcon,
 	symbol,
@@ -128,7 +129,10 @@ function TemplateDocumentActions( { className, onBack } ) {
 
 	return (
 		<BaseDocumentActions
-			className={ className }
+			className={ classnames( className, {
+				'is-synced-entity':
+					record.wp_pattern_sync_status !== 'unsynced',
+			} ) }
 			icon={ typeIcon }
 			onBack={ onBack }
 		>
@@ -153,7 +157,7 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 			{ onBack && (
 				<Button
 					className="edit-site-document-actions__back"
-					icon={ chevronLeftSmallIcon }
+					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
 					onClick={ ( event ) => {
 						event.stopPropagation();
 						onBack();

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

@@ -1,20 +1,29 @@
 .edit-site-document-actions {
-	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
+	display: flex;
+	align-items: center;
 	height: $button-size;
+	justify-content: space-between;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
 	// subsequently truncate child text, we set an explicit min-width.
 	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 	min-width: 0;
 	background: $gray-100;
-	border-radius: 4px;
+	border-radius: $grid-unit-05;
 	width: min(100%, 450px);
-	overflow: hidden;
 
-	&:hover {
-		color: currentColor;
-		background: $gray-200;
+	// Make the document title shorter in top-toolbar mode, as it has to be covered.
+	.has-fixed-toolbar & {
+		width: min(100%, 380px);
+	}
+
+	.components-button {
+		border-radius: $grid-unit-05;
+
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
 	}
 
 	@include break-medium() {
@@ -24,31 +33,40 @@
 	@include break-large() {
 		width: min(100%, 450px);
 	}
+
+	&.is-synced-entity {
+		.edit-site-document-actions__title {
+			color: var(--wp-block-synced-color);
+			h1 {
+				color: var(--wp-block-synced-color);
+			}
+		}
+	}
 }
 
 .edit-site-document-actions__command {
-	grid-column: 1 / -1;
-	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
-	grid-row: 1;
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
 }
 
-
 .edit-site-document-actions__title {
 	flex-grow: 1;
-	color: var(--wp-block-synced-color);
 	overflow: hidden;
-	grid-column: 2 / 3;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
 
 	.block-editor-block-icon {
 		min-width: $grid-unit-30;
+		flex-shrink: 0;
 	}
 
 	h1 {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--wp-block-synced-color);
 	}
 
 	.edit-site-document-actions.is-page & {
@@ -70,26 +88,21 @@
 	}
 }
 
-.edit-site-document-actions__shortcut,
-.edit-site-document-actions__back {
-	color: $gray-800;
-
-	.edit-site-document-actions:hover & {
-		color: $gray-900;
-	}
-}
-
 .edit-site-document-actions__shortcut {
-	text-align: right;
+	color: $gray-800;
 }
 
-.edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
-	grid-column: 1 / 2;
-	grid-row: 1;
+	color: $gray-700;
+	gap: 0;
 	z-index: 1;
 
+	&:hover {
+		color: currentColor;
+	}
+
 	.edit-site-document-actions.is-animated & {
 		animation: edit-site-document-actions__slide-in-left 0.3s;
 		@include reduce-motion("animation");

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -33,10 +33,8 @@ function KeyboardShortcutsEditMode() {
 	);
 	const { redo, undo } = useDispatch( coreStore );
 	const {
-		isFeatureActive,
 		setIsListViewOpened,
 		switchEditorMode,
-		toggleFeature,
 		setIsInserterOpened,
 		closeGeneralSidebar,
 	} = useDispatch( editSiteStore );
@@ -47,7 +45,8 @@ function KeyboardShortcutsEditMode() {
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
 
-	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { set: setPreference, toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
 
 	const toggleDistractionFree = () => {
@@ -135,9 +134,9 @@ function KeyboardShortcutsEditMode() {
 
 	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
 		toggleDistractionFree();
-		toggleFeature( 'distractionFree' );
+		toggle( 'core/edit-site', 'distractionFree' );
 		createInfoNotice(
-			isFeatureActive( 'distractionFree' )
+			getPreference( 'core/edit-site', 'distractionFree' )
 				? __( 'Distraction free mode turned on.' )
 				: __( 'Distraction free mode turned off.' ),
 			{

package/src/components/layout/index.js

@@ -260,28 +260,35 @@ export default function Layout() {
 				</motion.div>
 
 				<div className="edit-site-layout__content">
-					<motion.div
-						// The sidebar is needed for routing on mobile
-						// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
-						// so we can't remove the element entirely. Using `inert` will make
-						// it inaccessible to screen readers and keyboard navigation.
-						inert={ showSidebar ? undefined : 'inert' }
-						animate={ { opacity: showSidebar ? 1 : 0 } }
-						transition={ {
-							type: 'tween',
-							duration:
-								// Disable transition in mobile to emulate a full page transition.
-								disableMotion || isMobileViewport
-									? 0
-									: ANIMATION_DURATION,
-							ease: 'easeOut',
-						} }
-						className="edit-site-layout__sidebar"
+					{ /*
+						The NavigableRegion must always be rendered and not use
+						`inert` otherwise `useNavigateRegions` will fail.
+					*/ }
+					<NavigableRegion
+						ariaLabel={ __( 'Navigation' ) }
+						className="edit-site-layout__sidebar-region"
 					>
-						<NavigableRegion ariaLabel={ __( 'Navigation' ) }>
+						<motion.div
+							// The sidebar is needed for routing on mobile
+							// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
+							// so we can't remove the element entirely. Using `inert` will make
+							// it inaccessible to screen readers and keyboard navigation.
+							inert={ showSidebar ? undefined : 'inert' }
+							animate={ { opacity: showSidebar ? 1 : 0 } }
+							transition={ {
+								type: 'tween',
+								duration:
+									// Disable transition in mobile to emulate a full page transition.
+									disableMotion || isMobileViewport
+										? 0
+										: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+							className="edit-site-layout__sidebar"
+						>
 							<Sidebar />
-						</NavigableRegion>
-					</motion.div>
+						</motion.div>
+					</NavigableRegion>
 
 					<SavePanel />
 
@@ -340,6 +347,12 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
+													defaultSize={ {
+														width:
+															canvasSize.width -
+															24 /* $canvas-padding */,
+														height: canvasSize.height,
+													} }
 													isOversized={
 														isResizableFrameOversized
 													}