Restore displaying formatting shortcuts in toolbar (#11104)

WordPress · Oct 26, 2018 · 0a1d6e0 · 0a1d6e0
1 parent 95a02b9
commit 0a1d6e0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 3 deletions.
diff --git a/packages/editor/src/components/rich-text/format-edit.js b/packages/editor/src/components/rich-text/format-edit.js
@@ -4,7 +4,7 @@
 import { Component, Fragment } from '@wordpress/element';
 import { getActiveFormat, getFormatTypes } from '@wordpress/rich-text';
 import { Fill, KeyboardShortcuts, ToolbarButton } from '@wordpress/components';
-import { rawShortcut } from '@wordpress/keycodes';
+import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -18,10 +18,19 @@ function isResult( { title, keywords = [] }, filterValue ) {
 	return matchSearch( title ) || keywords.some( matchSearch );
 }
 
-function FillToolbarButton( { name, ...props } ) {
+function FillToolbarButton( { name, shortcutType, shortcutCharacter, ...props } ) {
+	let shortcut;
+
+	if ( shortcutType && shortcutCharacter ) {
+		shortcut = displayShortcut[ shortcutType ]( shortcutCharacter );
+	}
+
 	return (
 		<Fill name={ `RichText.ToolbarControls.${ name }` }>
-			<ToolbarButton { ...props } />
+			<ToolbarButton
+				{ ...props }
+				shortcut={ shortcut }
+			/>
 		</Fill>
 	);
 }

diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.js
@@ -29,6 +29,8 @@ export const bold = {
 					title={ __( 'Bold' ) }
 					onClick={ onToggle }
 					isActive={ isActive }
+					shortcutType="primary"
+					shortcutCharacter="b"
 				/>
 			</Fragment>
 		);

diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js
@@ -29,6 +29,8 @@ export const italic = {
 					title={ __( 'Italic' ) }
 					onClick={ onToggle }
 					isActive={ isActive }
+					shortcutType="primary"
+					shortcutCharacter="i"
 				/>
 			</Fragment>
 		);

diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
@@ -94,13 +94,17 @@ export const link = {
 						title={ __( 'Unlink' ) }
 						onClick={ this.onRemoveFormat }
 						isActive={ isActive }
+						shortcutType="primaryShift"
+						shortcutCharacter="k"
 					/> }
 					{ ! isActive && <ToolbarButton
 						name="link"
 						icon="admin-links"
 						title={ __( 'Link' ) }
 						onClick={ this.addLink }
 						isActive={ isActive }
+						shortcutType="primary"
+						shortcutCharacter="k"
 					/> }
 					<InlineLinkUI
 						addingLink={ this.state.addingLink }

diff --git a/packages/format-library/src/strikethrough/index.js b/packages/format-library/src/strikethrough/index.js
@@ -29,6 +29,8 @@ export const strikethrough = {
 					title={ __( 'Strikethrough' ) }
 					onClick={ onToggle }
 					isActive={ isActive }
+					shortcutType="access"
+					shortcutCharacter="d"
 				/>
 			</Fragment>
 		);