NoticeBar Sticky Banner Block

Sticky Bar Block adds a single, focused Sticky Bar block to the WordPress Block Editor. Use it to show an announcement, a sale, a free-shipping message, or a call to action that stays visible at the top or bottom of the screen while visitors scroll.

Everything is edited visually in Gutenberg: write your message, add a button, choose colors, and publish. No settings pages, no shortcodes.

Features

• Top or bottom placement with adjustable offset and z-index.
• Automatically stays below the WordPress admin toolbar for logged-in users.
• Content written with regular Paragraph and Heading blocks.
• One call-to-action button with URL, new-tab option, colors, border radius, padding, font size and weight.
• Optional close button with icon size and color, plus an option to keep the bar hidden for the session or on the device after it is closed.
• Design controls using native block tools: background color or gradient, text color, typography, padding, margin, border, radius and shadow.
• Layout controls: content alignment, gap, content max width and stacking on mobile.
• Responsive visibility: hide the bar on desktop, tablet or mobile.
• Fade or slide entrance animation that is turned off automatically for visitors who prefer reduced motion.
• Four starter presets: Announcement, Promotion, CTA and Free Shipping bars.

Lightweight by design

• CSS and JavaScript load only on pages that contain a Sticky Bar block.
• No jQuery and no third-party libraries. The frontend script is about 1 KB and only handles the close button.
• No database tables, no settings, no AJAX, no REST endpoints, no external requests and no tracking.

Accessible

• The bar is a labelled region, the CTA is a real link and the close button is a real button with an accessible name.
• Clear keyboard focus styles on any background color.
• Press Escape while focus is inside the bar to close it.
• The close button stays hidden when JavaScript is unavailable, so visitors never see a button that does nothing.
• Honors the prefers-reduced-motion setting.

Development

Public source code repository:
https://github.com/wpbranddigital/noticebar-sticky-banner-block

Build Instructions:

1. npm install
2. npm run build
3. npm run start (development)

NoticeBar Sticky Banner Block is built using @wordpress/scripts.