Fix regression with Edit site Navigate regions (#52940)

* Make the navigabel region wrap the inert sidebar. * Adjust animation.
WordPress · Aug 1, 2023 · 1d8bb10 · 1d8bb10
1 parent 6903bb1
commit 1d8bb10
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -260,28 +260,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 />
 

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/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%;