How To Use Gutenberg Blocks With Tag Groups

Most features of the Tag Groups plugin are available both as shortcodes and as Gutenberg blocks.

Both ways 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 #

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.

Hint: Type “Tag Groups” or search for the “Tag Groups” category to find all of our blocks.

When you hover your mouse over a block in the library, you will see an image with a sample.

Then you insert the block by clicking on it.

How to configure a 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.

If you don’t see the sidebar, open it by clicking on the cogwheel icon in the top-right corner.

You can switch the sidebar between “Document” options and “Block” options. You will need the Block options.

Some options depend on others and therefore appear only after you activated the more general option. Before you can enter the placeholder of a search field, for example, you first have to enable the search field where that placeholder appears.

Contextual Help #

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

Previewing the Block #

Most blocks offer a live preview where you can see how changing the options affects the output. This preview is only approximate and not fully functional. For example, you cannot click on links or search for posts inside a block. The final appearance might also look different, depending on your theme and other factors.

The live preview can be turned off in the Back End settings, under the Gutenberg tab.

Other things you can do #

Blocks can be moved around (click on the arrows or grab the handle), duplicated (use the three-dot menu above the block), placed inside column blocks or used for reusable blocks (alone or after selecting multiple blocks), which is useful to create elements that can be easily inserted and that should look always the same on all pages.

Another useful feature is the Undo function (return-to-left-side arrow on top) that lets you undo actions step by step.

Transforming Blocks into Shortcodes #

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 that a shortcode cannot be converted back to a block.