Refactor edit post shortcuts to use the keyboard-shortcuts package

docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md

@@ -45,6 +45,20 @@ _Returns_
 
 -   `?WPShortcutKeyCombination`: Key combination.
 
+<a name="getShortcutRepresentation" href="#getShortcutRepresentation">#</a> **getShortcutRepresentation**
+
+Returns a string representing the main key combination for a given shortcut name.
+
+_Parameters_
+
+-   _state_ `Object`: Global state.
+-   _name_ `string`: Shortcut name.
+-   _representation_ `string`: Type of reprensentation. (display, raw, ariaLabel )
+
+_Returns_
+
+-   `string`: Shortcut representation.
+
 
 <!-- END TOKEN(Autogenerated selectors) -->
 

packages/block-editor/src/components/block-settings-menu/index.js

@@ -14,7 +14,6 @@ import {
 	MenuItem,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -37,24 +36,15 @@ export function BlockSettingsMenu( { clientIds } ) {
 	const firstBlockClientId = blockClientIds[ 0 ];
 
 	const shortcuts = useSelect( ( select ) => {
-		const { getShortcutKeyCombination } = select( 'core/keyboard-shortcuts' );
+		const { getShortcutRepresentation } = select( 'core/keyboard-shortcuts' );
 		return {
-			duplicate: getShortcutKeyCombination( 'core/block-editor/duplicate' ),
-			remove: getShortcutKeyCombination( 'core/block-editor/remove' ),
-			insertAfter: getShortcutKeyCombination( 'core/block-editor/insert-after' ),
-			insertBefore: getShortcutKeyCombination( 'core/block-editor/insert-before' ),
+			duplicate: getShortcutRepresentation( 'core/block-editor/duplicate' ),
+			remove: getShortcutRepresentation( 'core/block-editor/remove' ),
+			insertAfter: getShortcutRepresentation( 'core/block-editor/insert-after' ),
+			insertBefore: getShortcutRepresentation( 'core/block-editor/insert-before' ),
 		};
 	}, [] );
 
-	const getShortcutDisplay = ( shortcut ) => {
-		if ( ! shortcut ) {
-			return null;
-		}
-		return shortcut.modifier ?
-			displayShortcut[ shortcut.modifier ]( shortcut.character ) :
-			shortcut.character;
-	};
-
 	return (
 		<BlockActions clientIds={ clientIds }>
 			{ ( {
@@ -94,7 +84,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 											className="block-editor-block-settings-menu__control"
 											onClick={ flow( onClose, onDuplicate ) }
 											icon="admin-page"
-											shortcut={ getShortcutDisplay( shortcuts.duplicate ) }
+											shortcut={ shortcuts.duplicate }
 										>
 											{ __( 'Duplicate' ) }
 										</MenuItem>
@@ -105,15 +95,15 @@ export function BlockSettingsMenu( { clientIds } ) {
 												className="block-editor-block-settings-menu__control"
 												onClick={ flow( onClose, onInsertBefore ) }
 												icon="insert-before"
-												shortcut={ getShortcutDisplay( shortcuts.insertBefore ) }
+												shortcut={ shortcuts.insertBefore }
 											>
 												{ __( 'Insert Before' ) }
 											</MenuItem>
 											<MenuItem
 												className="block-editor-block-settings-menu__control"
 												onClick={ flow( onClose, onInsertAfter ) }
 												icon="insert-after"
-												shortcut={ getShortcutDisplay( shortcuts.insertAfter ) }
+												shortcut={ shortcuts.insertAfter }
 											>
 												{ __( 'Insert After' ) }
 											</MenuItem>
@@ -135,7 +125,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 											className="block-editor-block-settings-menu__control"
 											onClick={ flow( onClose, onRemove ) }
 											icon="trash"
-											shortcut={ getShortcutDisplay( shortcuts.remove ) }
+											shortcut={ shortcuts.remove }
 										>
 											{ _n( 'Remove Block', 'Remove Blocks', count ) }
 										</MenuItem>

packages/edit-post/package.json

@@ -35,6 +35,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",

packages/edit-post/src/components/header/index.js

@@ -7,8 +7,7 @@ import {
 	PostPreviewButton,
 	PostSavedState,
 } from '@wordpress/editor';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,17 +17,28 @@ import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PinnedPlugins from './pinned-plugins';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
-import shortcuts from '../../keyboard-shortcuts';
 
-function Header( {
-	closeGeneralSidebar,
-	hasActiveMetaboxes,
-	isEditorSidebarOpened,
-	isPublishSidebarOpened,
-	isSaving,
-	openGeneralSidebar,
-} ) {
-	const toggleGeneralSidebar = isEditorSidebarOpened ? closeGeneralSidebar : openGeneralSidebar;
+function Header() {
+	const {
+		shortcut,
+		hasActiveMetaboxes,
+		isEditorSidebarOpened,
+		isPublishSidebarOpened,
+		isSaving,
+		getBlockSelectionStart,
+	} = useSelect( ( select ) => ( {
+		shortcut: select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
+		isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
+		isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
+		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
+		getBlockSelectionStart: select( 'core/block-editor' ).getBlockSelectionStart,
+	} ), [] );
+	const { openGeneralSidebar, closeGeneralSidebar } = useDispatch( 'core/edit-post' );
+
+	const toggleGeneralSidebar = isEditorSidebarOpened ?
+		closeGeneralSidebar :
+		() => openGeneralSidebar( getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document' );
 
 	return (
 		<div className="edit-post-header">
@@ -62,7 +72,7 @@ function Header( {
 					onClick={ toggleGeneralSidebar }
 					isPressed={ isEditorSidebarOpened }
 					aria-expanded={ isEditorSidebarOpened }
-					shortcut={ shortcuts.toggleSidebar }
+					shortcut={ shortcut }
 				/>
 				<PinnedPlugins.Slot />
 				<MoreMenu />
@@ -71,20 +81,4 @@ function Header( {
 	);
 }
 
-export default compose(
-	withSelect( ( select ) => ( {
-		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
-		isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
-		isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
-		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
-	} ) ),
-	withDispatch( ( dispatch, ownProps, { select } ) => {
-		const { getBlockSelectionStart } = select( 'core/block-editor' );
-		const { openGeneralSidebar, closeGeneralSidebar } = dispatch( 'core/edit-post' );
-
-		return {
-			openGeneralSidebar: () => openGeneralSidebar( getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document' ),
-			closeGeneralSidebar,
-		};
-	} ),
-)( Header );
+export default Header;

packages/edit-post/src/components/header/mode-switcher/index.js

@@ -3,13 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import shortcuts from '../../../keyboard-shortcuts';
 /**
  * Set of available mode options.
  *
@@ -26,37 +21,42 @@ const MODES = [
 	},
 ];
 
-function ModeSwitcher( { onSwitch, mode } ) {
+function ModeSwitcher() {
+	const {
+		shortcut,
+		isRichEditingEnabled,
+		isCodeEditingEnabled,
+		mode,
+	} = useSelect( ( select ) => ( {
+		shortcut: select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
+		isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
+		isCodeEditingEnabled: select( 'core/editor' ).getEditorSettings().codeEditingEnabled,
+		mode: select( 'core/edit-post' ).getEditorMode(),
+	} ), [] );
+	const { switchEditorMode } = useDispatch( 'core/edit-post' );
+
 	const choices = MODES.map( ( choice ) => {
 		if ( choice.value !== mode ) {
-			return { ...choice, shortcut: shortcuts.toggleEditorMode.display };
+			return { ...choice, shortcut };
 		}
 		return choice;
 	} );
 
+	if ( ! isRichEditingEnabled || ! isCodeEditingEnabled ) {
+		return null;
+	}
+
 	return (
 		<MenuGroup
 			label={ __( 'Editor' ) }
 		>
 			<MenuItemsChoice
 				choices={ choices }
 				value={ mode }
-				onSelect={ onSwitch }
+				onSelect={ switchEditorMode }
 			/>
 		</MenuGroup>
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => ( {
-		isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
-		isCodeEditingEnabled: select( 'core/editor' ).getEditorSettings().codeEditingEnabled,
-		mode: select( 'core/edit-post' ).getEditorMode(),
-	} ) ),
-	ifCondition( ( { isRichEditingEnabled, isCodeEditingEnabled } ) => isRichEditingEnabled && isCodeEditingEnabled ),
-	withDispatch( ( dispatch ) => ( {
-		onSwitch( mode ) {
-			dispatch( 'core/edit-post' ).switchEditorMode( mode );
-		},
-	} ) ),
-] )( ModeSwitcher );
+export default ModeSwitcher;

packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js

@@ -9,8 +9,6 @@ const {
 	primary,
 	// Shift+Cmd+<key> on a mac, Ctrl+Shift+<key> elsewhere.
 	primaryShift,
-	// Shift+Alt+Cmd+<key> on a mac, Ctrl+Shift+Akt+<key> elsewhere.
-	secondary,
 	// Ctrl+Alt+<key> on a mac, Shift+Alt+<key> elsewhere.
 	access,
 	ctrl,
@@ -29,11 +27,7 @@ export const globalShortcuts = [
 	'core/editor/save',
 	'core/editor/undo',
 	'core/editor/redo',
-	{
-		keyCombination: primaryShift( ',' ),
-		description: __( 'Show or hide the settings sidebar.' ),
-		ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
-	},
+	'core/edit-post/toggle-sidebar',
 	{
 		keyCombination: access( 'o' ),
 		description: __( 'Open the block navigation menu.' ),
@@ -60,10 +54,7 @@ export const globalShortcuts = [
 		keyCombination: alt( 'F10' ),
 		description: __( 'Navigate to the nearest toolbar.' ),
 	},
-	{
-		keyCombination: secondary( 'm' ),
-		description: __( 'Switch between Visual editor and Code editor.' ),
-	},
+	'core/edit-post/toggle-mode',
 ];
 
 export const textFormattingShortcuts = [

packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -39,17 +39,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
           "core/editor/save",
           "core/editor/undo",
           "core/editor/redo",
-          Object {
-            "ariaLabel": "Control + Shift + Comma",
-            "description": "Show or hide the settings sidebar.",
-            "keyCombination": Array [
-              "Ctrl",
-              "+",
-              "Shift",
-              "+",
-              ",",
-            ],
-          },
+          "core/edit-post/toggle-sidebar",
           Object {
             "description": "Open the block navigation menu.",
             "keyCombination": Array [
@@ -108,18 +98,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
               "F10",
             ],
           },
-          Object {
-            "description": "Switch between Visual editor and Code editor.",
-            "keyCombination": Array [
-              "Ctrl",
-              "+",
-              "Shift",
-              "+",
-              "Alt",
-              "+",
-              "M",
-            ],
-          },
+          "core/edit-post/toggle-mode",
         ]
       }
       title="Global shortcuts"