Create Additional Search Keywords for Your Gutenberg Editor Blocks

While working on my Gutenberg Editor Development Course I stumbled upon a cool feature for Gutenberg Blocks that let’s someone to find your block using words not found in the title of your block.

Searching for Blocks in Gutenberg

One of the easiest ways to find a specific block in Gutenberg is by using the search field.  By default, if your title has a keyword someone searches for, it will show your block in the results.

Sometimes though, we want our block to show for keywords that are not included in our title.

Here is an example of searching for “Image” and receiving multiple matching blocks

You can see in the example above that if we search for an “Image” block we get blocks that do not have “Image” in the title.

This is accomplished using the “keywords” parameter when registering your block.

Using the Keyword Setting When Creating a Block in Gutenberg

When you create a block using registerBlockType() you can set a parameter called “keyword.”  This parameter takes an array of words that if searched for, will include your block in the results.

Custom keyword allows block to be searched for using keywords not found in the block title

In the example above we have added extra keywords to a custom block.

Here is the code to make this work.  (Notice we are also escaping them using the wp.i18n library for localization).

// Import __ from i18n internationalization library
const { __ } = wp.i18n;
// Import registerBlockType() from block building libary
const { registerBlockType } = wp.blocks;
// Import the element creator function (React abstraction layer)
const el = wp.element.createElement;
* Register Block.
* @param {String} name Block name, namespaced
* @param {Object} settings Block settings
* @return {?WPBlock} Return the block or 'undefined'
registerBlockType('js4wpgb/static-content', {
title: __('Custom Block'),
icon: el('svg', { width: 20, height: 20 },
el('path', { d: "M7.5,0.5L5,4.5l-1.5-2 C2.9452,3.4753,0.8036,5.7924,0.8036,8.3036C0.8036,12.002,3.8017,15,7.5,15s6.6964-2.998,6.6964-6.6964 c0-2.5112-2.1416-4.8283-2.6964-5.8036l-1.5,2L7.5,0.5z M7.5,7c0,0,2.5,2.5618,2.5,4.5c0,0.8371-0.8259,2-2.5,2S5,12.3371,5,11.5 C5,9.6283,7.5,7,7.5,7z" } )
// Additional search terms for your block
keywords: [ __( 'zac' ), __( 'fire' ), __( 'fuego' ) ],
category: 'common',
edit( props ) {
return el('p', {}, 'Hello world!');
save( props ) {
return el('p', {}, 'Hello world!');

This allows us to have our block show up for the search terms “zac,” “fire,” and “fuego,” which are not found in our block title.

I would suggest looking at what keywords the default WordPress blocks use and leverage some of those keywords in your blocks.

Learn More About Gutenberg Development

If you would like to learn more about creating custom blocks or developing with Gutenberg in general, please check out my Gutenberg Development Course!

2 thoughts on “Create Additional Search Keywords for Your Gutenberg Editor Blocks

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s