Five Free Gutenberg Utility Addons

When we think of Gutenberg addons we often think of block collections, that is a suite of blocks from the same vendor. These typically have a container block, heading block, button block, list block, and others. However, there is another type of Gutenberg addon, the utility addon, which serves a different purpose.  Instead of adding more blocks, utilities enhance and extend the editor itself, or add features to other blocks.  In this post I want to look at five utility addons. I’m going to do a quick walk-through and then discuss and summarize at the end.

Video Version

Insert Special Characters

This plugin adds the ability to add special characters while working in Gutenberg. To access special characters click the down arrow “more” button on the block toolbar and you will see the Special Characters menu item that the plugin adds.

Clicking on that menu item show a long table of special characters that you can insert.

I added a “thumbs up” special character.

I was pleased when I noticed that when I deactivate the plugin the special characters remain.

Block Navigation

The block editor comes with a block navigator that is accessible by clicking on the “stair step” icon at the top of the editor. By default the core block navigator does not show nested blocks, and if you are inside of a nested block then it only shows the blocks in that container.

The Block Navigator utility is an enhanced version. You access it on the top right of the editor window by clicking on the vertical triple bar icon. This opens up an extended version of the block navigator that shows the nested blocks, some preview information to help identify the block, and also has a side context menu (the three dots).

When you click on the context menu for one of the blocks in the navigator you get some options to open the settings for the block selected, to move the block, remove it, copy its ID, or output the block code to the browser console. Of course, if you click on one of the blocks in the list then you go to that block in the editor.

Block Animation

Some block addon packs add CSS animations for some of their blocks. The Blocks Animation plugin adds an animation option for all blocks. When you install it you get an extra panel with a drop down menu in the block settings area.

There are about 80 (!) animation options grouped by bounce, fade, flip, rotate, slip, zoom, roll, and other. When you pick one then you get some options for delay and speed. It is very simple to use.

Syntax-Highlighting Code Block

The Syntax-highlighting code block is an addon for developers who want to include some code samples in their posts. By default, there is a core Code block, but it is pretty unexciting. Here it is in action (below) and it has zero options.

function jba_disable_editor_fullscreen_by_default() {
	$script = "window.onload = function() { const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ); if ( isFullscreenMode ) { wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' ); } }";
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'jba_disable_editor_fullscreen_by_default' );

The Syntax-Highlighting block is written by core contributor Weston Ruter. It doesn’t add a new block, but instead extends the core Code block. It does server-side syntax rendering so that there is no rendering “flash” when the page loads. The block is AMP compatible and there was a lot of care taken to only load the resources needed for the block on pages where it is used.

The plugin attempts to auto-detect the language, but you can override that and select one from a drop down. There are also the options to specify line numbers to highlight, to show line numbers, and to force long lines to wrap.

This is an example of the default output on the front-end.

You can choose syntax color styles by adding a code snippet to specify your choice. Directions for that are available on github and there is a link in the plugin description. Here I added a snippet to use a dark theme.

This block reverts back to the regular code block if it is disabled.

Find My Blocks

Find My Blocks is a nice utility plugin that lists the places where different blocks are used. When the plugin is activated it adds a menu item under the Tools menu.

When you go to the page there are some Settings in the middle where you can set the sort / display order and toggle whether you want to see core blocks listed or not. The blocks in use are listed down the left side of the page.

When you select one of the blocks in the list, cards are displayed in the center area where you can see the pages where it is used and click to edit that page or view it on the front-end.

Discussion and Conclusion

This was a quick look at five free Gutenberg addons that are available in the WordPress plugin directory. Each of them does just one thing and each provides some functionality missing from core.

Insert Special Characters is a nice lightweight addon that is simple to use and the special characters that you add using it continue to show even if you disable the plugin.

A lot of people like the Block Navigation addon. It adds some nice enhancements to the core block navigator. The block navigation list shows on the right settings area. This is a downside for me as this area can already be crowded and difficult to navigate. I’m not using it for that reason. I would have preferred if it replaced the core version instead, but that is my personal preference. I see a lot of people like it because it is an improvement on the core version.

Block Animation was pretty nice. There are a large number of options to choose from and you can add animation to any block that you choose.

The Syntax Highlighter addon extends the core code block. I noticed that the line numbers and syntax highlighting didn’t show up in the editor, which is not as nice. There are a large number of syntax highlighting block options on WordPress.org and some of them add more features, like a language tag or a copy to clipboard button. I liked this one because the author put a lot of attention on being lightweight and performant.

Finally, Find My Blocks is useful if you are wanting to standardize on block usage. You can find the places a block is used and swap it out before removing the plugin.

All five of these addons seem to be solid and I didn’t run into any issues using them. While it is unlikely that you will use all of these, I hope you find some that are useful. Do you know of other Gutenberg utilities that you like that I’ve missed? If so, please let me know in the comments.