Refactor the visual editor shortcuts to use the keyboard-shortcuts package

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

@@ -26,18 +26,9 @@ export const mainShortcuts = [
 ];
 
 export const globalShortcuts = [
-	{
-		keyCombination: primary( 's' ),
-		description: __( 'Save your changes.' ),
-	},
-	{
-		keyCombination: primary( 'z' ),
-		description: __( 'Undo your last changes.' ),
-	},
-	{
-		keyCombination: primaryShift( 'z' ),
-		description: __( 'Redo your last undo.' ),
-	},
+	'core/editor/save',
+	'core/editor/undo',
+	'core/editor/redo',
 	{
 		keyCombination: primaryShift( ',' ),
 		description: __( 'Show or hide the settings sidebar.' ),

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

@@ -36,32 +36,9 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
     <ShortcutSection
       shortcuts={
         Array [
-          Object {
-            "description": "Save your changes.",
-            "keyCombination": Array [
-              "Ctrl",
-              "+",
-              "S",
-            ],
-          },
-          Object {
-            "description": "Undo your last changes.",
-            "keyCombination": Array [
-              "Ctrl",
-              "+",
-              "Z",
-            ],
-          },
-          Object {
-            "description": "Redo your last undo.",
-            "keyCombination": Array [
-              "Ctrl",
-              "+",
-              "Shift",
-              "+",
-              "Z",
-            ],
-          },
+          "core/editor/save",
+          "core/editor/undo",
+          "core/editor/redo",
           Object {
             "ariaLabel": "Control + Shift + Comma",
             "description": "Show or hide the settings sidebar.",

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

@@ -12,11 +12,11 @@ import {
 	UnsavedChangesWarning,
 	EditorNotices,
 	PostPublishPanel,
+	EditorKeyboardShortcutsRegister,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockBreadcrumb,
-	BlockEditorKeyboardShortcuts,
 	__experimentalPageTemplatePicker,
 	__experimentalUsePageTemplatePickerVisible,
 } from '@wordpress/block-editor';
@@ -90,7 +90,7 @@ function Layout() {
 			<AutosaveMonitor />
 			<LocalAutosaveMonitor />
 			<EditorModeKeyboardShortcuts />
-			<BlockEditorKeyboardShortcuts.Register />
+			<EditorKeyboardShortcutsRegister />
 			<FocusReturnProvider>
 				<EditorRegions
 					className={ className }

packages/editor/package.json

@@ -40,6 +40,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
+		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",

packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
+
+function EditorKeyboardShortcutsRegister() {
+	// Registering the shortcuts
+	const { registerShortcut } = useDispatch( 'core/keyboard-shortcuts' );
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/save',
+			category: 'global',
+			description: __( 'Save your changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 's',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/undo',
+			category: 'global',
+			description: __( 'Undo your last changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'z',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/redo',
+			category: 'global',
+			description: __( 'Redo your last undo.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: 'z',
+			},
+		} );
+	}, [ registerShortcut ] );
+
+	return <BlockEditorKeyboardShortcuts.Register />;
+}
+
+export default EditorKeyboardShortcutsRegister;

packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js

@@ -1,50 +1,29 @@
 /**
  * WordPress dependencies
  */
-import { KeyboardShortcuts } from '@wordpress/components';
-import { rawShortcut } from '@wordpress/keycodes';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
 
-export function SaveShortcut( { onSave } ) {
-	return (
-		<KeyboardShortcuts
-			bindGlobal
-			shortcuts={ {
-				[ rawShortcut.primary( 's' ) ]: ( event ) => {
-					event.preventDefault();
-					onSave();
-				},
-			} }
-		/>
-	);
-}
+function SaveShortcut() {
+	const { savePost } = useDispatch( 'core/editor' );
+	const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );
+
+	useShortcut( 'core/editor/save', ( event ) => {
+		event.preventDefault();
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { isEditedPostDirty } = select( 'core/editor' );
+		// TODO: This should be handled in the `savePost` effect in
+		// considering `isSaveable`. See note on `isEditedPostSaveable`
+		// selector about dirtiness and meta-boxes.
+		//
+		// See: `isEditedPostSaveable`
+		if ( ! isEditedPostDirty() ) {
+			return;
+		}
 
-		return {
-			isDirty: isEditedPostDirty(),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps, { select } ) => {
-		const { savePost } = dispatch( 'core/editor' );
+		savePost();
+	}, { bindGlobal: true } );
 
-		return {
-			onSave() {
-				// TODO: This should be handled in the `savePost` effect in
-				// considering `isSaveable`. See note on `isEditedPostSaveable`
-				// selector about dirtiness and meta-boxes.
-				//
-				// See: `isEditedPostSaveable`
-				const { isEditedPostDirty } = select( 'core/editor' );
-				if ( ! isEditedPostDirty() ) {
-					return;
-				}
+	return null;
+}
 
-				savePost();
-			},
-		};
-	} ),
-] )( SaveShortcut );
+export default SaveShortcut;

packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js

@@ -1,10 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { KeyboardShortcuts } from '@wordpress/components';
-import { withDispatch } from '@wordpress/data';
-import { rawShortcut } from '@wordpress/keycodes';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
 
@@ -13,59 +11,50 @@ import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
  */
 import SaveShortcut from './save-shortcut';
 
-class VisualEditorGlobalKeyboardShortcuts extends Component {
-	constructor() {
-		super( ...arguments );
-		this.undoOrRedo = this.undoOrRedo.bind( this );
-	}
+function VisualEditorGlobalKeyboardShortcuts() {
+	const { redo, undo, savePost } = useDispatch( 'core/editor' );
+	const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );
 
-	undoOrRedo( event ) {
-		const { onRedo, onUndo } = this.props;
+	useShortcut( 'core/editor/undo', ( event ) => {
+		undo();
+		event.preventDefault();
+	}, { bindGlobal: true } );
 
-		if ( event.shiftKey ) {
-			onRedo();
-		} else {
-			onUndo();
-		}
+	useShortcut( 'core/editor/redo', ( event ) => {
+		redo();
+		event.preventDefault();
+	}, { bindGlobal: true } );
 
+	useShortcut( 'core/editor/save', ( event ) => {
 		event.preventDefault();
-	}
 
-	render() {
-		return (
-			<>
-				<BlockEditorKeyboardShortcuts />
-				<KeyboardShortcuts
-					shortcuts={ {
-						[ rawShortcut.primary( 'z' ) ]: this.undoOrRedo,
-						[ rawShortcut.primaryShift( 'z' ) ]: this.undoOrRedo,
-					} }
-				/>
-				<SaveShortcut />
-			</>
-		);
-	}
-}
+		// TODO: This should be handled in the `savePost` effect in
+		// considering `isSaveable`. See note on `isEditedPostSaveable`
+		// selector about dirtiness and meta-boxes.
+		//
+		// See: `isEditedPostSaveable`
+		if ( ! isEditedPostDirty() ) {
+			return;
+		}
 
-const EnhancedVisualEditorGlobalKeyboardShortcuts = withDispatch( ( dispatch ) => {
-	const {
-		redo,
-		undo,
-	} = dispatch( 'core/editor' );
+		savePost();
+	}, { bindGlobal: true } );
 
-	return {
-		onRedo: redo,
-		onUndo: undo,
-	};
-} )( VisualEditorGlobalKeyboardShortcuts );
+	return (
+		<>
+			<BlockEditorKeyboardShortcuts />
+			<SaveShortcut />
+		</>
+	);
+}
 
-export default EnhancedVisualEditorGlobalKeyboardShortcuts;
+export default VisualEditorGlobalKeyboardShortcuts;
 
 export function EditorGlobalKeyboardShortcuts() {
 	deprecated( 'EditorGlobalKeyboardShortcuts', {
 		alternative: 'VisualEditorGlobalKeyboardShortcuts',
 		plugin: 'Gutenberg',
 	} );
 
-	return <EnhancedVisualEditorGlobalKeyboardShortcuts />;
+	return <VisualEditorGlobalKeyboardShortcuts />;
 }

packages/editor/src/components/index.js

@@ -10,6 +10,7 @@ export {
 	EditorGlobalKeyboardShortcuts,
 } from './global-keyboard-shortcuts/visual-editor-shortcuts';
 export { default as TextEditorGlobalKeyboardShortcuts } from './global-keyboard-shortcuts/text-editor-shortcuts';
+export { default as EditorKeyboardShortcutsRegister } from './global-keyboard-shortcuts/register-shortcuts';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as EditorNotices } from './editor-notices';