FAIR

Federated and Independent Repositories

Notice Bar Block – Sticky Announcement Banner & Notification Bar

Plugin Banner

Notice Bar Block – Sticky Announcement Banner & Notification Bar

by wpbranddigital

Download
Description

Notice Bar Block is a fast, lightweight, and modern WordPress block designed to display high-converting sticky notice bars, top notification banners, announcement bars, sales countdown timers, coupon code badges, and call-to-actions directly in the WordPress Block Editor (Gutenberg).

Whether you want to highlight a limited-time flash sale, promote a coupon code, announce free shipping, or notify visitors of urgent maintenance, Notice Bar Block gives you full visual design control inside the block editor—with zero settings pages, zero shortcodes, and zero bloated third-party libraries.

Why Notice Bar Block?

  • Native Block Editor Experience: Edit everything visually in Gutenberg using native block controls for colors, gradients, typography, margins, padding, and borders.
  • Push Page Content Down: Automatically pushes site headers and navigation menus down dynamically so your sticky notice bar never covers your logo or navbar.
  • Boost Sales & Urgency: Includes a live countdown timer and 1-click copy coupon code badge to drive instant conversions.
  • Blazing Fast Performance: Frontend script is ~1 KB of vanilla JavaScript with no jQuery and no dependencies. Loads only on pages where the block is used.
  • 11 Ready-to-Use Designer Presets: Get started in seconds with pre-built styles for flash sales, Black Friday, coupons, webinars, hiring, and announcements.

Features

  • Top or bottom placement: Stick notice bars to the top or bottom of the screen with adjustable z-index and offset.
  • Push page content down: Dynamically calculates bar height and offsets your page content, navigation bar, and sticky headers so nothing is obscured.
  • Live countdown timer: Add urgency to your promotions with a ticking countdown clock (Days : Hours : Mins : Secs) and customizable end message.
  • Click-to-copy coupon badge: Offer discount codes with instant 1-click clipboard copy and animated “Copied!” feedback.
  • Display triggers: Show notice bars immediately on page load, after a time delay (seconds), or when visitors scroll down a percentage (%) of the page.
  • 11 Starter presets: One-click presets for Announcement, Flash Sale with Countdown, Black Friday Neon, Coupon Discount, Free Shipping, Minimalist SaaS, Halloween Special, Live Webinar, Maintenance Alert, We’re Hiring, and Bottom CTA bars.
  • Call-to-action button: Add a prominent CTA button with URL, target option (_blank), custom colors, padding, border radius, and typography.
  • Dismiss & close button: Optional close button with session storage (until browser tab closes) or local storage (device level) memory so closed bars stay hidden.
  • Rich content editing: Use native Gutenberg blocks (Paragraphs, Headings, Links, Bold, Italic, Emoji) inside the notice bar.
  • Design & styling controls: Customize background colors, gradients, text color, typography, borders, shadows, padding, gap, and content max-width.
  • Responsive visibility: Choose to display or hide the notice bar specifically on desktop, tablet, or mobile devices.
  • Smooth entrance animations: Choose between subtle fade or slide-in entrance animations.
  • Respects WordPress admin bar: Automatically offsets top notice bars when the WordPress admin toolbar is present for logged-in users.

Lightweight & Fast by Design

  • Pure Vanilla JavaScript: The frontend script is approximately 1 KB and handles the close button, countdown timer, coupon copy, and content push-down with zero jQuery.
  • Conditional Asset Loading: CSS and JavaScript are enqueued ONLY on pages that contain a Notice Bar block.
  • No Database Overhead: No custom database tables, no tracking scripts, no bloatware, and no slow AJAX or external API calls.

Accessible (a11y)

  • Uses semantic HTML and accessible ARIA attributes (role="region" with accessible labels).
  • Keyboard accessible: press Escape while focused inside the bar to dismiss it.
  • Close button is hidden if JavaScript is disabled, preventing broken interactions.
  • Respects users’ prefers-reduced-motion operating system preferences by automatically disabling animations.

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)

Notice Bar Block is built using @wordpress/scripts.

  1. Upload the noticebar-sticky-banner-block folder to /wp-content/plugins/, or install directly via Plugins Add New in WordPress.
  2. Activate the plugin through the Plugins screen.
  3. Open any post, page, or template in the WordPress Block Editor, click the block inserter (+), and search for Notice Bar (or Sticky Bar).
  4. Choose one of the 11 ready-made presets or customize your bar visually from the block settings sidebar.
Where can I add the Notice Bar block?

You can add Notice Bar to any individual page or post. If you use a Block Theme (Full Site Editing), you can add the Notice Bar block to your Header or Footer template part (Appearance Editor) to display it across your entire website.

Will the notice bar cover my website logo or header menu?

No! Simply enable the Push page content down option in the block settings. It dynamically measures the height of your notice bar and offsets your site content and sticky headers so everything remains completely visible.

Does Notice Bar Block slow down my website?

Not at all. The plugin is built with modern WordPress Block standards. It has zero jQuery, zero dependencies, and loads an ultra-light (~1 KB) script only on pages where a notice bar is present. It does not affect Core Web Vitals or page load speed.

How does the countdown timer work?

Select the Countdown Timer option in the block sidebar, pick your target end date and time, and customize the label. The timer updates live in seconds on the frontend and switches to an expired message once the target time is reached.

How does the Click-to-Copy coupon badge work?

When enabled, visitors see a distinct coupon badge (e.g., SAVE20). Clicking the badge instantly copies the discount code to their clipboard and displays a visual “Copied!” notification.

How does dismiss memory work?

When visitors click the close button, you can choose to remember the dismissal for their browser session (until the tab closes) or on their device (using local storage). If you update the notice bar text in the editor, the bar automatically re-appears for all visitors.

1.0.2

  • Added “Push page content down” feature: pushes website content and navigation headers down dynamically so sticky bars never cover your header or logo.
  • Added live Countdown Timer with customizable target dates, days/hours/minutes/seconds, and expired state.
  • Added Click-to-copy Coupon Code badge with instant clipboard copy and animated feedback.
  • Added Display Triggers: Immediate, Time Delay (seconds), and Page Scroll percentage (%).
  • Added 11 pre-designed modern presets (Black Friday, Flash Sale, Coupon Discount, Free Shipping, SaaS, Live Event, Halloween, Careers, etc.).
  • Added ResizeObserver and responsive auto-adjustments for mobile and resized viewports.
  • Enhanced Notice Bar Block description, SEO tags, and documentation.

1.0.1

  • Renamed plugin display name and slug to NoticeBar Sticky Banner Block to prevent naming conflicts.
  • Updated text domain and localization strings.

1.0.0

  • Initial release.
Back to top