Automatically render category keyboard shortcuts (#19965)

WordPress · Feb 5, 2020 · dbcaf38 · dbcaf38
1 parent 2c587e5
commit dbcaf38
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 52 deletions.
diff --git a/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md b/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md
@@ -19,6 +19,19 @@ _Returns_
 
 -   `Array<string>`: Shortcuts.
 
+<a name="getCategoryShortcuts" href="#getCategoryShortcuts">#</a> **getCategoryShortcuts**
+
+Returns the shortcut names list for a given category name.
+
+_Parameters_
+
+-   _state_ `Object`: Global state.
+-   _name_ `string`: Category name.
+
+_Returns_
+
+-   `Array<string>`: Shortcut names.
+
 <a name="getShortcutAliases" href="#getShortcutAliases">#</a> **getShortcutAliases**
 
 Returns the aliases for a given shortcut name.

diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -204,7 +204,7 @@ function KeyboardShortcutsRegister() {
 
 		registerShortcut( {
 			name: 'core/block-editor/unselect',
-			category: 'selections',
+			category: 'selection',
 			description: __( 'Clear selection.' ),
 			keyCombination: {
 				character: 'escape',

diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
@@ -10,7 +10,7 @@ import { isString } from 'lodash';
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { withSelect, withDispatch, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
 /**
@@ -64,6 +64,28 @@ const ShortcutSection = ( { title, shortcuts, className } ) => (
 	</section>
 );
 
+const ShortcutCategorySection = ( {
+	title,
+	categoryName,
+	additionalShortcuts = [],
+} ) => {
+	const categoryShortcuts = useSelect(
+		( select ) => {
+			return select( 'core/keyboard-shortcuts' ).getCategoryShortcuts(
+				categoryName
+			);
+		},
+		[ categoryName ]
+	);
+
+	return (
+		<ShortcutSection
+			title={ title }
+			shortcuts={ categoryShortcuts.concat( additionalShortcuts ) }
+		/>
+	);
+};
+
 export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
 	useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal, {
 		bindGlobal: true,
@@ -84,34 +106,20 @@ export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
 				className="edit-post-keyboard-shortcut-help-modal__main-shortcuts"
 				shortcuts={ [ 'core/edit-post/keyboard-shortcuts' ] }
 			/>
-			<ShortcutSection
+			<ShortcutCategorySection
 				title={ __( 'Global shortcuts' ) }
-				shortcuts={ [
-					'core/editor/save',
-					'core/editor/undo',
-					'core/editor/redo',
-					'core/edit-post/toggle-sidebar',
-					'core/edit-post/toggle-block-navigation',
-					'core/edit-post/next-region',
-					'core/edit-post/previous-region',
-					'core/block-editor/focus-toolbar',
-					'core/edit-post/toggle-mode',
-				] }
+				categoryName="global"
 			/>
-			<ShortcutSection
+
+			<ShortcutCategorySection
 				title={ __( 'Selection shortcuts' ) }
-				shortcuts={ [
-					'core/block-editor/select-all',
-					'core/block-editor/unselect',
-				] }
+				categoryName="selection"
 			/>
-			<ShortcutSection
+
+			<ShortcutCategorySection
 				title={ __( 'Block shortcuts' ) }
-				shortcuts={ [
-					'core/block-editor/duplicate',
-					'core/block-editor/remove',
-					'core/block-editor/insert-before',
-					'core/block-editor/insert-after',
+				categoryName="block"
+				additionalShortcuts={ [
 					{
 						keyCombination: { character: '/' },
 						description: __(

diff --git a/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
@@ -15,38 +15,17 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
       ]
     }
   />
-  <ShortcutSection
-    shortcuts={
-      Array [
-        "core/editor/save",
-        "core/editor/undo",
-        "core/editor/redo",
-        "core/edit-post/toggle-sidebar",
-        "core/edit-post/toggle-block-navigation",
-        "core/edit-post/next-region",
-        "core/edit-post/previous-region",
-        "core/block-editor/focus-toolbar",
-        "core/edit-post/toggle-mode",
-      ]
-    }
+  <ShortcutCategorySection
+    categoryName="global"
     title="Global shortcuts"
   />
-  <ShortcutSection
-    shortcuts={
-      Array [
-        "core/block-editor/select-all",
-        "core/block-editor/unselect",
-      ]
-    }
+  <ShortcutCategorySection
+    categoryName="selection"
     title="Selection shortcuts"
   />
-  <ShortcutSection
-    shortcuts={
+  <ShortcutCategorySection
+    additionalShortcuts={
       Array [
-        "core/block-editor/duplicate",
-        "core/block-editor/remove",
-        "core/block-editor/insert-before",
-        "core/block-editor/insert-after",
         Object {
           "ariaLabel": "Forward-slash",
           "description": "Change the block type after adding a new paragraph.",
@@ -56,6 +35,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
         },
       ]
     }
+    categoryName="block"
     title="Block shortcuts"
   />
   <ShortcutSection

diff --git a/packages/keyboard-shortcuts/src/store/selectors.js b/packages/keyboard-shortcuts/src/store/selectors.js
@@ -138,3 +138,20 @@ export const getAllShortcutRawKeyCombinations = createSelector(
 	},
 	( state, name ) => [ state[ name ] ]
 );
+
+/**
+ * Returns the shortcut names list for a given category name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Category name.
+ *
+ * @return {string[]} Shortcut names.
+ */
+export const getCategoryShortcuts = createSelector(
+	( state, categoryName ) => {
+		return Object.entries( state )
+			.filter( ( [ , shortcut ] ) => shortcut.category === categoryName )
+			.map( ( [ name ] ) => name );
+	},
+	( state ) => [ state ]
+);