Marketing · Gutenberg
Feature Announcement block for WordPress
Announce new product features, improvements, or updates with version badge, highlights list, and CTA.
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
Announce new product features, improvements, or updates with version badge, highlights list, and CTA.
Inspector panels on this block: Feature Info, Description, Highlights, Plans & CTAs, Layout & Style, Block & Accent Colors, Badge & CTA Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Category” options: 🆕 New Feature, ⚡ Improvement, 🐛 Bug Fix, ⚠️ Deprecation, 🔒 Security; “Status” options: ✅ Available Now, 🧪 Beta, 🚀 Coming Soon, ⚠️ Deprecated; “Accent Stripe” options: Top stripe, Left stripe, None.
Where to find it
Gutenberg inserter → Marketing → search “Feature Announcement” (block name `blockenberg/feature-announcement` in block.json). Style it in the sidebar after insert.
How to use Feature Announcement block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature Announcement”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Feature Info. Set “Feature Name”, “Tagline”, “Category”, “Status”.
- 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 |
|---|---|
| Feature Name | Text field in the inspector. block.json default: Smart AI Suggestions. Saved as `featureName`. |
| Tagline | Text field in the inspector. block.json default: Write faster, smarter, and better — right inside the editor.. Saved as `tagline`. |
| Category | Select control; the chosen value is saved on the block. Options: 🆕 New Feature; ⚡ Improvement; 🐛 Bug Fix; ⚠️ Deprecation; 🔒 Security; 📦 Integration. block.json default: new-feature. Saved as `category`. |
| Status | Select control; the chosen value is saved on the block. Options: ✅ Available Now; 🧪 Beta; 🚀 Coming Soon; ⚠️ Deprecated. block.json default: available. Saved as `status`. |
| Version (e.g. v3.2) | Text field in the inspector. block.json default: v3.2. Saved as `version`. |
| Release Date | Text field in the inspector. block.json default: February 24, 2026. Saved as `releaseDate`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show Version | On/off toggle in the inspector. On by default. Saved as `showVersion`. |
| Show Date | On/off toggle in the inspector. On by default. Saved as `showDate`. |
| Show Description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show Highlights | On/off toggle in the inspector. On by default. Saved as `showHighlights`. |
| Section Label | Text field in the inspector. block.json default: What's new. Saved as `highlightsLabel`. |
| Show Plans | On/off toggle in the inspector. On by default. Saved as `showPlans`. |
| Plans Label | Text field in the inspector. block.json default: Available on. Saved as `plansLabel`. |
| Plans (comma-separated) | Text field in the inspector. Saved as `availablePlans`. |
| Show Primary CTA | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| CTA Text | Text field in the inspector. block.json default: Try It Now. Saved as `ctaText`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Show Secondary CTA | On/off toggle in the inspector. On by default. Saved as `showSecondaryCta`. |
| Secondary CTA Text | Text field in the inspector. block.json default: Read the Docs. Saved as `ctaSecondaryText`. |
| Secondary CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Accent Stripe | Select control; the chosen value is saved on the block. Options: Top stripe; Left stripe; None. block.json default: top. Saved as `accentPosition`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Feature Name (Typo Name) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoName`. |
| Tagline (Typo Tagline) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTagline`. |
| Body | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBody`. |
| Block & Accent Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Block & Accent Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Accent Color | Color control in the inspector. block.json default: #7c3aed. Saved as `accentColor`. |
| Accent Stripe | Color control in the inspector. block.json default: #7c3aed. Saved as `accentStripe`. |
| Feature Name | Color control in the inspector. block.json default: #0f172a. Saved as `featureNameColor`. |
| Tagline | Color control in the inspector. block.json default: #374151. Saved as `taglineColor`. |
| Description Text | Color control in the inspector. block.json default: #4b5563. Saved as `textColor`. |
| Highlight Icon | Color control in the inspector. block.json default: #7c3aed. Saved as `highlightIconColor`. |
| Version BG | Color control in the inspector. block.json default: #ede9fe. Saved as `versionBg`. |
| Version Text | Color control in the inspector. block.json default: #5b21b6. Saved as `versionColor`. |
| Category BG | Color control in the inspector. block.json default: #f0fdf4. Saved as `categoryBg`. |
| Category Text | Color control in the inspector. block.json default: #14532d. Saved as `categoryColor`. |
| Status BG | Color control in the inspector. block.json default: #dcfce7. Saved as `statusBg`. |
| Status Text | Color control in the inspector. block.json default: #14532d. Saved as `statusColor`. |
| Plan BG | Color control in the inspector. block.json default: #f5f3ff. Saved as `planBg`. |
| Plan Text | Color control in the inspector. block.json default: #5b21b6. Saved as `planColor`. |
| Primary CTA BG | Color control in the inspector. block.json default: #7c3aed. Saved as `ctaBg`. |
| Primary CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Secondary CTA | Color control in the inspector. block.json default: #7c3aed. Saved as `ctaSecondaryColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Announce new product features, improvements, or updates with version badge, highlights list, and CTA — that is the job of Feature Announcement, not a generic content block.
- Use it when you need the editor control labeled “Feature Name”, which exists on this block’s inspector.
- It matches pages about feature, announcement, update.
- 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 Announcement block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature Announcement”. It sits under Marketing. After insert, open Feature Info and set “Feature Name”, “Tagline”, “Category”, “Status”.
What makes Feature Announcement different from other Blockenberg blocks?
Announce new product features, improvements, or updates with version badge, highlights list, and CTA. Inspector labels on this block include “Feature Name”, “Tagline”, “Category”, “Status”.
Is the Feature Announcement Gutenberg block free?
Yes. Feature Announcement ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature Announcement 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: Feature Info, Description, Highlights, Plans & CTAs).
Related marketing blocks
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
Coming Soon
Launch countdown page section with logo, heading, subtitle, live countdown timer, optional email capture field, social links, and background controls.
Comparison Guide
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
Feature Grid
Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights.
Feature List
Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets.
Feature Showcase
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Feature Announcement from the Gutenberg inserter.