@wordpress/edit-site 5.12.9 → 5.12.11

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.9",
+	"version": "5.12.11",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,40 +29,40 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
-		"@wordpress/block-editor": "^12.3.7",
-		"@wordpress/block-library": "^8.12.9",
-		"@wordpress/blocks": "^12.12.3",
-		"@wordpress/commands": "^0.6.7",
-		"@wordpress/components": "^25.1.7",
+		"@wordpress/block-editor": "^12.3.9",
+		"@wordpress/block-library": "^8.12.11",
+		"@wordpress/blocks": "^12.12.5",
+		"@wordpress/commands": "^0.6.8",
+		"@wordpress/components": "^25.1.8",
 		"@wordpress/compose": "^6.12.1",
-		"@wordpress/core-commands": "^0.4.7",
-		"@wordpress/core-data": "^6.12.7",
-		"@wordpress/data": "^9.5.3",
+		"@wordpress/core-commands": "^0.4.9",
+		"@wordpress/core-data": "^6.12.9",
+		"@wordpress/data": "^9.5.4",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
-		"@wordpress/editor": "^13.12.7",
+		"@wordpress/editor": "^13.12.9",
 		"@wordpress/element": "^5.12.1",
 		"@wordpress/escape-html": "^2.35.1",
 		"@wordpress/hooks": "^3.35.1",
 		"@wordpress/html-entities": "^3.35.1",
 		"@wordpress/i18n": "^4.35.1",
 		"@wordpress/icons": "^9.26.2",
-		"@wordpress/interface": "^5.12.7",
-		"@wordpress/keyboard-shortcuts": "^4.12.3",
+		"@wordpress/interface": "^5.12.8",
+		"@wordpress/keyboard-shortcuts": "^4.12.4",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/media-utils": "^4.26.1",
-		"@wordpress/notices": "^4.3.3",
-		"@wordpress/plugins": "^6.3.7",
-		"@wordpress/preferences": "^3.12.7",
+		"@wordpress/notices": "^4.3.4",
+		"@wordpress/plugins": "^6.3.8",
+		"@wordpress/preferences": "^3.12.8",
 		"@wordpress/primitives": "^3.33.1",
-		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/reusable-blocks": "^4.12.7",
-		"@wordpress/router": "^0.4.1",
+		"@wordpress/private-apis": "^0.17.2",
+		"@wordpress/reusable-blocks": "^4.12.9",
+		"@wordpress/router": "^0.4.2",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/url": "^3.36.1",
-		"@wordpress/viewport": "^5.12.3",
-		"@wordpress/widgets": "^3.12.7",
+		"@wordpress/viewport": "^5.12.4",
+		"@wordpress/widgets": "^3.12.9",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5a52ea1ed29bbf8f3ead96f83b17d2c1cf84c880"
+	"gitHead": "ec0ed708e46a598ab2cf8e18bf2591b0102b5bb3"
 }

package/src/components/add-new-page/index.js

@@ -77,9 +77,6 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 			<form onSubmit={ createPage }>
 				<VStack spacing={ 3 }>
 					<TextControl
