Marketing · Gutenberg
Announcement Strip block for WordPress
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
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
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
Inspector panels on this block: Content, Countdown. Those titles come from index.js, not from a shared template.
Behavior controls: “Link target” options: Same tab, New tab; “End date (YYYY-MM-DD HH:MM)” (e.g. 2026-12-31 23:59); “Preset style” options: Gradient (purple→blue), Purple, Dark, Info (blue), Warning (amber); “Text align” options: Center, Left.
Where to find it
Gutenberg inserter → Marketing → search “Announcement Strip” (block name `blockenberg/announcement-strip` in block.json). Style it in the sidebar after insert.
How to use Announcement Strip block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Announcement Strip”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Show badge”, “Badge text”, “Show link”, “Link label”.
- Check the published page. The view script reads HTML data attributes: data-close-days, data-close-id, data-countdown. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge text | Text field in the inspector. block.json default: New. Saved as `badgeText`. |
| Show link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Link label | Text field in the inspector. block.json default: Learn more →. Saved as `linkLabel`. |
| Link URL | Text field in the inspector. block.json default: #. Saved as `linkUrl`. |
| Link target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `linkTarget`. |
| Show close button | On/off toggle in the inspector. On by default. Saved as `showClose`. |
| Close ID (unique per bar) | Text field in the inspector. block.json default: anst-1. Saved as `closeId`. |
| Remember close (days) | Numeric range control in the inspector. Range 0–365. block.json default: 7. Saved as `closeDays`. |
| Show countdown | On/off toggle in the inspector. Off by default. Saved as `showCountdown`. |
| End date (YYYY-MM-DD HH:MM) | Text field in the inspector. e.g. 2026-12-31 23:59. Saved as `countdownDate`. |
| Preset style | Select control; the chosen value is saved on the block. Options: Gradient (purple→blue); Purple; Dark; Info (blue); Warning (amber); Success (green); Custom color. block.json default: gradient. Saved as `style`. |
| Text align | Select control; the chosen value is saved on the block. Options: Center; Left. block.json default: center. Saved as `textAlign`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 4–32. block.json default: 11. Saved as `paddingY`. |
| Text color | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
| Link color | Color control in the inspector. block.json default: #fde68a. Saved as `linkColor`. |
| Badge bg | Color control in the inspector. block.json default: rgba(255,255,255,0.22). Saved as `badgeBg`. |
| Badge text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-close-days, data-close-id, data-countdown.
- It writes to localStorage in the visitor’s browser, not to wp_options.
When this is the right block
- A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts — that is the job of Announcement Strip, not a generic content block.
- Use it when you need the editor control labeled “Show badge”, which exists on this block’s inspector.
- It matches pages about announcement, bar, strip.
- 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 Announcement Strip block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Announcement Strip”. It sits under Marketing. After insert, open Content and set “Show badge”, “Badge text”, “Show link”, “Link label”.
Where does Announcement Strip store visitor state?
In localStorage on that browser. Clearing site data resets it. It is not a WordPress user meta field unless render.php says so.
Is the Announcement Strip Gutenberg block free?
Yes. Announcement Strip ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Announcement Strip 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: Content, Countdown).
Related marketing blocks
Notification Bar
Dismissible sticky announcement or promo bar — shown at the top or bottom of the page.
Promo Banner
Dismissible announcement ribbon with message, link/button, gradient background and cookie memory.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Cookie Consent
GDPR-compliant cookie consent banner with customizable position, layout, categories, and GTM integration.
Coupon
Eye-catching promo/discount coupon card with copyable code, expiry countdown, and flexible styling.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Announcement Strip from the Gutenberg inserter.