Marketing · Gutenberg
Feature Showcase block for WordPress
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section.
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
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section.
Inspector panels on this block: Layout, Content, Rows. Those titles come from index.js, not from a shared template.
Behavior controls: “Image ratio” options: 4:3, 3:2, 1:1, 16:9; “Headline tag” options: H1, H2, H3, H4; “Bullet icon” options: Checkmark, Arrow, Dot; “Image position” options: Image right, Image left.
Where to find it
Gutenberg inserter → Marketing → search “Feature Showcase” (block name `blockenberg/feature-showcase` in block.json). Style it in the sidebar after insert.
How to use Feature Showcase block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature Showcase”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Row gap (px)”, “Image width (%)”, “Image ratio”, “Image radius (px)”.
- 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 |
|---|---|
| Row gap (px) | Numeric range control in the inspector. Range 32–200. block.json default: 96. Saved as `gap`. |
| Image width (%) | Numeric range control in the inspector. Range 30–70. block.json default: 50. Saved as `imageWidth`. |
| Image ratio | Select control; the chosen value is saved on the block. Options: 4:3; 3:2; 1:1; 16:9. block.json default: 4/3. Saved as `imageRatio`. |
| Image radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `imageRadius`. |
| Image shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Headline tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4. block.json default: h2. Saved as `headlineTag`. |
| Show badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Show bullets | On/off toggle in the inspector. On by default. Saved as `showBullets`. |
| Bullet icon | Select control; the chosen value is saved on the block. Options: Checkmark; Arrow; Dot. block.json default: check. Saved as `bulletIcon`. |
| CTA border radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 8. Saved as `ctaRadius`. |
| Headline | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeadline`. |
| Body | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBody`. |
| Bullet / CTA | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBullet`. |
| Badge | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBadge`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Image position | Select control; the chosen value is saved on the block. Options: Image right; Image left. |
| Badge text | Text field in the inspector. |
| Headline | Text field in the inspector. |
| Body text | Multiline text field in the inspector. |
| CTA label | Text field in the inspector. |
| CTA URL | Text field in the inspector. |
| CTA style | Select control; the chosen value is saved on the block. Options: Filled; Outline; Link. |
| Open in new tab | On/off toggle in the inspector. |
What the front-end script actually does
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section — that is the job of Feature Showcase, not a generic content block.
- Use it when you need the editor control labeled “Row gap (px)”, which exists on this block’s inspector.
- It matches pages about feature, showcase, zigzag.
- 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 Showcase block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature Showcase”. It sits under Marketing. After insert, open Layout and set “Row gap (px)”, “Image width (%)”, “Image ratio”, “Image radius (px)”.
What makes Feature Showcase different from other Blockenberg blocks?
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section. Inspector labels on this block include “Row gap (px)”, “Image width (%)”, “Image ratio”, “Image radius (px)”.
Is the Feature Showcase Gutenberg block free?
Yes. Feature Showcase ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature Showcase 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: Layout, Content, Rows).
Related marketing blocks
Feature Alternating
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
Feature Grid
Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights.
Feature Video Tabs
A feature showcase section with tab navigation and an auto-playing video per tab. Each tab shows a headline, description, bullet points, and an optional CTA button alongside its video.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Feature Announcement
Announce new product features, improvements, or updates with version badge, highlights list, and CTA.
Feature Columns
Responsive 2–4 column feature grid with icon, title, and description. Multiple icon and visual styles.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Feature Showcase from the Gutenberg inserter.