Marketing · Gutenberg
Notification Bar block for WordPress
Dismissible sticky announcement or promo bar — shown at the top or bottom of the page.
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
Dismissible sticky announcement or promo bar — shown at the top or bottom of the page.
Inspector panels on this block: Content, Behaviour. Those titles come from index.js, not from a shared template.
Behavior controls: “Link target” options: Same tab, New tab; “Content — Icon” options: None, Info, Warning, Star, Megaphone; “Position” options: Top of page, Bottom of page; “Animation” options: Slide, Fade, None.
Where to find it
Gutenberg inserter → Marketing → search “Notification Bar” (block name `blockenberg/notification-bar` in block.json). Style it in the sidebar after insert.
How to use Notification Bar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Notification Bar”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Link label”, “Link URL”, “Link target”, “Content — Icon”.
- Check the published page. The view script reads HTML data attributes: data-animation, data-cookie, data-position. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Link label | Text field in the inspector. block.json default: Shop Now. Saved as `linkLabel`. |
| Link URL | Text field in the inspector. 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`. |
| Content — Icon | Select control; the chosen value is saved on the block. Options: None; Info; Warning; Star; Megaphone; Bell. block.json default: none. Saved as `icon`. |
| Position | Select control; the chosen value is saved on the block. Options: Top of page; Bottom of page. block.json default: top. Saved as `position`. |
| Sticky (fixed to viewport) | On/off toggle in the inspector. On by default. Saved as `sticky`. |
| Show close button | On/off toggle in the inspector. On by default. Saved as `showClose`. |
| Animation | Select control; the chosen value is saved on the block. Options: Slide; Fade; None. block.json default: slide. Saved as `animation`. |
| Show after delay (ms) | Numeric range control in the inspector. Range 0–10000. block.json default: 0. Saved as `showAfterDelay`. |
| Cookie / storage key | Text field in the inspector. block.json default: bkbg_nb_dismissed. Saved as `cookieName`. |
| Remember dismissal (days) | Numeric range control in the inspector. Range 0–365. block.json default: 1. Saved as `cookieDays`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `padding`. |
| Colors — Background | Color control in the inspector. block.json default: #2563eb. Saved as `bgColor`. |
| Colors — Text | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
| Link | Color control in the inspector. block.json default: #bfdbfe. Saved as `linkColor`. |
| Close button | Color control in the inspector. block.json default: #93c5fd. Saved as `closeBtnColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animation, data-cookie, data-position.
- It writes to localStorage in the visitor’s browser, not to wp_options.
When this is the right block
- Dismissible sticky announcement or promo bar — shown at the top or bottom of the page — that is the job of Notification Bar, not a generic content block.
- Use it when you need the editor control labeled “Link label”, which exists on this block’s inspector.
- It matches pages about notification, bar, announcement.
- 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 Notification Bar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Notification Bar”. It sits under Marketing. After insert, open Content and set “Link label”, “Link URL”, “Link target”, “Content — Icon”.
Where does Notification Bar 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 Notification Bar Gutenberg block free?
Yes. Notification Bar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Notification Bar 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, Behaviour).
Related marketing blocks
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
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 Notification Bar from the Gutenberg inserter.