The Keyboard Shortcuts Data

Namespace: core/keyboard-shortcuts.

Selectors

getAllShortcutKeyCombinations

Returns the shortcuts that include aliases for a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';

const ExampleComponent = () => {
    const allShortcutKeyCombinations = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getAllShortcutKeyCombinations(
                'core/edit-post/next-region'
            ),
        []
    );

    return (
        allShortcutKeyCombinations.length > 0 && (
            <ul>
                { allShortcutKeyCombinations.map(
                    ( { character, modifier }, index ) => (
                        <li key={ index }>
                            { createInterpolateElement(
                                sprintf(
                                    'Character: <code>%s</code> / Modifier: <code>%s</code>',
                                    character,
                                    modifier
                                ),
                                {
                                    code: <code />,
                                }
                            ) }
                        </li>
                    )
                ) }
            </ul>
        )
    );
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • WPShortcutKeyCombination[]: Key combinations.

getAllShortcutRawKeyCombinations

Returns the raw representation of all the keyboard combinations of a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';

const ExampleComponent = () => {
    const allShortcutRawKeyCombinations = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations(
                'core/edit-post/next-region'
            ),
        []
    );

    return (
        allShortcutRawKeyCombinations.length > 0 && (
            <ul>
                { allShortcutRawKeyCombinations.map(
                    ( shortcutRawKeyCombination, index ) => (
                        <li key={ index }>
                            { createInterpolateElement(
                                sprintf(
                                    ' <code>%s</code>',
                                    shortcutRawKeyCombination
                                ),
                                {
                                    code: <code />,
                                }
                            ) }
                        </li>
                    )
                ) }
            </ul>
        )
    );
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • string[]: Shortcuts.

getCategoryShortcuts

Returns the shortcut names list for a given category name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';

const ExampleComponent = () => {
    const categoryShortcuts = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getCategoryShortcuts( 'block' ),
        []
    );

    return (
        categoryShortcuts.length > 0 && (
            <ul>
                { categoryShortcuts.map( ( categoryShortcut ) => (
                    <li key={ categoryShortcut }>{ categoryShortcut }</li>
                ) ) }
            </ul>
        )
    );
};

Parameters

  • state Object: Global state.
  • name string: Category name.

Returns

  • string[]: Shortcut names.

getShortcutAliases

Returns the aliases for a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';
const ExampleComponent = () => {
    const shortcutAliases = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getShortcutAliases(
                'core/edit-post/next-region'
            ),
        []
    );

    return (
        shortcutAliases.length > 0 && (
            <ul>
                { shortcutAliases.map( ( { character, modifier }, index ) => (
                    <li key={ index }>
                        { createInterpolateElement(
                            sprintf(
                                'Character: <code>%s</code> / Modifier: <code>%s</code>',
                                character,
                                modifier
                            ),
                            {
                                code: <code />,
                            }
                        ) }
                    </li>
                ) ) }
            </ul>
        )
    );
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • WPShortcutKeyCombination[]: Key combinations.

getShortcutDescription

Returns the shortcut description given its name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
const ExampleComponent = () => {
    const shortcutDescription = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getShortcutDescription(
                'core/edit-post/next-region'
            ),
        []
    );

    return shortcutDescription ? (
        <div>{ shortcutDescription }</div>
    ) : (
        <div>{ __( 'No description.' ) }</div>
    );
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • string?: Shortcut description.

getShortcutKeyCombination

Returns the main key combination for a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';
const ExampleComponent = () => {
    const { character, modifier } = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getShortcutKeyCombination(
                'core/edit-post/next-region'
            ),
        []
    );

    return (
        <div>
            { createInterpolateElement(
                sprintf(
                    'Character: <code>%s</code> / Modifier: <code>%s</code>',
                    character,
                    modifier
                ),
                {
                    code: <code />,
                }
            ) }
        </div>
    );
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • WPShortcutKeyCombination?: Key combination.

getShortcutRepresentation

Returns a string representing the main key combination for a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { sprintf } from '@wordpress/i18n';

const ExampleComponent = () => {
    const { display, raw, ariaLabel } = useSelect( ( select ) => {
        return {
            display: select( keyboardShortcutsStore ).getShortcutRepresentation(
                'core/edit-post/next-region'
            ),
            raw: select( keyboardShortcutsStore ).getShortcutRepresentation(
                'core/edit-post/next-region',
                'raw'
            ),
            ariaLabel: select(
                keyboardShortcutsStore
            ).getShortcutRepresentation(
                'core/edit-post/next-region',
                'ariaLabel'
            ),
        };
    }, [] );

    return (
        <ul>
            <li>{ sprintf( 'display string: %s', display ) }</li>
            <li>{ sprintf( 'raw string: %s', raw ) }</li>
            <li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li>
        </ul>
    );
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.
  • representation keyof FORMATTING_METHODS: Type of representation (display, raw, ariaLabel).

Returns

  • string?: Shortcut representation.

Actions

registerShortcut

Returns an action object used to register a new keyboard shortcut.

Usage

import { useEffect } from 'react';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

const ExampleComponent = () => {
    const { registerShortcut } = useDispatch( keyboardShortcutsStore );

    useEffect( () => {
        registerShortcut( {
            name: 'custom/my-custom-shortcut',
            category: 'my-category',
            description: __( 'My custom shortcut' ),
            keyCombination: {
                modifier: 'primary',
                character: 'j',
            },
        } );
    }, [] );

    const shortcut = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getShortcutKeyCombination(
                'custom/my-custom-shortcut'
            ),
        []
    );

    return shortcut ? (
        <p>{ __( 'Shortcut is registered.' ) }</p>
    ) : (
        <p>{ __( 'Shortcut is not registered.' ) }</p>
    );
};

Parameters

  • config WPShortcutConfig: Shortcut config.

Returns

  • Object: action.

unregisterShortcut

Returns an action object used to unregister a keyboard shortcut.

Usage

import { useEffect } from 'react';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

const ExampleComponent = () => {
    const { unregisterShortcut } = useDispatch( keyboardShortcutsStore );

    useEffect( () => {
        unregisterShortcut( 'core/edit-post/next-region' );
    }, [] );

    const shortcut = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getShortcutKeyCombination(
                'core/edit-post/next-region'
            ),
        []
    );

    return shortcut ? (
        <p>{ __( 'Shortcut is not unregistered.' ) }</p>
    ) : (
        <p>{ __( 'Shortcut is unregistered.' ) }</p>
    );
};

Parameters

  • name string: Shortcut name.

Returns

  • Object: action.