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.
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.
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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!
WordPress Educator Zac Gordon 
Hi Zac where will you publish your Gutenberg Development Course: frontendmasters, udemy, teamtreehouse ?
LikeLike
You will be able to get it through http://gutenberg.courses 🙂
LikeLike