-						/* eslint-disable jsx-a11y/no-autofocus */
-						autoFocus
-						/* eslint-enable jsx-a11y/no-autofocus */
 						label={ __( 'Page title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }

package/src/components/add-new-pattern/index.js

@@ -5,6 +5,7 @@ import { DropdownMenu } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { plus, header, file } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -14,6 +15,7 @@ import CreatePatternModal from '../create-pattern-modal';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -22,6 +24,10 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -55,7 +61,7 @@ export default function AddNewPattern() {
 		<>
 			<DropdownMenu
 				controls={ [
-					{
+					! isTemplatePartsMode && {
 						icon: header,
 						onClick: () => setShowTemplatePartModal( true ),
 						title: __( 'Create template part' ),
@@ -65,7 +71,7 @@ export default function AddNewPattern() {
 						onClick: () => setShowPatternModal( true ),
 						title: __( 'Create pattern' ),
 					},
-				] }
+				].filter( Boolean ) }
 				toggleProps={ {
 					as: SidebarButton,
 				} }

package/src/components/editor/index.js

@@ -63,6 +63,18 @@ const typeLabels = {
 	wp_block: __( 'Pattern' ),
 };
 
+// Prevent accidental removal of certain blocks, asking the user for
+// confirmation.
+const blockRemovalRules = {
+	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
+	'core/post-content': __(
+		'Post Content displays the content of a post or page.'
+	),
+	'core/post-template': __(
+		'Post Template displays each post or page in a Query Loop.'
+	),
+};
+
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -197,7 +209,9 @@ export default function Editor( { isLoading } ) {
 									{ showVisualEditor && editedPost && (
 										<>
 											<BlockEditor />
-											<BlockRemovalWarningModal />
+											<BlockRemovalWarningModal
+												rules={ blockRemovalRules }
+											/>
 										</>
 									) }
 									{ editorMode === 'text' &&

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/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,20 +220,32 @@ export default function Layout() {
 							edit: { x: 0 },
 						} }
 						ref={ hubRef }
+						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
 
 					<AnimatePresence initial={ false }>
 						{ isEditorPage && isEditing && (
 							<NavigableRegion
+								key="header"
 								className="edit-site-layout__header"
 								ariaLabel={ __( 'Editor top bar' ) }
 								as={ motion.div }
 								variants={ {
-									isDistractionFree: { opacity: 0 },
-									isDistractionFreeHovering: { opacity: 1 },
-									view: { opacity: 1 },
-									edit: { opacity: 1 },
+									isDistractionFree: { opacity: 0, y: 0 },
+									isDistractionFreeHovering: {
+										opacity: 1,
+										y: 0,
+									},
+									view: { opacity: 1, y: '-100%' },
+									edit: { opacity: 1, y: 0 },
+								} }
+								exit={ {
+									y: '-100%',
+								} }
+								initial={ {
+									opacity: isDistractionFree ? 1 : 0,
+									y: isDistractionFree ? 0 : '-100%',
 								} }
 								transition={ {
 									type: 'tween',
@@ -239,51 +253,35 @@ export default function Layout() {
 									ease: 'easeOut',
 								} }
 							>
-								{ isEditing && <Header /> }
+								<Header />
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
 				</motion.div>
 
 				<div className="edit-site-layout__content">
-					<AnimatePresence initial={ false }>
-						{
-							<motion.div
-								initial={ {
-									opacity: 0,
-								} }
-								animate={
-									showSidebar
-										? { opacity: 1, display: 'block' }
-										: {
-												opacity: 0,
-												transitionEnd: {
-													display: 'none',
-												},
-										  }
-								}
-								exit={ {
-									opacity: 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"
-							>
-								<NavigableRegion
-									ariaLabel={ __( 'Navigation' ) }
-								>
-									<Sidebar />
-								</NavigableRegion>
-							</motion.div>
-						}
-					</AnimatePresence>
+					<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"
+					>
+						<NavigableRegion ariaLabel={ __( 'Navigation' ) }>
+							<Sidebar />
+						</NavigableRegion>
+					</motion.div>
 
 					<SavePanel />
 
@@ -320,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:
@@ -336,7 +340,12 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
-													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													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-actions/index.js

@@ -8,7 +8,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import DeletePageMenuItem from './delete-page-menu-item';
+import TrashPageMenuItem from './trash-page-menu-item';
 
 export default function PageActions( {
 	postId,
@@ -25,7 +25,7 @@ export default function PageActions( {
 		>
 			{ () => (
 				<MenuGroup>
-					<DeletePageMenuItem
+					<TrashPageMenuItem
 						postId={ postId }
 						onRemove={ onRemove }
 					/>

package/src/components/page-actions/{delete-page-menu-item.js → trash-page-menu-item.js}

@@ -3,17 +3,12 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
 
-export default function DeletePageMenuItem( { postId, onRemove } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
+export default function TrashPageMenuItem( { postId, onRemove } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
@@ -34,12 +29,12 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			createSuccessNotice(
 				sprintf(
 					/* translators: The page's title. */
-					__( '"%s" deleted.' ),
+					__( '"%s" moved to the Trash.' ),
 					decodeEntities( page.title.rendered )
 				),
 				{
 					type: 'snackbar',
-					id: 'edit-site-page-removed',
+					id: 'edit-site-page-trashed',
 				}
 			);
 			onRemove?.();
@@ -47,25 +42,18 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while deleting the page.' );
+					: __(
+							'An error occurred while moving the page to the trash.'
+					  );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		} finally {
-			setIsModalOpen( false );
 		}
 	}
 	return (
 		<>
-			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
-				{ __( 'Delete' ) }
+			<MenuItem onClick={ () => removePage() } isDestructive>
+				{ __( 'Move to Trash' ) }
 			</MenuItem>
-			<ConfirmDialog
-				isOpen={ isModalOpen }
-				onConfirm={ removePage }
-				onCancel={ () => setIsModalOpen( false ) }
-			>
-				{ __( 'Are you sure you want to delete this page?' ) }
-			</ConfirmDialog>
 		</>
 	);
 }

package/src/components/page-patterns/grid-item.js

@@ -174,7 +174,7 @@ function GridItem( { categoryId, item, ...props } ) {
 					spacing={ 3 }
 					className="edit-site-patterns__pattern-title"
 				>
-					{ itemIcon && (
+					{ itemIcon && ! isNonUserPattern && (
 						<Tooltip
 							position="top center"
 							text={ __(

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 );
 
@@ -57,11 +57,21 @@ export default function PatternsList( { categoryId, type } ) {
 
 	const [ syncFilter, setSyncFilter ] = useState( 'all' );
 	const deferredSyncedFilter = useDeferredValue( syncFilter );
-	const { patterns, isResolving } = usePatterns( type, categoryId, {
-		search: deferredFilterValue,
-		syncStatus:
-			deferredSyncedFilter === 'all' ? undefined : deferredSyncedFilter,
-	} );
+
+	const isUncategorizedThemePatterns =
+		type === PATTERNS && categoryId === 'uncategorized';
+
+	const { patterns, isResolving } = usePatterns(
+		type,
+		isUncategorizedThemePatterns ? '' : categoryId,
+		{
+			search: deferredFilterValue,
+			syncStatus:
+				deferredSyncedFilter === 'all'
+					? undefined
+					: deferredSyncedFilter,
+		}
+	);
 
 	const id = useId();
 	const titleId = `${ id }-title`;

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 || [],
@@ -93,11 +94,17 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 			blocks: parse( pattern.content ),
 		} ) );
 
-	patterns = searchItems( patterns, search, {
-		categoryId,
-		hasCategory: ( item, currentCategory ) =>
-			item.categories?.includes( currentCategory ),
-	} );
+	if ( categoryId ) {
+		patterns = searchItems( patterns, search, {
+			categoryId,
+			hasCategory: ( item, currentCategory ) =>
+				item.categories?.includes( currentCategory ),
+		} );
+	} else {
+		patterns = searchItems( patterns, search, {
+			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+		} );
+	}
 
 	return { patterns, isResolving: false };
 };

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

@@ -78,9 +78,10 @@ function calculateNewHeight( width, initialAspectRatio ) {
 
 function ResizableFrame( {
 	isFullWidth,
+	isOversized,
+	setIsOversized,
 	isReady,
 	children,
-	oversizedClassName,
 	innerContentStyle,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
@@ -88,7 +89,6 @@ 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(),
@@ -314,7 +314,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,13 +212,10 @@ 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="password"
+												type="text"
 											/>
 										) }
 									</BaseControl>