How to use Gutenberg Blocks

TGB - Gutenberg Post Edit screen

Most features of Tag Groups are available both as shortcodes and as Gutenberg1 blocks. They render exactly the same on the page, but they are very different in how you configure their options.

In a block you can select available options from menus with self-explanatory names, while for the shortcode you would have to look up IDs and slugs and compile them to lists. Shortcodes can be confusing for unexperienced users because they require you to type identifiers and parameters correctly, to use unformatted quotes and to remove HTML from the code.

If you are using the Gutenberg editor, it is therefore recommended to try first the block version of a feature.

How to insert a block

Gutenberg add block

On the post or page edit screen, click on the “plus in a circle” icon and search for the name, for example “tag cloud” or “toggle post filter”. You can also type a “/” (forward slash) in a new line and start typing the name.

Then you insert the block by clicking on it.

How to configure a block

WordPress - Gutenberg - Tag Groups Premium block

After you inserted the block, select it by clicking once into it. You will notice that the right side bar (the “Inspector”) shows now the options of this block.

Some options depend on others and therefore appear only after you activated the more general option. The placeholder of a search field, for example, can only be entered after that search field has been enabled.

Contextual Help

The ? icon at each option takes you to a page with more help.

Previewing the Block

Since these blocks are rendered dynamically on the frontend, depending on a huge amount of criteria, there is no live preview in the editor. You need to click the “Preview” button of the post editor to see the output.

Transforming Blocks to Shortcodes

Screenshot - Gutenberg menu - transform into shortcode - WordPress

If you want to switch back from Gutenberg to the classic editor, you first need to transform your Tag Groups blocks to shortcodes. You find this feature in the menu directly at the top left corner of the block. The resulting shortcode will contain all settings that are different than the default.

Some shortcodes offer more advanced options than the corresponding blocks. In that case too you may want to transform the block. Please note, however, that a shortcode cannot be converted back.

Not Yet in Widgets

Gutenberg blocks are not yet available for widget sidebars. We have to wait for WordPress to provide the environment.

Show 1 footnote
  1. Every WordPress site since version 5.0 comes with the Gutenberg editor. For earlier versions you will need to install the editor separately.

How do you rate this article?