キーボードショートカットデータ（The Keyboard Shortcuts Data）

セレクタ

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: ショートカット名。

返すもの

• WPShortcutKeyCombination[]: キーの組み合わせ。
  

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[]: ショートカット名。
  

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: ショートカット名。

返すもの

• WPShortcutKeyCombination[]: キーの組み合わせ。
  

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: ショートカット名。

返すもの

• WPShortcutKeyCombination?: キーの組み合わせ。
  

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: 表現のタイプ（表示、原始、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 WPShortcutConfig: ショートカットの設定。

返すもの

• 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: アクション。