How To Use Tag Clouds With Gutenberg

TGB - Gutenberg Post Edit screen

Most features of Tag Groups are available both as shortcodes and as Gutenberg1 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 “chatty mango”. You can also type a “/” (forward slash) in a new line and start typing the name.

Hint: Type “Chatty Mango” or search for the “Chatty Mango” 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.

Example showing a premium feature

Then you insert the block by clicking on it.

How to configure a block

Example showing a premium feature

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.

Gutenberg settings icon

If you don’t see the sidebar, open it by clicking on the cogwheel icon.

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

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

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?