440 lines
9.1 KiB
Markdown
440 lines
9.1 KiB
Markdown
### 注销快捷键
|
||
|
||
返回用于注销键盘快捷键的操作对象。
|
||
|
||
_用法_
|
||
|
||
```js
|
||
import { useEffect } from 'react';
|
||
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
|
||
import { useSelect, useDispatch } from '@wordpress/data';
|
||
import { __ } from '@wordpress/i18n';
|
||
|
||
const 示例组件 = () => {
|
||
const { 注销快捷键 } = useDispatch( keyboardShortcutsStore );
|
||
|
||
useEffect( () => {
|
||
注销快捷键( 'core/editor/next-region' );
|
||
}, [] );
|
||
|
||
const 快捷键 = useSelect(
|
||
( select ) =>
|
||
select( keyboardShortcutsStore ).获取快捷键组合(
|
||
'core/editor/next-region'
|
||
),
|
||
[]
|
||
);
|
||
|
||
return 快捷键 ? (
|
||
<p>{ __( '快捷键未注销。' ) }</p>
|
||
) : (
|
||
<p>{ __( '快捷键已注销。' ) }</p>
|
||
);
|
||
};
|
||
```
|
||
|
||
_参数_
|
||
|
||
- _名称_ `字符串`: 快捷键名称。
|
||
|
||
_返回值_
|
||
|
||
- `对象`: 操作对象。
|
||
|
||
<!-- END TOKEN(Autogenerated actions|../../../packages/keyboard-shortcuts/src/store/actions.js) -->
|
||
|
||
# 键盘快捷键数据
|
||
|
||
命名空间：`core/keyboard-shortcuts`
|
||
|
||
## 选择器
|
||
|
||
<!-- START TOKEN(Autogenerated selectors|../../../packages/keyboard-shortcuts/src/store/selectors.js) -->
|
||
|
||
### getAllShortcutKeyCombinations
|
||
|
||
返回包含指定快捷键名称别名的所有快捷键组合。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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(
|
||
'字符：<code>%s</code> / 修饰键：<code>%s</code>',
|
||
character,
|
||
modifier
|
||
),
|
||
{
|
||
code: <code />,
|
||
}
|
||
) }
|
||
</li>
|
||
)
|
||
) }
|
||
</ul>
|
||
)
|
||
);
|
||
};
|
||
```
|
||
|
||
_参数_
|
||
|
||
- _state_ `Object`: 全局状态
|
||
- _name_ `string`: 快捷键名称
|
||
|
||
_返回值_
|
||
|
||
- `WPShortcutKeyCombination[]`: 按键组合数组
|
||
|
||
### getAllShortcutRawKeyCombinations
|
||
|
||
返回指定快捷键名称的所有键盘组合的原始表示形式。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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
|
||
|
||
返回指定分类名称的快捷键名称列表。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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
|
||
|
||
返回指定快捷键名称的别名。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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(
|
||
'字符：<code>%s</code> / 修饰键：<code>%s</code>',
|
||
character,
|
||
modifier
|
||
),
|
||
{
|
||
code: <code />,
|
||
}
|
||
) }
|
||
</li>
|
||
) ) }
|
||
</ul>
|
||
)
|
||
);
|
||
};
|
||
```
|
||
|
||
_参数_
|
||
|
||
- _state_ `Object`: 全局状态
|
||
- _name_ `string`: 快捷键名称
|
||
|
||
_返回值_
|
||
|
||
- `WPShortcutKeyCombination[]`: 按键组合数组
|
||
|
||
### getShortcutDescription
|
||
|
||
返回指定名称的快捷键描述。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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>{ __( '无描述信息。' ) }</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
_参数_
|
||
|
||
- _state_ `Object`: 全局状态。
|
||
- _name_ `string`: 快捷键名称。
|
||
|
||
_返回值_
|
||
|
||
- `?string`: 快捷键描述。
|
||
|
||
### getShortcutKeyCombination
|
||
|
||
返回指定快捷键名称的主键组合。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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(
|
||
'字符：<code>%s</code> / 修饰键：<code>%s</code>',
|
||
character,
|
||
modifier
|
||
),
|
||
{
|
||
code: <code />,
|
||
}
|
||
) }
|
||
</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
_参数_
|
||
|
||
- _state_ `Object`: 全局状态。
|
||
- _name_ `string`: 快捷键名称。
|
||
|
||
_返回值_
|
||
|
||
- `WPShortcutKeyCombination?`: 键位组合。
|
||
|
||
### getShortcutRepresentation
|
||
|
||
返回表示指定快捷键名称主键组合的字符串。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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( '显示字符串：%s', display ) }</li>
|
||
<li>{ sprintf( '原始字符串：%s', raw ) }</li>
|
||
<li>{ sprintf( '无障碍标签字符串：%s', ariaLabel ) }</li>
|
||
</ul>
|
||
);
|
||
};
|
||
```
|
||
|
||
_参数_
|
||
|
||
- _state_ `Object`: 全局状态。
|
||
- _name_ `string`: 快捷键名称。
|
||
- _representation_ `keyof FORMATTING_METHODS`: 表示类型（display, raw, ariaLabel）。
|
||
|
||
_返回值_
|
||
|
||
- `?string`: 快捷键表示形式。
|
||
|
||
<!-- END TOKEN(Autogenerated selectors|../../../packages/keyboard-shortcuts/src/store/selectors.js) -->
|
||
|
||
## 操作
|
||
|
||
<!-- START TOKEN(Autogenerated actions|../../../packages/keyboard-shortcuts/src/store/actions.js) -->
|
||
|
||
### registerShortcut
|
||
|
||
返回用于注册新键盘快捷键的操作对象。
|
||
|
||
_使用方法_
|
||
|
||
```js
|
||
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: __( '我的自定义快捷键' ),
|
||
keyCombination: {
|
||
modifier: 'primary',
|
||
character: 'j',
|
||
},
|
||
} );
|
||
}, [] );
|
||
|
||
const shortcut = useSelect(
|
||
( select ) =>
|
||
select( keyboardShortcutsStore ).getShortcutKeyCombination(
|
||
'custom/my-custom-shortcut'
|
||
),
|
||
[]
|
||
);
|
||
|
||
return shortcut ? (
|
||
<p>{ __( '快捷键已注册。' ) }</p>
|
||
) : (
|
||
<p>{ __( '快捷键未注册。' ) }</p>
|
||
);
|
||
};
|
||
```
|
||
|
||
_参数_
|
||
|
||
- _config_ `WPShortcutConfig`: 快捷键配置。
|
||
|
||
_返回值_
|
||
|
||
- `Object`: 操作对象。 |