Marketing · Gutenberg
Promo Banner block for WordPress
Dismissible announcement ribbon with message, link/button, gradient background and cookie memory.
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 announcement ribbon with message, link/button, gradient background and cookie memory.
Inspector panels on this block: Content, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Position” options: Top Fixed, Bottom Fixed, Inline; “Entrance Animation” options: Slide Down, Fade In, None.
Where to find it
Gutenberg inserter → Marketing → search “Promo Banner” (block name `blockenberg/promo-banner` in block.json). Style it in the sidebar after insert.
How to use Promo Banner block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Promo Banner”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Show Button / Link”, “Button Label”, “Button URL”, “Open in New Tab”.
- Check the published page. The view script reads HTML data attributes: data-animation, data-cookie. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Button / Link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Button Label | Text field in the inspector. block.json default: Shop Now. Saved as `linkLabel`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `linkUrl`. |
| Open in New Tab | On/off toggle in the inspector. Off by default. Saved as `linkNewTab`. |
| Show Close Button | On/off toggle in the inspector. On by default. Saved as `showClose`. |
| Remember Close (days) | Numeric range control in the inspector. Range 0–30. block.json default: 3. Saved as `cookieDays`. |
| Position | Select control; the chosen value is saved on the block. Options: Top Fixed; Bottom Fixed; Inline. block.json default: top. Saved as `position`. |
| Entrance Animation | Select control; the chosen value is saved on the block. Options: Slide Down; Fade In; None. block.json default: slideDown. Saved as `animation`. |
| Vertical Padding (px) | Numeric range control in the inspector. Range 6–32. block.json default: 12. Saved as `paddingV`. |
| Use Gradient Background | On/off toggle in the inspector. On by default. Saved as `useGradient`. |
| Message | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `msgTypo`. |
| Background / Gradient Start | Color control in the inspector. block.json default: #6c3fb5. Saved as `bgColor`. |
| Gradient End | Color control in the inspector. block.json default: #e91e8c. Saved as `bgColor2`. |
| Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animation, data-cookie.
When this is the right block
- Dismissible announcement ribbon with message, link/button, gradient background and cookie memory — that is the job of Promo Banner, not a generic content block.
- Use it when you need the editor control labeled “Show Button / Link”, which exists on this block’s inspector.
- It matches pages about promo, banner, 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 Promo Banner block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Promo Banner”. It sits under Marketing. After insert, open Content and set “Show Button / Link”, “Button Label”, “Button URL”, “Open in New Tab”.
What makes Promo Banner different from other Blockenberg blocks?
Dismissible announcement ribbon with message, link/button, gradient background and cookie memory. Inspector labels on this block include “Show Button / Link”, “Button Label”, “Button URL”, “Open in New Tab”.
Is the Promo Banner Gutenberg block free?
Yes. Promo Banner ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Promo Banner 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, Appearance).
Related marketing blocks
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
Notification Bar
Dismissible sticky announcement or promo bar — shown at the top or bottom of the page.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Coupon
Eye-catching promo/discount coupon card with copyable code, expiry countdown, and flexible styling.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Offer Card
Special offer and deal card with urgency badge, original/sale price, includes list, CTA, and optional countdown timer.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Promo Banner from the Gutenberg inserter.