Change Autocompleter Triggers in the WordPress Block Editor

We can use filters to change the autocompleter triggers in the WordPress block editor. By ‘triggers’, I mean the typed character combination we use to make an autocompleter appear. For example, by default we can use @ to populate a list of site users. We can also use [[ to select a post link from a list that is filtered by the text after the [[. As a further example, If I type [[fal on this site I’ll see one list item: my recipe for falafel.

Changing the autocompleter trigger

Let’s imagine I have a different use in mind for the [[ character combination, and the use of this sequence as a trigger for post links is a problem for me. I can add a filter to editor.Autocomplete.completers and change this trigger to my preferred character combination

For this example I’m going to say my preferred trigger is <<<. With this in mind, my filter code might look like this:

const updateLinksTrigger = (completers) => {
  const linksCompleter = completers.find((completer) => 'links' === completer.name);
  if (linksCompleter) {
    linksCompleter.triggerPrefix = '<<<';
  }
};

wp.hooks.addFilter('editor.Autocomplete.completers', 'my-example-namespace', updateLinksTrigger);

In the above code updateLinksTrigger is the callback for our addFilter. In updateLinksTrigger we use the JavaScript array find method to select the correct completer and set it as the value of linksCompleter. We can then access the triggerPrefix property and set it to any string value (in this case, ‘<<<‘).

Now when typing ‘<<<‘ we should see the same list of post links we used to see using ‘[[‘.

Need to completely disable one or more of the WordPress block editor autocompleters? I wrote a separate blog post about that here.