@wordpress/edit-site 5.12.10 → 5.12.12

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

@@ -121,6 +121,8 @@ export default function Layout() {
 	const [ fullResizer ] = useResizeObserver();
 	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
+	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
+		useState( false );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -218,6 +220,7 @@ export default function Layout() {
 							edit: { x: 0 },
 						} }
 						ref={ hubRef }
+						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
 
@@ -315,7 +318,13 @@ export default function Layout() {
 											}
 											initial={ false }
 											layout="position"
-											className="edit-site-layout__canvas"
+											className={ classnames(
+												'edit-site-layout__canvas',
+												{
+													'is-right-aligned':
+														isResizableFrameOversized,
+												}
+											) }
 											transition={ {
 												type: 'tween',
 												duration:
@@ -331,7 +340,18 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
-													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													defaultSize={ {
+														width:
+															canvasSize.width -
+															24 /* $canvas-padding */,
+														height: canvasSize.height,
+													} }
+													isOversized={
+														isResizableFrameOversized
+													}
+													setIsOversized={
+														setIsResizableFrameOversized
+													}
 													innerContentStyle={ {
 														background:
 															gradientValue ??

package/src/components/layout/style.scss

@@ -121,7 +121,7 @@
 	justify-content: center;
 	align-items: center;
 
-	&:has(.edit-site-layout__resizable-frame-oversized) {
+	&.is-right-aligned {
 		justify-content: flex-end;
 	}
 

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

@@ -27,7 +27,7 @@ import usePatterns from './use-patterns';
 import SidebarButton from '../sidebar-button';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { unlock } from '../../lock-unlock';
-import { SYNC_TYPES, USER_PATTERN_CATEGORY } from './utils';
+import { SYNC_TYPES, USER_PATTERN_CATEGORY, PATTERNS } from './utils';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -58,9 +58,12 @@ export default function PatternsList( { categoryId, type } ) {
 	const [ syncFilter, setSyncFilter ] = useState( 'all' );
 	const deferredSyncedFilter = useDeferredValue( syncFilter );
 
+	const isUncategorizedThemePatterns =
+		type === PATTERNS && categoryId === 'uncategorized';
+
 	const { patterns, isResolving } = usePatterns(
 		type,
-		categoryId !== 'uncategorized' ? categoryId : '',
+		isUncategorizedThemePatterns ? '' : categoryId,
 		{
 			search: deferredFilterValue,
 			syncStatus:

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-patterns/use-patterns.js

@@ -86,6 +86,7 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 			( pattern ) => ! CORE_PATTERN_SOURCES.includes( pattern.source )
 		)
 		.filter( filterOutDuplicatesByName )
+		.filter( ( pattern ) => pattern.inserter !== false )
 		.map( ( pattern ) => ( {
 			...pattern,
 			keywords: pattern.keywords || [],

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,
@@ -78,9 +78,12 @@ function calculateNewHeight( width, initialAspectRatio ) {
 
 function ResizableFrame( {
 	isFullWidth,
+	isOversized,
+	setIsOversized,
 	isReady,
 	children,
-	oversizedClassName,
+	/** 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 );
@@ -88,29 +91,19 @@ function ResizableFrame( {
 	const [ startingWidth, setStartingWidth ] = useState();
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
-	const [ isOversized, setIsOversized ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
 	const canvasMode = useSelect(
 		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
 		[]
 	);
 	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"
@@ -314,7 +299,6 @@ function ResizableFrame( {
 			onResizeStop={ handleResizeStop }
 			className={ classnames( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
-				[ oversizedClassName ]: isOversized,
 			} ) }
 		>
 			<motion.div

package/src/components/resizable-frame/style.scss

@@ -1,23 +1,6 @@
 .edit-site-resizable-frame__inner {
 	position: relative;
 
-	&.edit-site-layout__resizable-frame-oversized {
-		@at-root {
-			body:has(&) {
-				.edit-site-site-hub {
-					.edit-site-site-hub__site-title,
-					.edit-site-site-hub_toggle-command-center {
-						opacity: 0 !important;
-					}
-
-					.edit-site-site-hub__view-mode-toggle-container {
-						background-color: transparent;
-					}
-				}
-			}
-		}
-	}
-
 	&.is-resizing {
 		@at-root {
 			body:has(&) {

package/src/components/sidebar-edit-mode/page-panels/page-status.js

@@ -212,11 +212,8 @@ export default function PageStatus( {
 													} )
 												}
 												value={ password }
-												/* eslint-disable jsx-a11y/no-autofocus */
-												autoFocus={ ! password }
-												/* eslint-enable jsx-a11y/no-autofocus */
 												placeholder={ __(
-													'Enter a secure password'
+													'Use a secure password'
 												) }
 												type="text"
 											/>

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.'

package/src/components/sidebar-navigation-screen-patterns/use-theme-patterns.js

@@ -36,7 +36,8 @@ export default function useThemePatterns() {
 					( pattern ) =>
 						! CORE_PATTERN_SOURCES.includes( pattern.source )
 				)
-				.filter( filterOutDuplicatesByName ),
+				.filter( filterOutDuplicatesByName )
+				.filter( ( pattern ) => pattern.inserter !== false ),
 		[ blockPatterns, restBlockPatterns ]
 	);