List: Add keyboard shortcuts to Indent/Outdent tooltips #71053
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| @@ -53,13 +53,15 @@ export function IndentUI( { clientId } ) { | |||
| <ToolbarButton | |||
| icon={ isRTL() ? formatOutdentRTL : formatOutdent } | |||
| title={ __( 'Outdent' ) } | |||
| shortcut="Shift+Tab" | |||
There was a problem hiding this comment.
Maybe we should use displayShortcut to display the Shift key modifier, similar to Command/Control keys.
diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js
index 2907385a07..0d8960c6da 100644
--- a/packages/block-library/src/list-item/edit.js
+++ b/packages/block-library/src/list-item/edit.js
@@ -18,6 +18,7 @@ import {
} from '@wordpress/icons';
import { useMergeRefs } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
/**
* Internal dependencies
@@ -53,7 +54,7 @@ export function IndentUI( { clientId } ) {
<ToolbarButton
icon={ isRTL() ? formatOutdentRTL : formatOutdent }
title={ __( 'Outdent' ) }
- shortcut="Shift+Tab"
+ shortcut={ displayShortcut.shift( 'Tab' ) }
description={ __( 'Outdent list item' ) }
disabled={ ! canOutdent }
onClick={ () => outdentListItem() }
Screenshot
There was a problem hiding this comment.
Thanks for the suggestion! I've updated the implementation to use displayShortcut.shift('Tab') for the Outdent button while keeping the Indent button as a plain "Tab".
What?
Closes: #61716
Adds keyboard shortcut information to the tooltips of the Indent and Outdent toolbar buttons in the List block.
Testing Instructions