@wordpress/edit-site 5.15.0 → 5.17.0

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', () => {
@@ -70,6 +71,11 @@ describe( 'useGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
 		] );
 	} );
 
@@ -105,6 +111,11 @@ describe( 'useGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
 		] );
 	} );
 
@@ -117,11 +128,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,39 @@ 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 );
+			_modifiedRevisions.push( {
+				id: 'parent',
+				styles: {},
+				settings: {},
+			} );
 		}
 
 		return {
@@ -97,5 +112,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/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/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/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, __ } from '@wordpress/i18n';
+import { __, 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,
@@ -32,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 />;
 }
 
@@ -117,8 +128,6 @@ function TemplateDocumentActions( { className, onBack } ) {
 		);
 	}
 
-	const entityLabel = getEntityLabel( record.type );
-
 	let typeIcon = icon;
 	if ( record.type === 'wp_navigation' ) {
 		typeIcon = navigationIcon;
@@ -128,16 +137,15 @@ function TemplateDocumentActions( { className, onBack } ) {
 
 	return (
 		<BaseDocumentActions
-			className={ className }
+			className={ classnames( className, {
+				'is-synced-entity':
+					record.wp_pattern_sync_status !== 'unsynced',
+			} ) }
 			icon={ typeIcon }
 			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>
@@ -153,7 +161,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();
@@ -183,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

@@ -1,54 +1,78 @@
 .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;
+
+	// Make the document title shorter in top-toolbar mode, as it has to be covered.
+	.has-fixed-toolbar & {
+		width: min(100%, 380px);
+	}
 
 	&:hover {
-		color: currentColor;
-		background: $gray-200;
+		background-color: $gray-200;
 	}
 
-	@include break-medium() {
-		width: 50%;
+	.components-button {
+		border-radius: $grid-unit-05;
+
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
 	}
 
 	@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;
+
+	// 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);
+	}
 
 	.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);
+		max-width: 50%;
 	}
 
 	.edit-site-document-actions.is-page & {
@@ -70,25 +94,27 @@
 	}
 }
 
-.edit-site-document-actions__shortcut,
-.edit-site-document-actions__back {
+.edit-site-document-actions__shortcut {
 	color: $gray-800;
-
-	.edit-site-document-actions:hover & {
-		color: $gray-900;
+	min-width: $grid-unit-40;
+	display: none;
+	@include break-small() {
+		display: initial;
 	}
 }
 
-.edit-site-document-actions__shortcut {
-	text-align: right;
-}
-
-.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;
+	position: absolute;
+
+	&:hover {
+		color: currentColor;
+		background-color: transparent;
+	}
 
 	.edit-site-document-actions.is-animated & {
 		animation: edit-site-document-actions__slide-in-left 0.3s;

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/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

@@ -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 },
@@ -260,28 +263,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 +350,12 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
+													defaultSize={ {
+														width:
+															canvasSize.width -
+															24 /* $canvas-padding */,
+														height: canvasSize.height,
+													} }
 													isOversized={
 														isResizableFrameOversized
 													}

package/src/components/layout/style.scss

@@ -58,7 +58,7 @@
 	display: flex;
 }
 
-.edit-site-layout__sidebar {
+.edit-site-layout__sidebar-region {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
 	flex-shrink: 0;
@@ -75,7 +75,7 @@
 		top: 0;
 	}
 
-	> div {
+	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
 		height: 100%;

package/src/components/page/index.js

@@ -26,17 +26,17 @@ export default function Page( {
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>
-			{ ! hideTitleFromUI && title && (
-				<Header
-					title={ title }
-					subTitle={ subTitle }
-					actions={ actions }
-				/>
-			) }
 			<div className="edit-site-page-content">
+				{ ! hideTitleFromUI && title && (
+					<Header
+						title={ title }
+						subTitle={ subTitle }
+						actions={ actions }
+					/>
+				) }
 				{ children }
-				<EditorSnackbars />
 			</div>
+			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }