From d6f7eb11c3b5f156f76efcd8cb6bd246225495c2 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 26 Jan 2025 14:40:04 -0800
Subject: [PATCH] Move provider up/out to wrap mobile area

---
 .../edit-site/src/components/layout/index.js  | 145 +++++++++++-------
 .../edit-site/src/components/sidebar/index.js |  44 +-----
 2 files changed, 94 insertions(+), 95 deletions(-)

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index a5e14f0be8281..0a132819f3c1e 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -44,7 +44,7 @@ import { unlock } from '../../lock-unlock';
 import SaveKeyboardShortcut from '../save-keyboard-shortcut';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
-import SidebarContent from '../sidebar';
+import SidebarContent, { SidebarNavigationContext } from '../sidebar';
 import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
@@ -55,6 +55,30 @@ const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
+// Navigation state that is updated when navigating back or forward. Helps us
+// manage the animations and also focus.
+function createNavState() {
+	let state = {
+		direction: null,
+		focusSelector: null,
+	};
+
+	return {
+		get() {
+			return state;
+		},
+		navigate( direction, focusSelector = null ) {
+			state = {
+				direction,
+				focusSelector:
+					direction === 'forward' && focusSelector
+						? focusSelector
+						: state.focusSelector,
+			};
+		},
+	};
+}
+
 function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
 	const { canvas = 'view' } = query;
@@ -90,6 +114,8 @@ function Layout() {
 		// Should not depend on the previous canvas mode value but the next.
 	}, [ canvas ] );
 
+	const [ navState ] = useState( createNavState );
+
 	return (
 		<>
 			<UnsavedChangesWarning />
@@ -108,75 +134,76 @@ function Layout() {
 				) }
 			>
 				<div className="edit-site-layout__content">
-					{ /*
+					<SidebarNavigationContext.Provider value={ navState }>
+						{ /*
 						The NavigableRegion must always be rendered and not use
 						`inert` otherwise `useNavigateRegions` will fail.
 					*/ }
-					{ ( ! isMobileViewport || ! areas.mobile ) && (
-						<NavigableRegion
-							ariaLabel={ __( 'Navigation' ) }
-							className="edit-site-layout__sidebar-region"
-						>
-							<AnimatePresence>
-								{ canvas === 'view' && (
-									<motion.div
-										initial={ { opacity: 0 } }
-										animate={ { opacity: 1 } }
-										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"
-									>
-										<SiteHub
+						{ ( ! isMobileViewport || ! areas.mobile ) && (
+							<NavigableRegion
+								ariaLabel={ __( 'Navigation' ) }
+								className="edit-site-layout__sidebar-region"
+							>
+								<AnimatePresence>
+									{ canvas === 'view' && (
+										<motion.div
+											initial={ { opacity: 0 } }
+											animate={ { opacity: 1 } }
+											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"
+										>
+											<SiteHub
+												ref={ toggleRef }
+												isTransparent={
+													isResizableFrameOversized
+												}
+											/>
+											<SidebarContent
+												shouldAnimate={
+													routeKey !== 'styles'
+												}
+												routeKey={ routeKey }
+											>
+												<ErrorBoundary>
+													{ areas.sidebar }
+												</ErrorBoundary>
+											</SidebarContent>
+											<SaveHub />
+											<SavePanel />
+										</motion.div>
+									) }
+								</AnimatePresence>
+							</NavigableRegion>
+						) }
+
+						{ isMobileViewport && areas.mobile && (
+							<div className="edit-site-layout__mobile">
+								{ canvas !== 'edit' && (
+									<SidebarContent routeKey={ routeKey }>
+										<SiteHubMobile
 											ref={ toggleRef }
 											isTransparent={
 												isResizableFrameOversized
 											}
 										/>
-										<SidebarContent
-											shouldAnimate={
-												routeKey !== 'styles'
-											}
-											routeKey={ routeKey }
-										>
-											<ErrorBoundary>
-												{ areas.sidebar }
-											</ErrorBoundary>
-										</SidebarContent>
-										<SaveHub />
-										<SavePanel />
-									</motion.div>
+									</SidebarContent>
 								) }
-							</AnimatePresence>
-						</NavigableRegion>
-					) }
-
+								<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
+							</div>
+						) }
+					</SidebarNavigationContext.Provider>
 					<EditorSnackbars />
 
-					{ isMobileViewport && areas.mobile && (
-						<div className="edit-site-layout__mobile">
-							{ canvas !== 'edit' && (
-								<SidebarContent routeKey={ routeKey }>
-									<SiteHubMobile
-										ref={ toggleRef }
-										isTransparent={
-											isResizableFrameOversized
-										}
-									/>
-								</SidebarContent>
-							) }
-							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
-						</div>
-					) }
-
 					{ ! isMobileViewport &&
 						areas.content &&
 						canvas !== 'edit' && (
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 7ecd24719a47b..aa2e455699974 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -31,30 +31,6 @@ function focusSidebarElement( el, direction, focusSelector ) {
 	elementToFocus?.focus();
 }
 
-// Navigation state that is updated when navigating back or forward. Helps us
-// manage the animations and also focus.
-function createNavState() {
-	let state = {
-		direction: null,
-		focusSelector: null,
-	};
-
-	return {
-		get() {
-			return state;
-		},
-		navigate( direction, focusSelector = null ) {
-			state = {
-				direction,
-				focusSelector:
-					direction === 'forward' && focusSelector
-						? focusSelector
-						: state.focusSelector,
-			};
-		},
-	};
-}
-
 function SidebarContentWrapper( { children, shouldAnimate } ) {
 	const navState = useContext( SidebarNavigationContext );
 	const wrapperRef = useRef();
@@ -92,18 +68,14 @@ export default function SidebarContent( {
 	shouldAnimate,
 	children,
 } ) {
-	const [ navState ] = useState( createNavState );
-
 	return (
-		<SidebarNavigationContext.Provider value={ navState }>
-			<div className="edit-site-sidebar__content">
-				<SidebarContentWrapper
-					shouldAnimate={ shouldAnimate }
-					key={ routeKey }
-				>
-					{ children }
-				</SidebarContentWrapper>
-			</div>
-		</SidebarNavigationContext.Provider>
+		<div className="edit-site-sidebar__content">
+			<SidebarContentWrapper
+				shouldAnimate={ shouldAnimate }
+				key={ routeKey }
+			>
+				{ children }
+			</SidebarContentWrapper>
+		</div>
 	);
 }