From 5c2964e012aa90dc1093e2cf76540f0758ee1376 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 23 Nov 2021 09:42:54 +0800 Subject: [PATCH] Fix site editor region navigation (#36709) * Implement shortcuts and labels * Use correct key for body * Fix focusing navigation sidebar when navigating regions * Only use detailed region labels when post type has loaded --- .../edit-site/src/components/editor/index.js | 17 ++++++- .../components/keyboard-shortcuts/index.js | 32 +++++++++++++ .../edit-site/src/components/list/index.js | 46 ++++++++++++++++++- .../components/list/use-register-shortcuts.js | 45 ++++++++++++++++++ .../components/interface-skeleton/index.js | 1 + 5 files changed, 139 insertions(+), 2 deletions(-) create mode 100644 packages/edit-site/src/components/list/use-register-shortcuts.js diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c5218c8a2593c..b1487e27e4b20 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -26,7 +26,10 @@ import { } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { PluginArea } from '@wordpress/plugins'; -import { ShortcutProvider } from '@wordpress/keyboard-shortcuts'; +import { + ShortcutProvider, + store as keyboardShortcutsStore, +} from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -62,6 +65,8 @@ function Editor( { initialSettings, onError } ) { template, templateResolved, isNavigationOpen, + previousShortcut, + nextShortcut, } = useSelect( ( select ) => { const { isInserterOpened, @@ -98,6 +103,12 @@ function Editor( { initialSettings, onError } ) { : false, entityId: postId, isNavigationOpen: isNavigationOpened(), + previousShortcut: select( + keyboardShortcutsStore + ).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ), + nextShortcut: select( + keyboardShortcutsStore + ).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ), }; }, [] ); const { updateEditorSettings } = useDispatch( editorStore ); @@ -282,6 +293,10 @@ function Editor( { initialSettings, onError } ) { } footer={ } + shortcuts={ { + previous: previousShortcut, + next: nextShortcut, + } } /> diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js index b8eaa6847ac3d..e549527615c67 100644 --- a/packages/edit-site/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js @@ -136,6 +136,38 @@ function KeyboardShortcutsRegister() { character: ',', }, } ); + + registerShortcut( { + name: 'core/edit-site/next-region', + category: 'global', + description: __( 'Navigate to the next part of the editor.' ), + keyCombination: { + modifier: 'ctrl', + character: '`', + }, + aliases: [ + { + modifier: 'access', + character: 'n', + }, + ], + } ); + + registerShortcut( { + name: 'core/edit-site/previous-region', + category: 'global', + description: __( 'Navigate to the previous part of the editor.' ), + keyCombination: { + modifier: 'ctrlShift', + character: '`', + }, + aliases: [ + { + modifier: 'access', + character: 'p', + }, + ], + } ); }, [ registerShortcut ] ); return null; diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js index a21499012e3ac..654dfc7fa4987 100644 --- a/packages/edit-site/src/components/list/index.js +++ b/packages/edit-site/src/components/list/index.js @@ -1,25 +1,65 @@ /** * WordPress dependencies */ +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; import { InterfaceSkeleton } from '@wordpress/interface'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies */ +import useRegisterShortcuts from './use-register-shortcuts'; import Header from './header'; import NavigationSidebar from '../navigation-sidebar'; import Table from './table'; export default function List( { templateType } ) { + useRegisterShortcuts(); const isDesktopViewport = useViewportMatch( 'medium' ); + const { previousShortcut, nextShortcut } = useSelect( ( select ) => { + return { + previousShortcut: select( + keyboardShortcutsStore + ).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ), + nextShortcut: select( + keyboardShortcutsStore + ).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ), + }; + }, [] ); + + const postType = useSelect( + ( select ) => select( coreStore ).getPostType( templateType ), + [ templateType ] + ); + + // `postType` could load in asynchronously. Only provide the detailed region labels if + // the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults. + const itemsListLabel = postType?.labels?.items_list; + const detailedRegionLabels = postType + ? { + header: sprintf( + // translators: %s - the name of the page, 'Header' as in the header area of that page. + __( '%s - Header' ), + itemsListLabel + ), + body: sprintf( + // translators: %s - the name of the page, 'Content' as in the content area of that page. + __( '%s - Content' ), + itemsListLabel + ), + } + : undefined; + return ( } drawer={ @@ -33,6 +73,10 @@ export default function List( { templateType } ) { } + shortcuts={ { + previous: previousShortcut, + next: nextShortcut, + } } /> ); } diff --git a/packages/edit-site/src/components/list/use-register-shortcuts.js b/packages/edit-site/src/components/list/use-register-shortcuts.js new file mode 100644 index 0000000000000..7fbdb02ab8c7d --- /dev/null +++ b/packages/edit-site/src/components/list/use-register-shortcuts.js @@ -0,0 +1,45 @@ +/** + * WordPress dependencies + */ + +import { useDispatch } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; + +export default function useRegisterShortcuts() { + const { registerShortcut } = useDispatch( keyboardShortcutsStore ); + useEffect( () => { + registerShortcut( { + name: 'core/edit-site/next-region', + category: 'global', + description: __( 'Navigate to the next part of the editor.' ), + keyCombination: { + modifier: 'ctrl', + character: '`', + }, + aliases: [ + { + modifier: 'access', + character: 'n', + }, + ], + } ); + + registerShortcut( { + name: 'core/edit-site/previous-region', + category: 'global', + description: __( 'Navigate to the previous part of the editor.' ), + keyCombination: { + modifier: 'ctrlShift', + character: '`', + }, + aliases: [ + { + modifier: 'access', + character: 'p', + }, + ], + } ); + }, [] ); +} diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 1f4c020dd7cf8..b7b3864820b65 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -83,6 +83,7 @@ function InterfaceSkeleton( className="interface-interface-skeleton__drawer" role="region" aria-label={ mergedLabels.drawer } + tabIndex="-1" > { drawer }