@wordpress/edit-site 5.12.8 → 5.12.10

package/build-style/style-rtl.css

@@ -1784,8 +1784,10 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-patterns {
-  background: rgba(0, 0, 0, 0.15);
+  border: 1px solid #2f2f2f;
+  background: none;
   margin: 60px 0 0;
+  border-radius: 0;
 }
 .edit-site-patterns .components-base-control {
   width: 100%;
@@ -1839,6 +1841,23 @@ body.is-fullscreen-mode .edit-site-list-header {
   background: #757575;
   color: #f0f0f0;
 }
+.edit-site-patterns .edit-site-patterns__grid-pagination {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary {
+  width: 32px;
+  height: 32px;
+  color: #f0f0f0;
+  background-color: #2f2f2f;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+  background: none;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
+  background-color: #757575;
+}
 
 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
   top: 0;
@@ -1849,6 +1868,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   grid-template-columns: 1fr;
   gap: 32px;
   padding-top: 2px;
+  margin-top: 0;
   margin-bottom: 32px;
 }
 @media (min-width: 960px) {
@@ -2658,6 +2678,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-layout__sidebar {
   z-index: 1;
   width: 100vw;
+  flex-shrink: 0;
 }
 @media (min-width: 782px) {
   .edit-site-layout__sidebar {
@@ -2967,12 +2988,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #e0e0e0;
   background: #2f2f2f;
 }
+.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current] .edit-site-sidebar-navigation-item__drilldown-indicator {
+  fill: #e0e0e0;
+}
 .edit-site-sidebar-navigation-item.components-item[aria-current] {
   background: var(--wp-admin-theme-color);
   color: #fff;
 }
 .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
-  fill: #757575;
+  fill: #949494;
 }
 .edit-site-sidebar-navigation-item.components-item:is(a) {
   text-decoration: none;
@@ -2983,6 +3007,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   box-shadow: none;
   outline: none;
 }
+.edit-site-sidebar-navigation-item.components-item:is(a):focus-visible {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
 .edit-site-sidebar-navigation-item.components-item.with-suffix {
   padding-left: 16px;
 }
@@ -3257,17 +3285,17 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 
 .edit-site-sidebar-navigation-screen-patterns__group {
-  margin-bottom: 32px;
+  margin-bottom: 24px;
 }
-.edit-site-sidebar-navigation-screen-patterns__group:last-of-type, .edit-site-sidebar-navigation-screen-patterns__group:first-of-type {
+.edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
   border-bottom: 0;
   padding-bottom: 0;
   margin-bottom: 0;
 }
-.edit-site-sidebar-navigation-screen-patterns__group:first-of-type {
-  margin-bottom: 32px;
-}
 
+.edit-site-sidebar-navigation-screen-patterns__group-header {
+  margin-top: 16px;
+}
 .edit-site-sidebar-navigation-screen-patterns__group-header p {
   color: #949494;
 }
@@ -3332,6 +3360,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-site-hub .edit-site-site-hub__container {
   gap: 0;
 }
+.edit-site-site-hub .edit-site-site-hub__site-title,
+.edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  transition: opacity ease 0.1s;
+}
 .edit-site-site-hub .edit-site-site-hub__site-view-link {
   flex-grow: 0;
 }
@@ -3531,6 +3563,14 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-resizable-frame__inner {
   position: relative;
 }
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__site-title,
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  opacity: 0 !important;
+}
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__view-mode-toggle-container {
+  background-color: transparent;
+}
+
 body:has(.edit-site-resizable-frame__inner.is-resizing) {
   cursor: col-resize;
   user-select: none;
@@ -3553,11 +3593,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
 .edit-site-resizable-frame__handle {
   align-items: center;
   background-color: rgba(117, 117, 117, 0.4);
+  border: 0;
   border-radius: 4px;
   cursor: col-resize;
   display: flex;
   height: 64px;
   justify-content: flex-end;
+  padding: 0;
   position: absolute;
   top: calc(50% - 32px);
   width: 4px;
@@ -3577,15 +3619,11 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   left: 100%;
   width: 32px;
 }
-.edit-site-resizable-frame__handle:hover, .is-resizing .edit-site-resizable-frame__handle {
-  background-color: var(--wp-admin-theme-color);
+.edit-site-resizable-frame__handle:focus-visible {
+  outline: 2px solid transparent;
 }
-.edit-site-resizable-frame__handle .edit-site-resizable-frame__handle-label {
-  background: var(--wp-admin-theme-color);
-  border-radius: 2px;
-  color: #fff;
-  margin-left: 8px;
-  padding: 4px 8px;
+.edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
+  background-color: var(--wp-admin-theme-color);
 }
 
 .edit-site-push-changes-to-global-styles-control .components-button {

package/build-style/style.css

@@ -1785,8 +1785,10 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-patterns {
-  background: rgba(0, 0, 0, 0.15);
+  border: 1px solid #2f2f2f;
+  background: none;
   margin: 60px 0 0;
+  border-radius: 0;
 }
 .edit-site-patterns .components-base-control {
   width: 100%;
@@ -1840,6 +1842,23 @@ body.is-fullscreen-mode .edit-site-list-header {
   background: #757575;
   color: #f0f0f0;
 }
+.edit-site-patterns .edit-site-patterns__grid-pagination {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary {
+  width: 32px;
+  height: 32px;
+  color: #f0f0f0;
+  background-color: #2f2f2f;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+  background: none;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
+  background-color: #757575;
+}
 
 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
   top: 0;
@@ -1850,6 +1869,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   grid-template-columns: 1fr;
   gap: 32px;
   padding-top: 2px;
+  margin-top: 0;
   margin-bottom: 32px;
 }
 @media (min-width: 960px) {
@@ -2659,6 +2679,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-layout__sidebar {
   z-index: 1;
   width: 100vw;
+  flex-shrink: 0;
 }
 @media (min-width: 782px) {
   .edit-site-layout__sidebar {
@@ -2968,12 +2989,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #e0e0e0;
   background: #2f2f2f;
 }
+.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current] .edit-site-sidebar-navigation-item__drilldown-indicator {
+  fill: #e0e0e0;
+}
 .edit-site-sidebar-navigation-item.components-item[aria-current] {
   background: var(--wp-admin-theme-color);
   color: #fff;
 }
 .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
-  fill: #757575;
+  fill: #949494;
 }
 .edit-site-sidebar-navigation-item.components-item:is(a) {
   text-decoration: none;
@@ -2984,6 +3008,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   box-shadow: none;
   outline: none;
 }
+.edit-site-sidebar-navigation-item.components-item:is(a):focus-visible {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
 .edit-site-sidebar-navigation-item.components-item.with-suffix {
   padding-right: 16px;
 }
@@ -3258,17 +3286,17 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 
 .edit-site-sidebar-navigation-screen-patterns__group {
-  margin-bottom: 32px;
+  margin-bottom: 24px;
 }
-.edit-site-sidebar-navigation-screen-patterns__group:last-of-type, .edit-site-sidebar-navigation-screen-patterns__group:first-of-type {
+.edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
   border-bottom: 0;
   padding-bottom: 0;
   margin-bottom: 0;
 }
-.edit-site-sidebar-navigation-screen-patterns__group:first-of-type {
-  margin-bottom: 32px;
-}
 
+.edit-site-sidebar-navigation-screen-patterns__group-header {
+  margin-top: 16px;
+}
 .edit-site-sidebar-navigation-screen-patterns__group-header p {
   color: #949494;
 }
@@ -3333,6 +3361,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-site-hub .edit-site-site-hub__container {
   gap: 0;
 }
+.edit-site-site-hub .edit-site-site-hub__site-title,
+.edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  transition: opacity ease 0.1s;
+}
 .edit-site-site-hub .edit-site-site-hub__site-view-link {
   flex-grow: 0;
 }
@@ -3532,6 +3564,14 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-resizable-frame__inner {
   position: relative;
 }
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__site-title,
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  opacity: 0 !important;
+}
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__view-mode-toggle-container {
+  background-color: transparent;
+}
+
 body:has(.edit-site-resizable-frame__inner.is-resizing) {
   cursor: col-resize;
   user-select: none;
@@ -3554,11 +3594,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
 .edit-site-resizable-frame__handle {
   align-items: center;
   background-color: rgba(117, 117, 117, 0.4);
+  border: 0;
   border-radius: 4px;
   cursor: col-resize;
   display: flex;
   height: 64px;
   justify-content: flex-end;
+  padding: 0;
   position: absolute;
   top: calc(50% - 32px);
   width: 4px;
@@ -3578,15 +3620,11 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   right: 100%;
   width: 32px;
 }
-.edit-site-resizable-frame__handle:hover, .is-resizing .edit-site-resizable-frame__handle {
-  background-color: var(--wp-admin-theme-color);
+.edit-site-resizable-frame__handle:focus-visible {
+  outline: 2px solid transparent;
 }
-.edit-site-resizable-frame__handle .edit-site-resizable-frame__handle-label {
-  background: var(--wp-admin-theme-color);
-  border-radius: 2px;
-  color: #fff;
-  margin-right: 8px;
-  padding: 4px 8px;
+.edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
+  background-color: var(--wp-admin-theme-color);
 }
 
 .edit-site-push-changes-to-global-styles-control .components-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.8",
+	"version": "5.12.10",
 	"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.6",
-		"@wordpress/block-library": "^8.12.8",
-		"@wordpress/blocks": "^12.12.3",
-		"@wordpress/commands": "^0.6.6",
-		"@wordpress/components": "^25.1.6",
+		"@wordpress/block-editor": "^12.3.8",
+		"@wordpress/block-library": "^8.12.10",
+		"@wordpress/blocks": "^12.12.4",
+		"@wordpress/commands": "^0.6.8",
+		"@wordpress/components": "^25.1.8",
 		"@wordpress/compose": "^6.12.1",
-		"@wordpress/core-commands": "^0.4.6",
-		"@wordpress/core-data": "^6.12.6",
-		"@wordpress/data": "^9.5.3",
+		"@wordpress/core-commands": "^0.4.8",
+		"@wordpress/core-data": "^6.12.8",
+		"@wordpress/data": "^9.5.4",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
-		"@wordpress/editor": "^13.12.6",
+		"@wordpress/editor": "^13.12.8",
 		"@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.6",
-		"@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.6",
-		"@wordpress/preferences": "^3.12.6",
+		"@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.6",
-		"@wordpress/router": "^0.4.1",
+		"@wordpress/private-apis": "^0.17.2",
+		"@wordpress/reusable-blocks": "^4.12.8",
+		"@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.6",
+		"@wordpress/viewport": "^5.12.4",
+		"@wordpress/widgets": "^3.12.8",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86ecd96b3bcada6b4cc35bb2455b3029cebb0ff3"
+	"gitHead": "cedb8caa943db47c16bdb4fa8880d506ce938fab"
 }

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/block-editor/index.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */

package/src/components/block-editor/use-site-editor-settings.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 /**
@@ -11,16 +11,21 @@ import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import inserterMediaCategories from './inserter-media-categories';
 
-export default function useSiteEditorSettings( templateType ) {
-	const { storedSettings, canvasMode } = useSelect( ( select ) => {
-		const { getSettings, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		return {
-			storedSettings: getSettings(),
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
+export default function useSiteEditorSettings() {
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
+	const { storedSettings, canvasMode, templateType } = useSelect(
+		( select ) => {
+			const { getSettings, getCanvasMode, getEditedPostType } = unlock(
+				select( editSiteStore )
+			);
+			return {
+				storedSettings: getSettings( setIsInserterOpened ),
+				canvasMode: getCanvasMode(),
+				templateType: getEditedPostType(),
+			};
+		},
+		[ setIsInserterOpened ]
+	);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0

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/layout/index.js

@@ -224,14 +224,25 @@ export default function Layout() {
 					<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 +250,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 />
 

package/src/components/layout/style.scss

@@ -61,6 +61,7 @@
 .edit-site-layout__sidebar {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
+	flex-shrink: 0;
 
 	@include break-medium {
 		width: $nav-sidebar-width;

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