Marketing · Gutenberg
Feature Grid block for WordPress
Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights.
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
Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights.
Inspector panels on this block: Items, Layout, Card Style, Icon Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Icon Type” options: Emoji, Dashicon, None; “Text Alignment” options: Left, Center, Right; “Icon Position” options: Top (above title), Left (inline); “Card Style” options: Shadow, Outlined, Flat, Plain (no card).
Where to find it
Gutenberg inserter → Marketing → search “Feature Grid” (block name `blockenberg/feature-grid` in block.json). Style it in the sidebar after insert.
How to use Feature Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature Grid”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Items. Set “Icon Type”, “Emoji / Icon Character”, “Dashicon”, “Items — Title”.
- Check the published page. An IntersectionObserver starts work when the block enters the viewport. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Icon Type | Select control; the chosen value is saved on the block. Options: Emoji; Dashicon; None. |
| Emoji / Icon Character | Text field in the inspector. |
| Dashicon | Select control; the chosen value is saved on the block. |
| Items — Title | Text field in the inspector. |
| Description | Text field in the inspector. |
| Link Label (optional) | Text field in the inspector. |
| Link URL | Text field in the inspector. |
| Open in new tab | On/off toggle in the inspector. |
| Columns (Desktop) | Numeric range control in the inspector. Range 1–6. block.json default: 3. Saved as `columns`. |
| Columns (Tablet) | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `columnsTablet`. |
| Columns (Mobile) | Numeric range control in the inspector. Range 1–3. block.json default: 1. Saved as `columnsMobile`. |
| Gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `gap`. |
| Text Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Top (above title); Left (inline). block.json default: top. Saved as `iconPosition`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Shadow; Outlined; Flat; Plain (no card). block.json default: shadow. Saved as `cardStyle`. |
| Shadow Size | Select control; the chosen value is saved on the block. Options: Small; Medium; Large. block.json default: md. Saved as `cardShadow`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: Lift (translateY); Scale; Glow (accent border); None. block.json default: lift. Saved as `hoverEffect`. |
| Card Padding (px) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `cardPadding`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Animate on Scroll | On/off toggle in the inspector. On by default. Saved as `animate`. |
| Icon Shape Background | Select control; the chosen value is saved on the block. Options: Circle; Square (rounded); None. block.json default: circle. Saved as `iconShape`. |
| Icon Size (px) | Numeric range control in the inspector. Range 16–80. block.json default: 42. Saved as `iconSize`. |
| Shape Size (px) | Numeric range control in the inspector. Range 40–120. block.json default: 72. Saved as `iconShapeSize`. |
| Title Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Text Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoText`. |
| Link Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLink`. |
What the front-end script actually does
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights — that is the job of Feature Grid, not a generic content block.
- Use it when you need the editor control labeled “Icon Type”, which exists on this block’s inspector.
- It matches pages about feature, grid, icon.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
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 Feature Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature Grid”. It sits under Marketing. After insert, open Items and set “Icon Type”, “Emoji / Icon Character”, “Dashicon”, “Items — Title”.
What makes Feature Grid different from other Blockenberg blocks?
Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights. Inspector labels on this block include “Icon Type”, “Emoji / Icon Character”, “Dashicon”, “Items — Title”.
Is the Feature Grid Gutenberg block free?
Yes. Feature Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature Grid 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: Items, Layout, Card Style, Icon Style).
Related marketing blocks
Icon Feature Grid
Responsive grid of features with icons, titles and descriptions. Perfect for product pages, landing pages, and about sections.
Feature Columns
Responsive 2–4 column feature grid with icon, title, and description. Multiple icon and visual styles.
Card CTA Grid
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
Feature Showcase
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Feature Grid from the Gutenberg inserter.