自动补全

editor.Autocomplete.completers 过滤器用于扩展和覆盖块所使用的自动补全器列表。

@wordpress/block-editor 中的 Autocomplete 组件会应用此过滤器。@wordpress/components 包提供了基础的 Autocomplete 组件，该组件不应用此类过滤器，但块通常应使用 @wordpress/block-editor 提供的组件。

示例

以下示例展示了如何使用 editor.Autocomplete.completers 过滤器添加一个首字母缩写补全器。你可以在 @wordpress/components 包的 Autocomplete 组件文档中找到自动补全器接口的完整说明。

// 我们的补全器
const acronymCompleter = {
	name: 'acronyms',
	triggerPrefix: '::',
	options: [
		{ letters: 'FYI', expansion: 'For Your Information' },
		{ letters: 'AFAIK', expansion: 'As Far As I Know' },
		{ letters: 'IIRC', expansion: 'If I Recall Correctly' },
	],
	getOptionKeywords( { letters, expansion } ) {
		const expansionWords = expansion.split( /\s+/ );
		return [ letters, ...expansionWords ];
	},
	getOptionLabel: acronym => acronym.letters,
	getOptionCompletion: ( { letters, expansion } ) => (
		<abbr title={ expansion }>{ letters }</abbr>,
	),
};

// 我们的过滤器函数
function appendAcronymCompleter( completers, blockName ) {
	return blockName === 'my-plugin/foo' ?
		[ ...completers, acronymCompleter ] :
		completers;
}

// 添加过滤器
wp.hooks.addFilter(
	'editor.Autocomplete.completers',
	'my-plugin/autocompleters/acronym',
	appendAcronymCompleter
);