9.1 KiB
9.1 KiB
注销快捷键
返回用于注销键盘快捷键的操作对象。
用法
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>
);
};
参数
- 名称
字符串: 快捷键名称。
返回值
对象: 操作对象。
键盘快捷键数据
命名空间：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(
'字符：<code>%s</code> / 修饰键：<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(
'字符：<code>%s</code> / 修饰键：<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>{ __( '无描述信息。' ) }</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(
'字符：<code>%s</code> / 修饰键：<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( '显示字符串：%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: 快捷键表示形式。
操作
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: __( '我的自定义快捷键' ),
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: 操作对象。