Display Keyboard Shortcut in WordPress Gutenberg

In Gutenberg (a.k.a. the WordPress Block Editor), keyboard shortcuts are displayed differently on Apple devices and other devices, e.g. ^H on an Apple device and Ctrl+H on other devices. This is accomplished with wp.keycodes.displayShortcut.

Here are some examples:

Ctrl+H / ^H

wp.keycodes.displayShortcut.ctrl('h')

Ctrl+H / ⌘H

wp.keycodes.displayShortcut.primary('h')

Alt+Z / ⌥Z

wp.keycodes.displayShortcut.alt('z')

Other Choices

For other choices see packages/keycodes/src/index.js in the WordPress Gutenberg GitHub repo.

Related Reading

@wordpress/keycodes

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.