Автозаполнение

Гутенберг предоставляет editor.Autocomplete.completersфильтр для расширения и переопределения списка автозаполнений, используемых блоками.

AutocompleteКомпонент найден в @wordpress/editorприменяется этот фильтр. @wordpress/componentsПакет обеспечивает основополагающий Autocompleteкомпонент , который не применяется таким фильтром, но блоки обычно должны использовать компонент предоставленный @wordpress/editor.

пример

Вот пример использования editor.Autocomplete.completersфильтра для добавления аббревиатуры. Вы можете найти полную документацию для интерфейса автозаполнения с Autocompleteкомпонентом в @wordpress/componentsпакете.ES5ESNext

// Our completer
var 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: function( abbr ) {
        var expansionWords = abbr.expansion.split( /\s+/ );
        return [ abbr.letters ].concat( expansionWords );
    },
    getOptionLabel: function( acronym ) {
        return acronym.letters;
    },
    getOptionCompletion: function( abbr ) {
        return wp.element.createElement(
            'abbr',
            { title: abbr.expansion },
            abbr.letters
        );
    },
};

// Our filter function
function appendAcronymCompleter( completers, blockName ) {
    return blockName === 'my-plugin/foo' ?
        completers.concat( acronymCompleter ) :
        completers;
}

// Adding the filter
wp.hooks.addFilter(
    'editor.Autocomplete.completers',
    'my-plugin/autocompleters/acronyms',
    appendAcronymCompleter
);
Scroll to top