Automatically render category keyboard shortcuts

WordPress · Jan 30, 2020 · d6166c4 · d6166c4
1 parent cfa9a97
commit d6166c4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 41 deletions.
diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -167,7 +167,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';
 
 /**
@@ -34,9 +34,9 @@ const ShortcutList = ( { shortcuts } ) => (
 				className="edit-post-keyboard-shortcut-help-modal__shortcut"
 				key={ index }
 			>
-				{ isString( shortcut ) ?
-					<DynamicShortcut name={ shortcut } /> :
-					<Shortcut { ...shortcut } />
+				{ isString( shortcut )
+					? <DynamicShortcut name={ shortcut } />
+					: <Shortcut { ...shortcut } />
 				}
 			</li>
 		) ) }
@@ -55,6 +55,19 @@ 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 } );
 
@@ -73,41 +86,25 @@ 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',
-					{
-						keyCombination: { character: '/' },
-						description: __( 'Change the block type after adding a new paragraph.' ),
-						/* translators: The forward-slash character. e.g. '/'. */
-						ariaLabel: __( 'Forward-slash' ),
-					},
-				] }
+				categoryName="block"
+				additionalShortcuts={ [ {
+					keyCombination: { character: '/' },
+					description: __( 'Change the block type after adding a new paragraph.' ),
+					/* translators: The forward-slash character. e.g. '/'. */
+					ariaLabel: __( 'Forward-slash' ),
+				} ] }
 			/>
 			<ShortcutSection
 				title={ __( 'Text formatting' ) }

diff --git a/packages/keyboard-shortcuts/src/store/selectors.js b/packages/keyboard-shortcuts/src/store/selectors.js
@@ -48,9 +48,9 @@ function getKeyCombinationRepresentation( shortcut, representation ) {
 		return null;
 	}
 
-	return shortcut.modifier ?
-		FORMATTING_METHODS[ representation ][ shortcut.modifier ]( shortcut.character ) :
-		shortcut.character;
+	return shortcut.modifier
+		? FORMATTING_METHODS[ representation ][ shortcut.modifier ]( shortcut.character )
+		: shortcut.character;
 }
 
 /**
@@ -101,9 +101,9 @@ export function getShortcutDescription( state, name ) {
  * @return {WPShortcutKeyCombination[]} Key combinations.
  */
 export function getShortcutAliases( state, name ) {
-	return state[ name ] && state[ name ].aliases ?
-		state[ name ].aliases :
-		EMPTY_ARRAY;
+	return state[ name ] && state[ name ].aliases
+		? state[ name ].aliases
+		: EMPTY_ARRAY;
 }
 
 /**
@@ -127,3 +127,20 @@ export const getAllShortcutRawKeyCombinations = createSelector(
 	},
 	( state, name ) => [ state[ name ] ]
 );
+
+/**
+ * Returns the shortcut names list for a give 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 ]
+);