Move useNavigateRegions to an outermost ancestor.

WordPress · Sep 17, 2024 · 719f1d3 · 719f1d3
1 parent d9b4a42
commit 719f1d3
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 59 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -41,7 +41,11 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
-import { ResizableBox, SlotFillProvider } from '@wordpress/components';
+import {
+	ResizableBox,
+	SlotFillProvider,
+	__unstableUseNavigateRegions as useNavigateRegions,
+} from '@wordpress/components';
 import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -366,6 +370,8 @@ function Layout( {
 		document.body.classList.remove( 'show-icon-labels' );
 	}
 
+	const navigateRegionsProps = useNavigateRegions();
+
 	const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
 		'has-metaboxes': hasActiveMetaboxes,
 	} );
@@ -451,47 +457,53 @@ function Layout( {
 			<ErrorBoundary>
 				<CommandMenu />
 				<WelcomeGuide postType={ currentPost.postType } />
-				<Editor
-					settings={ editorSettings }
-					initialEdits={ initialEdits }
-					postType={ currentPost.postType }
-					postId={ currentPost.postId }
-					templateId={ templateId }
-					className={ className }
-					styles={ styles }
-					forceIsDirty={ hasActiveMetaboxes }
-					contentRef={ paddingAppenderRef }
-					disableIframe={ ! shouldIframe }
-					// We should auto-focus the canvas (title) on load.
-					// eslint-disable-next-line jsx-a11y/no-autofocus
-					autoFocus={ ! isWelcomeGuideVisible }
-					onActionPerformed={ onActionPerformed }
-					extraSidebarPanels={
-						! isEditingTemplate && <MetaBoxes location="side" />
-					}
-					extraContent={
-						! isDistractionFree &&
-						showMetaBoxes && (
-							<MetaBoxesMain isLegacy={ ! shouldIframe } />
-						)
-					}
+				<div
+					className={ navigateRegionsProps.className }
+					{ ...navigateRegionsProps }
+					ref={ navigateRegionsProps.ref }
 				>
-					<PostLockedModal />
-					<EditorInitialization />
-					<FullscreenMode isActive={ isFullscreenActive } />
-					<BrowserURL hasHistory={ hasHistory } />
-					<UnsavedChangesWarning />
-					<AutosaveMonitor />
-					<LocalAutosaveMonitor />
-					<EditPostKeyboardShortcuts />
-					<EditorKeyboardShortcutsRegister />
-					<BlockKeyboardShortcuts />
-					<InitPatternModal />
-					<PluginArea onError={ onPluginAreaError } />
-					<PostEditorMoreMenu />
-					{ backButton }
-					<EditorSnackbars />
-				</Editor>
+					<Editor
+						settings={ editorSettings }
+						initialEdits={ initialEdits }
+						postType={ currentPost.postType }
+						postId={ currentPost.postId }
+						templateId={ templateId }
+						className={ className }
+						styles={ styles }
+						forceIsDirty={ hasActiveMetaboxes }
+						contentRef={ paddingAppenderRef }
+						disableIframe={ ! shouldIframe }
+						// We should auto-focus the canvas (title) on load.
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus={ ! isWelcomeGuideVisible }
+						onActionPerformed={ onActionPerformed }
+						extraSidebarPanels={
+							! isEditingTemplate && <MetaBoxes location="side" />
+						}
+						extraContent={
+							! isDistractionFree &&
+							showMetaBoxes && (
+								<MetaBoxesMain isLegacy={ ! shouldIframe } />
+							)
+						}
+					>
+						<PostLockedModal />
+						<EditorInitialization />
+						<FullscreenMode isActive={ isFullscreenActive } />
+						<BrowserURL hasHistory={ hasHistory } />
+						<UnsavedChangesWarning />
+						<AutosaveMonitor />
+						<LocalAutosaveMonitor />
+						<EditPostKeyboardShortcuts />
+						<EditorKeyboardShortcutsRegister />
+						<BlockKeyboardShortcuts />
+						<InitPatternModal />
+						<PluginArea onError={ onPluginAreaError } />
+						<PostEditorMoreMenu />
+						{ backButton }
+						<EditorSnackbars />
+					</Editor>
+				</div>
 			</ErrorBoundary>
 		</SlotFillProvider>
 	);

diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
@@ -5,6 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { PluginArea } from '@wordpress/plugins';
 import { store as noticesStore } from '@wordpress/notices';
+import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,17 +32,25 @@ function Layout( { blockEditorSettings } ) {
 		);
 	}
 
+	const navigateRegionsProps = useNavigateRegions();
+
 	return (
 		<ErrorBoundary>
-			<WidgetAreasBlockEditorProvider
-				blockEditorSettings={ blockEditorSettings }
+			<div
+				className={ navigateRegionsProps.className }
+				{ ...navigateRegionsProps }
+				ref={ navigateRegionsProps.ref }
 			>
-				<Interface blockEditorSettings={ blockEditorSettings } />
-				<Sidebar />
-				<PluginArea onError={ onPluginAreaError } />
-				<UnsavedChangesWarning />
-				<WelcomeGuide />
-			</WidgetAreasBlockEditorProvider>
+				<WidgetAreasBlockEditorProvider
+					blockEditorSettings={ blockEditorSettings }
+				>
+					<Interface blockEditorSettings={ blockEditorSettings } />
+					<Sidebar />
+					<PluginArea onError={ onPluginAreaError } />
+					<UnsavedChangesWarning />
+					<WelcomeGuide />
+				</WidgetAreasBlockEditorProvider>
+			</div>
 		</ErrorBoundary>
 	);
 }

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -8,13 +8,11 @@ import clsx from 'clsx';
  */
 import { forwardRef, useEffect } from '@wordpress/element';
 import {
-	__unstableUseNavigateRegions as useNavigateRegions,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import {
-	useMergeRefs,
 	useReducedMotion,
 	useViewportMatch,
 	useResizeObserver,
@@ -85,7 +83,6 @@ function InterfaceSkeleton(
 		actions,
 		labels,
 		className,
-		enableRegionNavigation = true,
 	},
 	ref
 ) {
@@ -98,7 +95,6 @@ function InterfaceSkeleton(
 		duration: disableMotion ? 0 : ANIMATION_DURATION,
 		ease: [ 0.6, 0, 0.4, 1 ],
 	};
-	const navigateRegionsProps = useNavigateRegions();
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
@@ -120,15 +116,10 @@ function InterfaceSkeleton(
 
 	return (
 		<div
-			{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
-			ref={ useMergeRefs( [
-				ref,
-				enableRegionNavigation ? navigateRegionsProps.ref : undefined,
-			] ) }
+			ref={ ref }
 			className={ clsx(
 				className,
 				'interface-interface-skeleton',
-				navigateRegionsProps.className,
 				!! footer && 'has-footer'
 			) }
 		>