From 7ba4e59533ad35d5bbac2a50d83266fe10a5ab1e Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 16 Jul 2024 13:48:06 +0200 Subject: [PATCH 1/6] Avoid to pass unnecessary props to useNavigateRegions. --- .../edit-site/src/components/layout/index.js | 30 +++++-------------- .../src/components/layout/interface.js | 15 ---------- .../src/components/editor-interface/index.js | 13 -------- .../components/interface-skeleton/index.js | 5 +--- 4 files changed, 8 insertions(+), 55 deletions(-) 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/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..03322db48d078 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'; @@ -69,8 +68,6 @@ export default function EditorInterface( { isListViewOpened, isDistractionFree, isPreviewMode, - previousShortcut, - nextShortcut, showBlockBreadcrumbs, documentLabel, isZoomOut, @@ -88,12 +85,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' ), @@ -231,10 +222,6 @@ export default function EditorInterface( { ) : undefined } - shortcuts={ { - previous: previousShortcut, - next: nextShortcut, - } } /> ); } diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index a1fd20b642206..4e630dd25e218 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -86,9 +86,6 @@ function InterfaceSkeleton( 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 +98,7 @@ function InterfaceSkeleton( duration: disableMotion ? 0 : ANIMATION_DURATION, ease: [ 0.6, 0, 0.4, 1 ], }; - const navigateRegionsProps = useNavigateRegions( shortcuts ); + const navigateRegionsProps = useNavigateRegions(); useHTMLClass( 'interface-interface-skeleton__html-container' ); const defaultLabels = { From 6b745474f188c04dccc2f4a1fc625391c5d00f57 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 16 Jul 2024 13:48:52 +0200 Subject: [PATCH 2/6] Remove bubblesVirtually from WP logo slot. --- packages/editor/src/components/header/back-button.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/editor/src/components/header/back-button.js b/packages/editor/src/components/header/back-button.js index a3d682f92970e..9dfe0856e6d92 100644 --- a/packages/editor/src/components/header/back-button.js +++ b/packages/editor/src/components/header/back-button.js @@ -20,12 +20,7 @@ const BackButton = Fill; const BackButtonSlot = () => { const fills = useSlotFills( slotName ); - return ( - - ); + return ; }; BackButton.Slot = BackButtonSlot; From 0682a443e15fde88cca8280aaa8c1b89b60cc337 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 19 Jul 2024 14:59:06 +0200 Subject: [PATCH 3/6] Restore bubblesVirtually. --- packages/editor/src/components/header/back-button.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/header/back-button.js b/packages/editor/src/components/header/back-button.js index 9dfe0856e6d92..a3d682f92970e 100644 --- a/packages/editor/src/components/header/back-button.js +++ b/packages/editor/src/components/header/back-button.js @@ -20,7 +20,12 @@ const BackButton = Fill; const BackButtonSlot = () => { const fills = useSlotFills( slotName ); - return ; + return ( + + ); }; BackButton.Slot = BackButtonSlot; From 1f96e8d93f8f8f53acd1161b573b97da9e5ff5fe Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 19 Jul 2024 15:37:10 +0200 Subject: [PATCH 4/6] Move useNavigateRegions to an outermost ancestor. --- .../edit-post/src/components/layout/index.js | 89 ++++++++++--------- .../src/components/layout/index.js | 25 ++++-- .../components/interface-skeleton/index.js | 11 +-- 3 files changed, 67 insertions(+), 58 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-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/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 4e630dd25e218..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,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 (
From bdab75ec7a6718035208eb11e12ce0f1defd6854 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 19 Jul 2024 15:51:26 +0200 Subject: [PATCH 5/6] Remove no longer used enableRegionNavigation prop. --- packages/edit-site/src/components/editor/index.js | 1 - packages/editor/src/components/editor-interface/index.js | 2 -- 2 files changed, 3 deletions(-) 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/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js index 03322db48d078..6dc4c3fe77060 100644 --- a/packages/editor/src/components/editor-interface/index.js +++ b/packages/editor/src/components/editor-interface/index.js @@ -48,7 +48,6 @@ const interfaceLabels = { export default function EditorInterface( { className, - enableRegionNavigation, styles, children, forceIsDirty, @@ -112,7 +111,6 @@ export default function EditorInterface( { return ( Date: Thu, 19 Sep 2024 23:12:25 -0700 Subject: [PATCH 6/6] Add changelog entry --- packages/interface/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) 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)