自动完成

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
);