键盘快捷键数据-WordPress区块编辑器手册-果果开发

命名空间：core/keyboard-shortcuts。

选择器

getAllShortcutKeyCombinations

返回给定快捷键名称对应的快捷键组合（包括别名）。

用法

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/editor/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>
        )
    );
};

参数

state Object：全局状态。
name string：快捷键名称。

ShortcutKeyCombination[]：键组合。

getAllShortcutRawKeyCombinations

返回给定快捷键名称的所有键盘组合的原始表示形式。

用法

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/editor/next-region'
            ),
        []
    );

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

参数

state Object：全局状态。
name string：快捷键名称。

string[]：快捷键。

getCategoryShortcuts

返回给定类别名称的快捷键名称列表。

用法

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>
        )
    );
};

参数

state Object：全局状态。
name string：类别名称。

string[]：快捷键名称。

getKeyboardShortcut

返回用于显示和描述已注册快捷键主键组合的三个值：其显示字符串、其 aria-keyshortcuts 值及其纯文本标签。当该名称下未注册任何快捷键时，返回 null。

不包括原始表示形式和别名；如需获取它们，请使用 getShortcutRepresentation 和 getShortcutAliases。

返回的对象可以传递给 @wordpress/ui 组件的 shortcut 属性。

用法

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

const ExampleComponent = () => {
    const shortcut = useSelect(
        ( select ) =>
            select( keyboardShortcutsStore ).getKeyboardShortcut(
                'core/editor/next-region'
            ),
        []
    );

    return (
        <Menu.Item shortcut={ shortcut ?? undefined }>
            <Menu.ItemLabel>Next region</Menu.ItemLabel>
        </Menu.Item>
    );
};

参数

state Object：全局状态。
name string：快捷键名称。

WPKeyboardShortcut?：快捷键显示值。

getShortcutAliases

返回给定快捷键名称的别名。

用法

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/editor/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>
        )
    );
};

参数

state Object：全局状态。
name string：快捷键名称。

ShortcutKeyCombination[]：键组合。

getShortcutDescription

根据快捷键名称返回其描述。

用法

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/editor/next-region'
            ),
        []
    );

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

参数

state Object：全局状态。
name string：快捷键名称。

?string：快捷键描述。

getShortcutKeyCombination

返回给定快捷键名称的主键组合。

用法

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/editor/next-region'
            ),
        []
    );

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

参数

state Object：全局状态。
name string：快捷键名称。

ShortcutKeyCombination?: 按键组合。

getShortcutRepresentation

根据给定的快捷方式名称，返回表示其主按键组合的字符串。

用法

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/editor/next-region'
            ),
            raw: select( keyboardShortcutsStore ).getShortcutRepresentation(
                'core/editor/next-region',
                'raw'
            ),
            ariaLabel: select(
                keyboardShortcutsStore
            ).getShortcutRepresentation(
                'core/editor/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>
    );
};

参数

state Object: 全局状态。
name string: 快捷方式名称。
representation keyof FORMATTING_METHODS: 表示类型（display、raw、ariaLabel）。

?string: 快捷方式的表示形式。

动作

registerShortcut

返回一个用于注册新键盘快捷方式的动作对象。

用法

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>
    );
};

参数

config ShortcutConfig: 快捷方式配置。

Object: 动作。

unregisterShortcut

返回一个用于取消注册键盘快捷方式的动作对象。

用法

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/editor/next-region' );
    }, [] );

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

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

参数

name string: 快捷方式名称。

Object: 动作。