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 }