WordPress 5.4的古腾堡编辑器键盘快捷键

WordPress 5.4引入另一个名为@wordpress/keyboard-shortcuts的新软件包，用于在古腾堡编辑器屏幕中集中注册/删除和可用键盘快捷键的文档。

注册快捷键

键盘快捷键的注册应在首次加载屏幕/插件时进行。可以通过调用registerShortcut操作来实现。

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {
	// Shortcut name (identifier)
	name: 'plugin/shortcut-name',
 	// Catergory (global, block or selection)
	category: 'block',
	// Description 
	description: 'Short description of your shortcut.',
	// The key combination used to trigger the shortcut
	// Could be just a single character or a character with
	// a modifier.
	keyCombination: {
		modifier: 'primaryAlt',
		character: 't',
	},
	// Some shortcuts can be triggered using several 
	// key combination, the aliases array is used to define
	// the alternative combinations
	aliases: [
		{
			modifier: 'primary',
			character: 'i',
		},
	],
} );

注册快捷键会自动将其添加到键盘快捷键帮助窗口，以确保用户可以看到。

实现键盘快捷键行为

@wordpress/keyboard-shortcuts软件包还提供了useShortcut的React钩子，以定义由键盘快捷键触发的行为。

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';
const MyComponent = () => {
	useShortcut(
		// Shortcut name
		'plugin/shortcut-name',
		// Shortcut callback
		useCallback(
			( event ) => {
				// Do something when the keyboard 
				// shortcut is triggered
			},
			[]
		)
	);
}

使用此React钩子代替自定义实现的优点：

• 如果快捷键未由第三方插件注册，则回调将被忽略。
• 可以在运行时修改快捷键组合，并且仍将正确调用回调。

删除现有的快捷键

注册的快捷键也可以被第三方插件取消注册（并可能被替换）

wp.data.dispatch( 'core/keyboard-shortcuts' ).unregisterShortcut(	'plugin/shortcut-name');

下一步计划

在接下来的发行版中，该软件包还将允许提供集中式UI，以修改每个用户的键盘快捷键。