Format Library: Add keyboard shortcut for inline code (WordPress#41816)

* Format Library: Add keyboard shortcut for inline code * Update KeyboardShortcuts help modal * Update snapshots
Luc45 · Jun 22, 2022 · ca3f229 · ca3f229
1 parent 0f97e8d
commit ca3f229
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 8 deletions.
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js
@@ -28,4 +28,8 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];
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
@@ -82,6 +82,13 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             "modifier": "primary",
           },
         },
+        Object {
+          "description": "Make the selected text inline code.",
+          "keyCombination": Object {
+            "character": "x",
+            "modifier": "access",
+          },
+        },
       ]
     }
     title="Text formatting"

diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js
@@ -24,4 +24,8 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];
diff --git a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js
@@ -24,4 +24,8 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];
diff --git a/packages/format-library/src/code/index.js b/packages/format-library/src/code/index.js
@@ -3,7 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { toggleFormat, remove, applyFormat } from '@wordpress/rich-text';
-import { RichTextToolbarButton } from '@wordpress/block-editor';
+import {
+	RichTextToolbarButton,
+	RichTextShortcut,
+} from '@wordpress/block-editor';
 import { code as codeIcon } from '@wordpress/icons';
 
 const name = 'core/code';
@@ -51,13 +54,20 @@ export const code = {
 		}
 
 		return (
-			<RichTextToolbarButton
-				icon={ codeIcon }
-				title={ title }
-				onClick={ onClick }
-				isActive={ isActive }
-				role="menuitemcheckbox"
-			/>
+			<>
+				<RichTextShortcut
+					type="access"
+					character="x"
+					onUse={ onClick }
+				/>
+				<RichTextToolbarButton
+					icon={ codeIcon }
+					title={ title }
+					onClick={ onClick }
+					isActive={ isActive }
+					role="menuitemcheckbox"
+				/>
+			</>
 		);
 	},
 };