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`: 操作对象。
|