Marketing · Gutenberg
Feature Tabs block for WordPress
SaaS-style screenshot tabs: clickable feature list on one side, large image preview on the other.
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
SaaS-style screenshot tabs: clickable feature list on one side, large image preview on the other.
Inspector panels on this block: Layout, Tabs. Those titles come from index.js, not from a shared template.
Behavior controls: “Tabs position” options: Tabs left, Tabs right, Tabs top; “Tab style” options: Card, Bordered, Minimal; “Image aspect ratio” options: 16 / 9, 4 / 3, 1 / 1, 3 / 2.
Where to find it
Gutenberg inserter → Marketing → search “Feature Tabs” (block name `blockenberg/feature-tabs` in block.json). Style it in the sidebar after insert.
How to use Feature Tabs block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature Tabs”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Tabs position”, “Tab style”, “Tabs sidebar width (px)”, “Gap between tabs and image (px)”.
- Check the published page. The view script reads HTML data attributes: data-animate, data-panel, data-tab. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Tabs position | Select control; the chosen value is saved on the block. Options: Tabs left; Tabs right; Tabs top. block.json default: left. Saved as `tabsPosition`. |
| Tab style | Select control; the chosen value is saved on the block. Options: Card; Bordered; Minimal. block.json default: card. Saved as `tabStyle`. |
| Tabs sidebar width (px) | Numeric range control in the inspector. Range 180–420. block.json default: 300. Saved as `tabsWidth`. |
| Gap between tabs and image (px) | Numeric range control in the inspector. Range 16–96. block.json default: 48. Saved as `gap`. |
| Image aspect ratio | Select control; the chosen value is saved on the block. Options: 16 / 9; 4 / 3; 1 / 1; 3 / 2. block.json default: 16/9. Saved as `imageAspect`. |
| Image radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `imageRadius`. |
| Image shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Animate on scroll | On/off toggle in the inspector. On by default. Saved as `animate`. |
| Tab Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLabel`. |
| Headline | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeadline`. |
| Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDesc`. |
| Icon size (px) | Numeric range control in the inspector. Range 16–48. block.json default: 28. Saved as `iconSize`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
| Tab label | Text field in the inspector. |
| Headline | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate, data-panel, data-tab.
When this is the right block
- SaaS-style screenshot tabs: clickable feature list on one side, large image preview on the other — that is the job of Feature Tabs, not a generic content block.
- Use it when you need the editor control labeled “Tabs position”, which exists on this block’s inspector.
- 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 Tabs block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature Tabs”. It sits under Marketing. After insert, open Layout and set “Tabs position”, “Tab style”, “Tabs sidebar width (px)”, “Gap between tabs and image (px)”.
What makes Feature Tabs different from other Blockenberg blocks?
SaaS-style screenshot tabs: clickable feature list on one side, large image preview on the other. Inspector labels on this block include “Tabs position”, “Tab style”, “Tabs sidebar width (px)”, “Gap between tabs and image (px)”.
Is the Feature Tabs Gutenberg block free?
Yes. Feature Tabs ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature Tabs 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, Tabs).
Related marketing blocks
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Affiliate Review Box
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
Affiliate Section
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats.
Age Gate
Age verification overlay that protects page content behind a customizable age confirmation dialog.
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
App Download
Ready-made app promotion section with iOS / Android badges, device screenshot, heading, subtitle, ratings/reviews, and full background controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Feature Tabs from the Gutenberg inserter.