From b6c3f8f3e23ba1679a9e38caed84dd914257f07a Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 8 Oct 2024 12:34:43 +0200 Subject: [PATCH] Fix navigate regions shortcuts on the back button WP logo slot (#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 Co-authored-by: stokesman Co-authored-by: kevin940726 Co-authored-by: Mamaduka Co-authored-by: getdave Co-authored-by: youknowriad --- .../edit-post/src/components/layout/index.js | 89 ++++++++++--------- .../edit-site/src/components/editor/index.js | 1 - .../edit-site/src/components/layout/index.js | 30 ++----- .../src/components/layout/index.js | 25 ++++-- .../src/components/layout/interface.js | 15 ---- .../src/components/editor-interface/index.js | 15 ---- packages/interface/CHANGELOG.md | 4 + .../components/interface-skeleton/index.js | 14 +-- 8 files changed, 78 insertions(+), 115 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 66fa9dd5d93b8..e7411fe8c3ab6 100644 --- 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( { - - } - extraContent={ - ! isDistractionFree && - showMetaBoxes && ( - - ) - } +
- - - - - - - - - - - - - - { backButton } - - + + } + extraContent={ + ! isDistractionFree && + showMetaBoxes && ( + + ) + } + > + + + + + + + + + + + + + + { backButton } + + +
); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 855225081236c..ae8749a3677af 100644 --- 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 && } diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index c54b7efa382c6..2619f7c96dcf7 100644 --- 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 index 54338d10fb850..4fc70a6c0c74e 100644 --- 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 ( - - - - - - - + + + + + + + + ); } diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js index ee46251eca224..bec40a6e83069 100644 --- 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 } ) { ) } - 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 index 0709b91175712..6dc4c3fe77060 100644 --- 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 ( ); } diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md index f590aeed5b6cc..985fed5a14043 100644 --- 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 index a1fd20b642206..0a49db4f159d8 100644 --- 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 (