Blog · Gutenberg
Tag Cloud block for WordPress
A styled, interactive tag cloud with custom tags or live WordPress tags.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A styled, interactive tag cloud with custom tags or live WordPress tags.
Inspector panels on this block: Source, Tags, Sorting. Those titles come from index.js, not from a shared template.
Behavior controls: “1 – XS” options: 2 – SM, 3 – MD, 4 – LG, 5 – XL; “Tag Source” options: Custom Tags, WordPress Tags; “Sort By” options: Input order, Alphabetical, Size (weight); “Tag Style” options: Rounded, Pill, Outlined, Flat (no background).
Where to find it
Gutenberg inserter → Blog → search “Tag Cloud” (block name `blockenberg/tag-cloud` in block.json). Style it in the sidebar after insert.
How to use Tag Cloud block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Tag Cloud”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Source. Set “1 – XS”, “Tag Source”, “Max Tags”, “Show Count”.
- Check the published page. The view script reads HTML data attributes: data-animate, data-border-color, data-border-width, data-color-mode, data-count, data-font-weight, data-fs-max, data-fs-min. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| 1 – XS | Select control; the chosen value is saved on the block. Options: 2 – SM; 3 – MD; 4 – LG; 5 – XL. |
| Tag Source | Select control; the chosen value is saved on the block. Options: Custom Tags; WordPress Tags. block.json default: custom. Saved as `sourceType`. |
| Max Tags | Numeric range control in the inspector. Range 5–100. block.json default: 20. Saved as `maxTags`. |
| Show Count | On/off toggle in the inspector. Off by default. Saved as `showCount`. |
| Sort By | Select control; the chosen value is saved on the block. Options: Input order; Alphabetical; Size (weight). block.json default: input. Saved as `sortBy`. |
| Randomize Order | On/off toggle in the inspector. Off by default. Saved as `randomize`. |
| Tag Style | Select control; the chosen value is saved on the block. Options: Rounded; Pill; Outlined; Flat (no background). block.json default: rounded. Saved as `tagStyle`. |
| Color Mode | Select control; the chosen value is saved on the block. Options: Single color; Multi-color; Gradient. block.json default: single. Saved as `colorMode`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Animated Hover | On/off toggle in the inspector. On by default. Saved as `animateHover`. |
| Min Font Size (px) | Numeric range control in the inspector. Range 9–20. block.json default: 13. Saved as `fontSizeMin`. |
| Max Font Size (px) | Numeric range control in the inspector. Range 14–40. block.json default: 22. Saved as `fontSizeMax`. |
| Gap Between Tags (px) | Numeric range control in the inspector. Range 0–32. block.json default: 8. Saved as `gap`. |
| Horizontal Padding (px) | Numeric range control in the inspector. Range 4–40. block.json default: 14. Saved as `paddingX`. |
| Vertical Padding (px) | Numeric range control in the inspector. Range 2–24. block.json default: 7. Saved as `paddingY`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 6. Saved as `borderRadius`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–6. block.json default: 1. Saved as `borderWidth`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate, data-border-color, data-border-width, data-color-mode, data-count, data-font-weight, data-fs-max, data-fs-min.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- A styled, interactive tag cloud with custom tags or live WordPress tags — that is the job of Tag Cloud, not a generic content block.
- Use it when you need the editor control labeled “1 – XS”, which exists on this block’s inspector.
- It matches pages about tag, cloud, tags.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Tag Cloud block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Tag Cloud”. It sits under Blog. After insert, open Source and set “1 – XS”, “Tag Source”, “Max Tags”, “Show Count”.
What makes Tag Cloud different from other Blockenberg blocks?
A styled, interactive tag cloud with custom tags or live WordPress tags. Inspector labels on this block include “1 – XS”, “Tag Source”, “Max Tags”, “Show Count”.
Is the Tag Cloud Gutenberg block free?
Yes. Tag Cloud ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Tag Cloud to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Source, Tags, Sorting).
Related blog blocks
Tag List
A styled collection of tag pills with icons, colors, and optional links.
Taxonomy List
Display categories, tags or custom taxonomy as a styled list, grid, chips or cards — with icons, counts and links.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Post Meta Bar
A configurable post metadata row: author, date, reading time, categories, tags, and comment count.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Tag Cloud from the Gutenberg inserter.