Layout · Gutenberg
Rich Columns block for WordPress
Multi-column layout with icons, headings, rich text, and optional links — ideal for features, benefits, or service descriptions.
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
Multi-column layout with icons, headings, rich text, and optional links — ideal for features, benefits, or service descriptions.
Inspector panels on this block: Column, Layout, Icon Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Column count” options: 2 columns, 3 columns, 4 columns; “Card style” options: Cards (elevated), Bordered, Flat (no border), Icon top + line, Icon left; “Heading tag” options: H2, H3, H4, H5, p (bold).
Where to find it
Gutenberg inserter → Layout → search “Rich Columns” (block name `blockenberg/rich-columns` in block.json). Style it in the sidebar after insert.
How to use Rich Columns block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Rich Columns”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Column. Set “Heading”, “Link label (optional)”, “Link URL”, “Open link in new tab”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Heading | Text field in the inspector. Saved as `columns`. |
| Link label (optional) | Text field in the inspector. Saved as `columns`. |
| Link URL | Text field in the inspector. Saved as `columns`. |
| Open link in new tab | On/off toggle in the inspector. Saved as `columns`. |
| Column count | Select control; the chosen value is saved on the block. Options: 2 columns; 3 columns; 4 columns. block.json default: 3. Saved as `columnCount`. |
| Card style | Select control; the chosen value is saved on the block. Options: Cards (elevated); Bordered; Flat (no border); Icon top + line; Icon left. block.json default: cards. Saved as `layout`. |
| Column gap (px) | Numeric range control in the inspector. Range 8–72. block.json default: 24. Saved as `gap`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–60. block.json default: 28. Saved as `cardPadding`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 14. Saved as `cardRadius`. |
| Max width (px) | Numeric range control in the inspector. Range 400–1600. block.json default: 1100. Saved as `maxWidth`. |
| Container padding (px) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `containerPadding`. |
| Show icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Show dividers between columns | On/off toggle in the inspector. Off by default. Saved as `showDivider`. |
| Heading tag | Select control; the chosen value is saved on the block. Options: H2; H3; H4; H5; p (bold). block.json default: h3. Saved as `headingTag`. |
| Heading (Heading Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headingTypo`. |
| Body Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `bodyTypo`. |
| Icon font size (px) | Numeric range control in the inspector. Range 16–56. block.json default: 28. Saved as `iconSize`. |
| Icon box size (px) | Numeric range control in the inspector. Range 32–96. block.json default: 56. Saved as `iconBgSize`. |
| Icon box radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 14. Saved as `iconBgRadius`. |
| Container Background | Color control in the inspector. Saved as `containerBg`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Heading Color | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Body Text Color | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Link Color | Color control in the inspector. block.json default: #6366f1. Saved as `linkColor`. |
| Icon Background | Color control in the inspector. block.json default: #ede9fe. Saved as `iconBg`. |
| Divider Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `dividerColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Multi-column layout with icons, headings, rich text, and optional links — ideal for features, benefits, or service descriptions — that is the job of Rich Columns, not a generic content block.
- Use it when you need the editor control labeled “Heading”, which exists on this block’s inspector.
- It matches pages about columns, features, benefits.
- Inserter grouping: page structure, sections, and composition.
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 Rich Columns block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Rich Columns”. It sits under Layout. After insert, open Column and set “Heading”, “Link label (optional)”, “Link URL”, “Open link in new tab”.
What makes Rich Columns different from other Blockenberg blocks?
Multi-column layout with icons, headings, rich text, and optional links — ideal for features, benefits, or service descriptions. Inspector labels on this block include “Heading”, “Link label (optional)”, “Link URL”, “Open link in new tab”.
Is the Rich Columns Gutenberg block free?
Yes. Rich Columns ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Rich Columns 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: Column, Layout, Icon Appearance).
Related layout blocks
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Masonry Grid
Responsive masonry layout for images with hover effects.
Sticky Sidebar
Two-column layout with a rich sticky sidebar — perfect for articles, docs, pricing pages, and long-form content.
Sticky Two Column
One column scrolls through feature highlights; the other stays sticky showing the active image — perfect for product tours and feature pages.
Text Columns
Magazine-style multi-column text layout with drop cap, column rule / divider, pull quote spanning all columns and per-column WYSIWYG editing.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Rich Columns from the Gutenberg inserter.