diff --git a/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md b/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md index 00080dd9b41530..9db8ab7ce2d362 100644 --- 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`: Shortcuts. +# **getCategoryShortcuts** + +Returns the shortcut names list for a given category name. + +_Parameters_ + +- _state_ `Object`: Global state. +- _name_ `string`: Category name. + +_Returns_ + +- `Array`: Shortcut names. + # **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 index 3259707632cd94..a568851e6d6b1f 100644 --- 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 index 04e3ebf7e75fc0..ebabc14ca3b747 100644 --- 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 } ) => ( ); +const ShortcutCategorySection = ( { + title, + categoryName, + additionalShortcuts = [], +} ) => { + const categoryShortcuts = useSelect( + ( select ) => { + return select( 'core/keyboard-shortcuts' ).getCategoryShortcuts( + categoryName + ); + }, + [ categoryName ] + ); + + return ( + + ); +}; + 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' ] } /> - - - - - - [ 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 ] +);