オートコンプリート（Autocomplete）

例

ここでは、editor.Autocomplete.completers フィルターを使用して略語補完機能を追加する例を示します。@wordpress/components パッケージ内の Autocomplete コンポーネントに関するオートコンプリートインターフェースの完全なドキュメントを見つけることができます。

// Our completer
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>,
   ),
};
// Our filter function
function appendAcronymCompleter( completers, blockName ) {
   return blockName === 'my-plugin/foo' ?
   [ ...completers, acronymCompleter ] :
   completers;
}
// Adding the filter
wp.hooks.addFilter(
   'editor.Autocomplete.completers',
   'my-plugin/autocompleters/acronym',
   appendAcronymCompleter
);