@wordpress/edit-site 5.12.11 → 5.12.12

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';
@@ -87,6 +88,7 @@ function ScreenRevisions() {
 	const isLoadButtonEnabled =
 		!! globalStylesRevision?.id &&
 		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
+	const shouldShowRevisions = ! isLoading && revisions.length;
 
 	return (
 		<>
@@ -99,68 +101,84 @@ 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
+							title={ __(
+								'Loading this revision will discard all unsaved changes.'
+							) }
+							isOpen={ isLoadingRevisionWithUnsavedChanges }
+							confirmButtonText={ __(
+								' Discard unsaved changes'
+							) }
+							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.'
+							<>
+								<h2>
+									{ __(
+										'Loading this revision will discard all unsaved changes.'
+									) }
+								</h2>
+								<p>
+									{ __(
+										'Do you want to replace your unsaved changes in the editor?'
+									) }
+								</p>
+							</>
+						</ConfirmDialog>
 					) }
-					isOpen={ isLoadingRevisionWithUnsavedChanges }
-					confirmButtonText={ __( ' Discard unsaved changes' ) }
-					onConfirm={ () => restoreRevision( globalStylesRevision ) }
-					onCancel={ () =>
-						setIsLoadingRevisionWithUnsavedChanges( false )
+				</>
+			) : (
+				<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.' )
 					}
-				>
-					<>
-						<h2>
-							{ __(
-								'Loading this revision will discard all unsaved changes.'
-							) }
-						</h2>
-						<p>
-							{ __(
-								'Do you want to replace your unsaved changes in the editor?'
-							) }
-						</p>
-					</>
-				</ConfirmDialog>
+				</Spacer>
 			) }
 		</>
 	);

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,32 @@ 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,
+					author: {
+						name: currentUser?.name,
+						avatar_urls: currentUser?.avatar_urls,
+					},
+					modified: new Date(),
+				};
 
-			_modifiedRevisions.unshift( unsavedRevision );
+				_modifiedRevisions.unshift( unsavedRevision );
+			}
 		}
 
 		return {
@@ -97,5 +105,12 @@ export default function useGlobalStylesRevisions() {
 			hasUnsavedChanges: isDirty,
 			isLoading: false,
 		};
-	}, [ isDirty, revisions, currentUser, authors, userConfig ] );
+	}, [
+		isDirty,
+		revisions,
+		currentUser,
+		authors,
+		userConfig,
+		isLoadingGlobalStylesRevisions,
+	] );
 }

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

@@ -340,6 +340,12 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
+													defaultSize={ {
+														width:
+															canvasSize.width -
+															24 /* $canvas-padding */,
+														height: canvasSize.height,
+													} }
 													isOversized={
 														isResizableFrameOversized
 													}

package/src/components/page-patterns/style.scss

@@ -57,6 +57,9 @@
 			width: 300px;
 		}
 	}
