Fix navigate regions shortcuts on the back button WP logo slot (WordP…

…ress#63611) * Avoid to pass unnecessary props to useNavigateRegions. * Remove bubblesVirtually from WP logo slot. * Restore bubblesVirtually. * Move useNavigateRegions to an outermost ancestor. * Remove no longer used enableRegionNavigation prop. * Add changelog entry --------- Co-authored-by: afercia <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: kevin940726 <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: youknowriad <[email protected]>
MaxMood96 · Oct 8, 2024 · b6c3f8f · b6c3f8f
1 parent 6bf18c2
commit b6c3f8f
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 115 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -47,6 +47,7 @@ import {
 	SlotFillProvider,
 	Tooltip,
 	VisuallyHidden,
+	__unstableUseNavigateRegions as useNavigateRegions,
 } from '@wordpress/components';
 import {
 	useMediaQuery,
@@ -482,6 +483,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,
 	} );
@@ -567,47 +570,53 @@ function Layout( {
 			<ErrorBoundary>
 				<CommandMenu />
 				<WelcomeGuide postType={ currentPostType } />
-				<Editor
-					settings={ editorSettings }
-					initialEdits={ initialEdits }
-					postType={ currentPostType }
-					postId={ currentPostId }
-					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={
-						showMetaBoxes && <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={ currentPostType }
+						postId={ currentPostId }
+						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={
+							showMetaBoxes && <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-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -230,7 +230,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						'show-icon-labels': showIconLabels,
 					} ) }
 					styles={ styles }
-					enableRegionNavigation={ false }
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -20,7 +20,6 @@ import {
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
@@ -57,28 +56,13 @@ export default function Layout( { route } ) {
 	useCommands();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
-	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
-		( select ) => {
-			const { getAllShortcutKeyCombinations } = select(
-				keyboardShortcutsStore
-			);
-			const { getCanvasMode } = unlock( select( editSiteStore ) );
-			return {
-				canvasMode: getCanvasMode(),
-				previousShortcut: getAllShortcutKeyCombinations(
-					'core/editor/previous-region'
-				),
-				nextShortcut: getAllShortcutKeyCombinations(
-					'core/editor/next-region'
-				),
-			};
-		},
-		[]
-	);
-	const navigateRegionsProps = useNavigateRegions( {
-		previous: previousShortcut,
-		next: nextShortcut,
-	} );
+	const { canvasMode } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		return {
+			canvasMode: getCanvasMode(),
+		};
+	}, [] );
+	const navigateRegionsProps = useNavigateRegions();
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();

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/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
@@ -11,7 +11,6 @@ import {
 	store as interfaceStore,
 } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -43,8 +42,6 @@ function Interface( { blockEditorSettings } ) {
 		hasSidebarEnabled,
 		isInserterOpened,
 		isListViewOpened,
-		previousShortcut,
-		nextShortcut,
 	} = useSelect(
 		( select ) => ( {
 			hasSidebarEnabled: !! select(
@@ -56,14 +53,6 @@ function Interface( { blockEditorSettings } ) {
 				'core/edit-widgets',
 				'showBlockBreadcrumbs'
 			),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations(
-				'core/edit-widgets/previous-region'
-			),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-widgets/next-region' ),
 		} ),
 		[]
 	);
@@ -112,10 +101,6 @@ function Interface( { blockEditorSettings } ) {
 					</div>
 				)
 			}
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
 		/>
 	);
 }

diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
@@ -15,7 +15,6 @@ import {
 	BlockBreadcrumb,
 	BlockToolbar,
 } from '@wordpress/block-editor';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
 import { useState, useCallback } from '@wordpress/element';
 
@@ -49,7 +48,6 @@ const interfaceLabels = {
 
 export default function EditorInterface( {
 	className,
-	enableRegionNavigation,
 	styles,
 	children,
 	forceIsDirty,
@@ -69,8 +67,6 @@ export default function EditorInterface( {
 		isListViewOpened,
 		isDistractionFree,
 		isPreviewMode,
-		previousShortcut,
-		nextShortcut,
 		showBlockBreadcrumbs,
 		documentLabel,
 		isZoomOut,
@@ -88,12 +84,6 @@ export default function EditorInterface( {
 			isListViewOpened: select( editorStore ).isListViewOpened(),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isPreviewMode: editorSettings.__unstableIsPreviewMode,
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
@@ -121,7 +111,6 @@ export default function EditorInterface( {
 
 	return (
 		<InterfaceSkeleton
-			enableRegionNavigation={ enableRegionNavigation }
 			isDistractionFree={ isDistractionFree }
 			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
@@ -231,10 +220,6 @@ export default function EditorInterface( {
 					  )
 					: undefined
 			}
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
 		/>
 	);
 }
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   `InterfaceSkeleton` no longer supports region navigation and its props `enableRegionNavigation` and `shortcuts` are removed. ([#63611](https://github.com/WordPress/gutenberg/pull/63611)). It’s recommended to add region navigation with the higher-order component `navigateRegions` or the hook `__unstableUseNavigateRegions` from `@wordpress/components`.
+
 ## 6.9.0 (2024-10-03)
 
 ## 6.8.0 (2024-09-19)

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,10 +83,6 @@ function InterfaceSkeleton(
 		actions,
 		labels,
 		className,
-		enableRegionNavigation = true,
-		// Todo: does this need to be a prop.
-		// Can we use a dependency to keyboard-shortcuts directly?
-		shortcuts,
 	},
 	ref
 ) {
@@ -101,7 +95,6 @@ function InterfaceSkeleton(
 		duration: disableMotion ? 0 : ANIMATION_DURATION,
 		ease: [ 0.6, 0, 0.4, 1 ],
 	};
-	const navigateRegionsProps = useNavigateRegions( shortcuts );
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
@@ -123,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'
 			) }
 		>