Title: Block Editor Keyboard Shortcuts in WordPress 5.4 Author: Riad Benguella Published: February 19, 2020 Last modified: March 3, 2020 --- [ ](https://profiles.wordpress.org/youknowriad/) [Riad Benguella](https://profiles.wordpress.org/youknowriad/) 11:49 am _on_ February 19, 2020 Tags: [5.4 ( 53 )](https://make.wordpress.org/core/tag/5-4/), [accessibility ( 59 )](https://make.wordpress.org/core/tag/accessibility/), [block-editor ( 143 )](https://make.wordpress.org/core/tag/block-editor/), [dev-notes ( 647 )](https://make.wordpress.org/core/tag/dev-notes/)    # Block Editor Keyboard Shortcuts in WordPress 5.4 WordPress 5.4 introduces a new package called `@wordpress/keyboard-shortcuts` to centralize the registration/removal and documentation of the available keyboard shortcuts in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor screen. ## Registering shortcuts You should register keyboard shortcuts when you load the screen/pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. for the first time, by calling the` registerShortcut` action. ```javascript wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( { // Shortcut name (identifier) name: 'plugin/shortcut-name', // Catergory (global, block or selection) category: 'block', // Description description: 'Short description of your shortcut.', // The key combination used to trigger the shortcut // Could be just a single character or a character with // a modifier. keyCombination: { modifier: 'primaryAlt', character: 't', }, // Some shortcuts can be triggered using several // key combination, the aliases array is used to define // the alternative combinations aliases: [ { modifier: 'primary', character: 'i', }, ], } ); ``` Registering a shortcut automatically adds it to the keyboard shortcuts help modal, where users can find it. ![](https://make.wordpress.org/core/files/2020/02/Capture-d%E2%80%99e%CC%81cran- 2020-02-19-a%CC%80-9.09.30-AM.png) ## Implementing the keyboard shortcut behavior The `@wordpress/keyboard-shortcuts` package also provides the `useShortcut` ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) hook to define the behavior triggered by the keyboard shortcuts. ```javascript import { useShortcut } from '@wordpress/keyboard-shortcuts'; import { useCallback } from '@wordpress/element'; const MyComponent = () => { useShortcut( // Shortcut name 'plugin/shortcut-name', // Shortcut callback useCallback( ( event ) => { // Do something when the keyboard // shortcut is triggered }, [] ) ); } ``` Using this React hook instead of a custom implementation comes with a few advantages: * If the shortcut is unregistered by a third-party plugin, the callback is just ignored. * The shortcut key combination can be modified at runtime and the callback will still be called properly. ## Removing existing shortcuts Registered shortcuts can also be unregistered (and potentially replaced) by third- party plugins ```javascript wp.data.dispatch( 'core/keyboard-shortcuts' ).unregisterShortcut( 'plugin/shortcut-name' ); ``` ## Next steps In the next releases, this package will also let you offer a centralized UIUI User interface to modify the keyboard shortcuts per user. [#5-4](https://make.wordpress.org/core/tag/5-4/), [#accessibility](https://make.wordpress.org/core/tag/accessibility/), [#block-editor](https://make.wordpress.org/core/tag/block-editor/), [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/) ### Share this: * [ Threads ](https://make.wordpress.org/core/2020/02/19/block-editor-keyboard-shortcuts-in-wordpress-5-4/?share=threads) * [ Mastodon ](https://make.wordpress.org/core/2020/02/19/block-editor-keyboard-shortcuts-in-wordpress-5-4/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/core/2020/02/19/block-editor-keyboard-shortcuts-in-wordpress-5-4/?share=bluesky) * [ X ](https://make.wordpress.org/core/2020/02/19/block-editor-keyboard-shortcuts-in-wordpress-5-4/?share=x) * [ Facebook ](https://make.wordpress.org/core/2020/02/19/block-editor-keyboard-shortcuts-in-wordpress-5-4/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/core/2020/02/19/block-editor-keyboard-shortcuts-in-wordpress-5-4/?share=linkedin) 1. ![](https://secure.gravatar.com/avatar/43d0aa8581d3dee2b5d34706634764378cd905cdf42270665df5ca3fc11380f8? s=32&d=mm&r=g) 2. [John Parris](https://profiles.wordpress.org/mindctrl/) 8:34 pm _on_ February 19, 2020 3. For anyone curious about the list of available modifiers, they appear to be documented here: [https://github.com/WordPress/gutenberg/blob/fd31f20b728670b8b5bd578c6c7d27e43136e200/packages/keycodes/README.md#modifiers](https://github.com/WordPress/gutenberg/blob/fd31f20b728670b8b5bd578c6c7d27e43136e200/packages/keycodes/README.md#modifiers) 4. ![](https://secure.gravatar.com/avatar/956bb728ecd1ab68423a832bcb07323e967b60bf1d0f47ed06226c95d2e1c444? s=32&d=mm&r=g) 5. [mattyrob](https://profiles.wordpress.org/mattyrob/) 12:21 pm _on_ March 1, 2020 6. I’ve opened a ticketticket Created for both bug reports and feature development on the bug tracker. over on [GitHub](https://github.com/WordPress/gutenberg/issues/20359), but a tutorial on how to add this extending the current and excellent set of tutorials would be very helpful. I can register a shortcut fine but cannot key the keypress to do anything despite spending quite some time trying. 7. * ![](https://secure.gravatar.com/avatar/4358d28c1e85f9015cb3363e024e2b238bccb44d05c4b84e9a38aafef0d83ac9? s=32&d=mm&r=g) * [Riad Benguella](https://profiles.wordpress.org/youknowriad/) 8:05 am _on_ March 2, 2020 * Thanks for giving this APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. a try and opening the ticketticket Created for both bug reports and feature development on the bug tracker.. * Did the shortcut show up in the modal when you registered it? Did you try to use `useShortcut` for the behavior of the shortcut? What issues ddid you face? Any code you can share? - ![](https://secure.gravatar.com/avatar/956bb728ecd1ab68423a832bcb07323e967b60bf1d0f47ed06226c95d2e1c444? s=32&d=mm&r=g) - [mattyrob](https://profiles.wordpress.org/mattyrob/) 10:36 am _on_ March 7, 2020 - [@youknowriad](https://profiles.wordpress.org/youknowriad/) - Thanks for the reply, the Shortcut shows up fine in the display list, I use couldn’t get the useShortcut() function to work, but I work in ES5 syntax. This issue was about an invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also _notabug_) that indicates the ticket is not a bug, is a support request, or is generally invalid. callback – something about it not being a function. I’m currently playing with using `Mousetrap` directly for the key press detection as I’m just using the short cut to display a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. Comments are closed. # Post navigation [← Enhancements to favicon handling in WordPress 5.4](https://make.wordpress.org/core/2020/02/19/enhancements-to-favicon-handling-in-wordpress-5-4/) [Dev Chat Agenda for February 19, 2020 (5.4 Week 6) →](https://make.wordpress.org/core/2020/02/19/dev-chat-agenda-for-february-19-2020-5-4-week-6/)