Effects · Gutenberg
Marquee / Announcement Bar block for WordPress
Scrolling announcement bar with pause on hover and accessibility support.
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
Scrolling announcement bar with pause on hover and accessibility support.
Inspector panels on this block: Announcements, Animation, Separator, Border & Shadow, Close Button, Sticky Position, Accessibility. Those titles come from index.js, not from a shared template.
Behavior controls: “Direction” options: Left, Right; “Duration (seconds per loop)” (Lower = faster. Minimum 5s); “Respect reduced motion preference” (Stops animation when user has enabled reduced motion in system settings); “Separator style” options: None, •, |, —, ★.
Where to find it
Gutenberg inserter → Effects → search “Marquee / Announcement Bar” (block name `blockenberg/marquee` in block.json). Style it in the sidebar after insert.
How to use Marquee / Announcement Bar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Marquee / Announcement Bar”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Announcements. Set “Announcements — Text”, “Link (optional)”, “Open in new tab”, “Direction”.
- Check the published page. The view script reads HTML data attributes: data-close-persist, data-close-persist-days, data-instance-id, data-pause-click. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Announcements — Text | Text field in the inspector. |
| Link (optional) | Text field in the inspector. |
| Open in new tab | On/off toggle in the inspector. |
| Direction | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: left. Saved as `direction`. |
| Duration (seconds per loop) | Text field in the inspector. Lower = faster. Minimum 5s. block.json default: 30. Saved as `durationSeconds`. |
| Pause on hover | On/off toggle in the inspector. On by default. Saved as `pauseOnHover`. |
| Pause on click | On/off toggle in the inspector. Off by default. Saved as `pauseOnClick`. |
| Respect reduced motion preference | On/off toggle in the inspector. Stops animation when user has enabled reduced motion in system settings. On by default. Saved as `reduceMotion`. |
| Show separator | On/off toggle in the inspector. On by default. Saved as `showSeparator`. |
| Separator style | Select control; the chosen value is saved on the block. Options: None; •; |; —; ★; ◆; /. block.json default: •. Saved as `separator`. |
| Separator spacing | Numeric range control in the inspector. Range 0–100. block.json default: 40. Saved as `separatorSpacing`. |
| Vertical padding | Numeric range control in the inspector. Range 4–40. block.json default: 12. Saved as `paddingY`. |
| Horizontal padding | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `paddingX`. |
| Border top | On/off toggle in the inspector. Off by default. Saved as `borderTop`. |
| Border bottom | On/off toggle in the inspector. Off by default. Saved as `borderBottom`. |
| Border width | Numeric range control in the inspector. Range 1–5. block.json default: 1. Saved as `borderWidth`. |
| Border & Shadow — Shadow | On/off toggle in the inspector. Off by default. Saved as `shadow`. |
| Show close button | On/off toggle in the inspector. Off by default. Saved as `showCloseButton`. |
| Remember dismissal | On/off toggle in the inspector. Uses a cookie to remember when visitor closes the bar. On by default. Saved as `closePersist`. |
| Remember for (days) | Numeric range control in the inspector. Range 1–365. block.json default: 7. Saved as `closePersistDays`. |
| Sticky | On/off toggle in the inspector. Off by default. Saved as `sticky`. |
| Position | Select control; the chosen value is saved on the block. Options: Top; Bottom. block.json default: top. Saved as `stickyPosition`. |
| Z-index | Numeric range control in the inspector. Range 1–9999. block.json default: 999. Saved as `stickyZIndex`. |
| ARIA label | Text field in the inspector. Describes the region for screen readers. block.json default: Announcements. Saved as `ariaLabel`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-close-persist, data-close-persist-days, data-instance-id, data-pause-click.
When this is the right block
- Scrolling announcement bar with pause on hover and accessibility support — that is the job of Marquee / Announcement Bar, not a generic content block.
- Use it when you need the editor control labeled “Announcements — Text”, which exists on this block’s inspector.
- It matches pages about marquee, announcement, bar.
- Inserter grouping: motion, overlays, and visual treatments.
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 Marquee / Announcement Bar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Marquee / Announcement Bar”. It sits under Effects. After insert, open Announcements and set “Announcements — Text”, “Link (optional)”, “Open in new tab”, “Direction”.
What makes Marquee / Announcement Bar different from other Blockenberg blocks?
Scrolling announcement bar with pause on hover and accessibility support. Inspector labels on this block include “Announcements — Text”, “Link (optional)”, “Open in new tab”, “Direction”.
Is the Marquee / Announcement Bar Gutenberg block free?
Yes. Marquee / Announcement Bar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Marquee / Announcement 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: Announcements, Animation, Separator, Border & Shadow).
Related effects blocks
Rotating Banner
A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer.
Marquee Cards
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
Crypto Price Ticker
Live cryptocurrency price ticker powered by the free CoinGecko API. Display scrolling prices, cards, or a table with 24 h change, market cap, volume, and coin icons. Auto-refreshes on a configurable interval.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Parallax Section
A full-width content section with a background image that scrolls at a different speed for a depth parallax effect.
Scroll Reveal
Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Marquee / Announcement Bar from the Gutenberg inserter.