Marketing · Gutenberg
Feature List block for WordPress
Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets.
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
Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets.
Inspector panels on this block: Visibility, Items. Those titles come from index.js, not from a shared template.
Behavior controls: “List Style” options: Bordered rows, Striped rows, Cards, Compact (no lines); “Icon Set” options: Color check / cross, Emoji, Minimal (dot / dash); “✓ Included” options: ✗ Not included, ◐ Partial, ⏱ Coming soon.
Where to find it
Gutenberg inserter → Marketing → search “Feature List” (block name `blockenberg/feature-list` in block.json). Style it in the sidebar after insert.
How to use Feature List block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature List”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Visibility. Set “List Style”, “Icon Set”, “Icon Size (px)”, “Border Radius (px)”.
- 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 |
|---|---|
| List Style | Select control; the chosen value is saved on the block. Options: Bordered rows; Striped rows; Cards; Compact (no lines). block.json default: bordered. Saved as `listStyle`. |
| Icon Set | Select control; the chosen value is saved on the block. Options: Color check / cross; Emoji; Minimal (dot / dash). block.json default: color-check. Saved as `iconSet`. |
| Icon Size (px) | Numeric range control in the inspector. Range 14–32. block.json default: 20. Saved as `iconSize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Show Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Show Descriptions | On/off toggle in the inspector. On by default. Saved as `showDesc`. |
| Show Badges | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Show "Not Included" Items | On/off toggle in the inspector. On by default. Saved as `showNotIncluded`. |
| Strike Through "Not Included" | On/off toggle in the inspector. Off by default. Saved as `strikeNotIncluded`. |
| ✓ Included | Select control; the chosen value is saved on the block. Options: ✗ Not included; ◐ Partial; ⏱ Coming soon. |
| Label | Text field in the inspector. |
| Description (optional) | Text field in the inspector. |
| Badge (optional) | Text field in the inspector. |
| Group Header (leave blank to skip) | Text field in the inspector. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–240. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–240. block.json default: 0. Saved as `paddingBottom`. |
| Heading Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Label Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLabel`. |
| Description Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDesc`. |
| Section BG | Color control in the inspector. Saved as `bgColor`. |
| Row BG | Color control in the inspector. block.json default: #ffffff. Saved as `itemBg`. |
| Stripe BG | Color control in the inspector. block.json default: #f9fafb. Saved as `stripeBg`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Label | Color control in the inspector. block.json default: #111827. Saved as `labelColor`. |
| Description | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Included Icon | Color control in the inspector. block.json default: #10b981. Saved as `includedColor`. |
| Not Included Icon | Color control in the inspector. block.json default: #d1d5db. Saved as `notIncludedColor`. |
| Partial Icon | Color control in the inspector. block.json default: #f59e0b. Saved as `partialColor`. |
| Coming Soon Icon | Color control in the inspector. block.json default: #8b5cf6. Saved as `comingSoonColor`. |
| Badge BG | Color control in the inspector. block.json default: #ede9fe. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #7c3aed. Saved as `badgeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets — that is the job of Feature List, not a generic content block.
- Use it when you need the editor control labeled “List Style”, which exists on this block’s inspector.
- It matches pages about feature, checklist, included.
- 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 List block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature List”. It sits under Marketing. After insert, open Visibility and set “List Style”, “Icon Set”, “Icon Size (px)”, “Border Radius (px)”.
What makes Feature List different from other Blockenberg blocks?
Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets. Inspector labels on this block include “List Style”, “Icon Set”, “Icon Size (px)”, “Border Radius (px)”.
Is the Feature List Gutenberg block free?
Yes. Feature List ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature List 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: Visibility, Items).
Related marketing blocks
Pricing Slider
Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation.
Pricing Table
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Split Price CTA
Two-column sales section: pricing offer on the left, CTA with supporting benefits on the right. Common on SaaS pricing and checkout pages.
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.
Feature Announcement
Announce new product features, improvements, or updates with version badge, highlights list, and CTA.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Feature List from the Gutenberg inserter.