Skip to content

Unify Keyboard Shortcuts and Commands under a unique API (commands) #59004

@youknowriad

Description

@youknowriad

What are keyboard shortcuts? They are actions that are performed when you hit a certain key combination.
What are commands? They are actions that are performed when select them from a command palette menu.

As you may noticed in our code base, often times, we duplicate code to define one or the other. Both @wordpress/keyboard-shortcuts and @wordpress/commands have very similar APIs: You register commands or shortcuts and they become available in the APP.

I think it makes sense in the long run to unify these two APIs under a unique API. We have several options to go about this (or I would say, several steps):

Step 1

  • Offer a triggerCommand action in the @wordpress/commands palette and use it when defining shortcuts.
useShortcut( 'core/undo', () => triggerCommand( 'core/undo' ) );

Step 2

  • Completely unifying the API: In other words, we could have UI commands, Shortcut commands or UI+Shortcut commands.

So a command config becomes something like:

/**
 * Configuration of a registered keyboard shortcut.
 *
 * @typedef {Object} WPCommandConfig
 *
 * @property {string}      name                Command name.
 * @property {string}      description      Command description. **(shortcuts have description so we need to add this for commands)**
 * @property {string}      category.           Command category. **(shortcuts have categories so we need to add this for commands)**
 * @property {string}      label                  Command label.
 * @property {string=}     searchLabel     Command search label.
 * @property {string=}     context            Command context.
 * @property {JSX.Element} icon             Command icon.
 * @property {Function}    callback          Command callback.
 * @property {boolean}     disabled          Whether to disable the command.
 * @property {string=}  keyCombination.  Shortcut category. **(Optional key combination to trigger the command, absence of this property means it's a UI only command)**
 */

There's a difficulty here, because current keyboard shortcuts separate registerShortcut calls from the callback definition which happens in the useShortcut calls. So we need to account for that somehow.

cc @WordPress/gutenberg-core @artpi @mtias

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions