Charts · Gutenberg
Word Cloud block for WordPress
A visual word cloud where each word is sized by its weight — ideal for topics, skills, tags, or concepts.
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 visual word cloud where each word is sized by its weight — ideal for topics, skills, tags, or concepts.
Inspector panels on this block: Words, Layout, Word Tags Style, Color Mode. Those titles come from index.js, not from a shared template.
Behavior controls: “Word Order” options: Random (shuffled), Largest first, Smallest first, Alphabetical; “Text Align” options: Center, Left, Justify; “Hover Effect” options: Scale up, Bold, None; “Font Weight” options: 400, 500, 600, 700, 800.
Where to find it
Gutenberg inserter → Charts → search “Word Cloud” (block name `blockenberg/word-cloud` in block.json). Style it in the sidebar after insert.
How to use Word Cloud block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Word Cloud”, insert it. Category: Charts.
- Configure inspector controls that exist on this block. Open Words. Set “Word / Phrase”, “Weight (1=tiny → 10=huge)”, “Link URL (optional)”, “Word Order”.
- Check the published page. The view script reads HTML data attributes: data-hover. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Word / Phrase | Text field in the inspector. |
| Weight (1=tiny → 10=huge) | Numeric range control in the inspector. Range 1–10. |
| Link URL (optional) | Text field in the inspector. |
| Word Order | Select control; the chosen value is saved on the block. Options: Random (shuffled); Largest first; Smallest first; Alphabetical. block.json default: random. Saved as `sortOrder`. |
| Shuffle Seed (change for different layout) | Numeric range control in the inspector. Range 1–999. block.json default: 42. Saved as `shuffleSeed`. |
| Gap (px) | Numeric range control in the inspector. Range 4–48. block.json default: 12. Saved as `gap`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 0–120. block.json default: 40. Saved as `paddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 0–120. block.json default: 24. Saved as `paddingH`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Center; Left; Justify. block.json default: center. Saved as `textAlign`. |
| Show Background per Word | On/off toggle in the inspector. Off by default. Saved as `showWordBg`. |
| Background Opacity (%) | Numeric range control in the inspector. Range 4–40. block.json default: 12. Saved as `wordBgOpacity`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 6. Saved as `wordBorderRadius`. |
| Tag Padding V (px) | Numeric range control in the inspector. Range 0–20. block.json default: 4. Saved as `wordPaddingV`. |
| Tag Padding H (px) | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `wordPaddingH`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: Scale up; Bold; None. block.json default: scale. Saved as `hoverEffect`. |
| Container Background | Color control in the inspector. block.json default: transparent. Saved as `bgColor`. |
| Single Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `singleColor`. |
| Min Font Size (px) | Numeric range control in the inspector. Range 10–32. block.json default: 13. Saved as `minFontSize`. |
| Max Font Size (px) | Numeric range control in the inspector. Range 24–100. block.json default: 52. Saved as `maxFontSize`. |
| Font Weight | Select control; the chosen value is saved on the block. Options: 400; 500; 600; 700; 800. block.json default: 700. Saved as `fontWeight`. |
| Letter Spacing (em ×10) | Numeric range control in the inspector. Range -2–10. block.json default: 0. Saved as `letterSpacing`. |
| Line Height (×10) | Numeric range control in the inspector. Range 10–24. block.json default: 1.4. Saved as `lineHeight`. |
| Color Mode | Select control; the chosen value is saved on the block. Options: Cycle Palette; Single Color. block.json default: palette. Saved as `colorMode`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-hover.
When this is the right block
- A visual word cloud where each word is sized by its weight — ideal for topics, skills, tags, or concepts — that is the job of Word Cloud, not a generic content block.
- Use it when you need the editor control labeled “Word / Phrase”, which exists on this block’s inspector.
- It matches pages about word, cloud, tag.
- Inserter grouping: reports, dashboards, and data-heavy 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 Word Cloud block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Word Cloud”. It sits under Charts. After insert, open Words and set “Word / Phrase”, “Weight (1=tiny → 10=huge)”, “Link URL (optional)”, “Word Order”.
What makes Word Cloud different from other Blockenberg blocks?
A visual word cloud where each word is sized by its weight — ideal for topics, skills, tags, or concepts. Inspector labels on this block include “Word / Phrase”, “Weight (1=tiny → 10=huge)”, “Link URL (optional)”, “Word Order”.
Is the Word Cloud Gutenberg block free?
Yes. Word Cloud ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Word 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: Words, Layout, Word Tags Style, Color Mode).
Related charts blocks
Bubble Chart
Interactive bubble chart powered by Chart.js.
Area Chart
Smooth filled area chart with multiple datasets, gradient fills, and animation using Chart.js (CDN). Great for showing trends over time.
Bar Chart
Vertical or horizontal bar chart with multiple datasets using Chart.js (CDN). Supports stacked, border radius, and custom colors.
Box Plot
Box-and-whisker statistical chart showing min, Q1, median, Q3, max, mean, and outliers for multiple data series.
Bullet Chart
Stephen Few's bullet chart — shows actual performance against a target, with background bands for Poor / Satisfactory / Good ranges.
Bump Chart
Ranking chart that shows how positions change over time — each series is a curved line with rank labels at each column.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Word Cloud from the Gutenberg inserter.