+	.edit-site-patterns__sync-status-filter-option:not([aria-checked="true"]) {
+		color: $gray-600;
+	}
 	.edit-site-patterns__sync-status-filter-option:active {
 		background: $gray-700;
 		color: $gray-100;

package/src/components/page-template-parts/index.js

@@ -39,7 +39,6 @@ export default function PageTemplateParts() {
 							params={ {
 								postId: templatePart.id,
 								postType: templatePart.type,
-								canvas: 'view',
 							} }
 							state={ { backPath: '/wp_template_part/all' } }
 						>

package/src/components/resizable-frame/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	ResizableBox,
 	Tooltip,
@@ -82,6 +82,8 @@ function ResizableFrame( {
 	setIsOversized,
 	isReady,
 	children,
+	/** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */
+	defaultSize,
 	innerContentStyle,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
@@ -95,22 +97,13 @@ function ResizableFrame( {
 		[]
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const initialAspectRatioRef = useRef( null );
-	// The width of the resizable frame on initial render.
-	const initialComputedWidthRef = useRef( null );
 	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
 	const frameRef = useRef( null );
 	const resizableHandleHelpId = useInstanceId(
 		ResizableFrame,
 		'edit-site-resizable-frame-handle-help'
 	);
-
-	// Remember frame dimensions on initial render.
-	useEffect( () => {
-		const { offsetWidth, offsetHeight } = frameRef.current.resizable;
-		initialComputedWidthRef.current = offsetWidth;
-		initialAspectRatioRef.current = offsetWidth / offsetHeight;
-	}, [] );
+	const defaultAspectRatio = defaultSize.width / defaultSize.height;
 
 	const handleResizeStart = ( _event, _direction, ref ) => {
 		// Remember the starting width so we don't have to get `ref.offsetWidth` on
@@ -126,7 +119,7 @@ function ResizableFrame( {
 		const maxDoubledDelta =
 			delta.width < 0 // is shrinking
 				? deltaAbs
-				: ( initialComputedWidthRef.current - startingWidth ) / 2;
+				: ( defaultSize.width - startingWidth ) / 2;
 		const deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );
 		const doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;
 		const singleSegment = 1 - doubleSegment;
@@ -135,17 +128,14 @@ function ResizableFrame( {
 
 		const updatedWidth = startingWidth + delta.width;
 
-		setIsOversized( updatedWidth > initialComputedWidthRef.current );
+		setIsOversized( updatedWidth > defaultSize.width );
 
 		// Width will be controlled by the library (via `resizeRatio`),
 		// so we only need to update the height.
 		setFrameSize( {
 			height: isOversized
 				? '100%'
-				: calculateNewHeight(
-						updatedWidth,
-						initialAspectRatioRef.current
-				  ),
+				: calculateNewHeight( updatedWidth, defaultAspectRatio ),
 		} );
 	};
 
@@ -186,15 +176,12 @@ function ResizableFrame( {
 				FRAME_MIN_WIDTH,
 				frameRef.current.resizable.offsetWidth + delta
 			),
-			initialComputedWidthRef.current
+			defaultSize.width
 		);
 
 		setFrameSize( {
 			width: newWidth,
-			height: calculateNewHeight(
-				newWidth,
-				initialAspectRatioRef.current
-			),
+			height: calculateNewHeight( newWidth, defaultAspectRatio ),
 		} );
 	};
 
@@ -291,9 +278,7 @@ function ResizableFrame( {
 									undefined
 								}
 								aria-valuemin={ FRAME_MIN_WIDTH }
-								aria-valuemax={
-									initialComputedWidthRef.current
-								}
+								aria-valuemax={ defaultSize.width }
 								onKeyDown={ handleResizableHandleKeyDown }
 								initial="hidden"
 								exit="hidden"

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

@@ -11,6 +11,7 @@ import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,6 +24,8 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
@@ -31,7 +34,7 @@ export default function SidebarNavigationScreen( {
 	content,
 	footer,
 	description,
-	backPath,
+	backPath: backPathProp,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -40,6 +43,7 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
+	const location = useLocation();
 	const navigator = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
@@ -56,13 +60,17 @@ export default function SidebarNavigationScreen( {
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isRoot && ! backPath && (
+					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								if ( navigator.location.isInitial ) {
-									navigator.goToParent( { replace: true } );
+								const backPath =
+									backPathProp ?? location.state?.backPath;
+								if ( backPath ) {
+									navigator.goTo( backPath, {
+										isBack: true,
+									} );
 								} else {
-									navigator.goBack();
+									navigator.goToParent();
 								}
 							} }
 							icon={ icon }
@@ -70,16 +78,6 @@ export default function SidebarNavigationScreen( {
 							showTooltip={ false }
 						/>
 					) }
-					{ ! isRoot && backPath && (
-						<SidebarButton
-							onClick={ () =>
-								navigator.goTo( backPath, { isBack: true } )
-							}
-							icon={ icon }
-							label={ __( 'Back' ) }
-							showTooltip={ false }
-						/>
-					) }
 					{ isRoot && (
 						<SidebarButton
 							icon={ icon }

package/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -23,10 +23,12 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
+import { getPathFromURL } from '../sync-state-with-url/use-sync-path-with-url';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
+	const location = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -63,22 +65,32 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
-				history.push( {
-					postType: attributes.type,
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: attributes.type,
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: 'page',
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 		},
 		[ history ]

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

@@ -28,10 +28,15 @@ import { unlock } from '../../lock-unlock';
 const { useHistory } = unlock( routerPrivateApis );
 
 const PageItem = ( { postType = 'page', postId, ...props } ) => {
-	const linkInfo = useLink( {
-		postType,
-		postId,
-	} );
+	const linkInfo = useLink(
+		{
+			postType,
+			postId,
+		},
+		{
+			backPath: '/page',
+		}
+	);
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 

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

@@ -10,7 +10,6 @@ import {
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
@@ -24,7 +23,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-patterns/utils';
-import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useMyPatterns from './use-my-patterns';
@@ -106,11 +104,6 @@ export default function SidebarNavigationScreenPatterns() {
 	const { patternCategories, hasPatterns } = usePatternCategories();
 	const { myPatterns } = useMyPatterns();
 
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
-
 	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
@@ -129,7 +122,6 @@ export default function SidebarNavigationScreenPatterns() {
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'