Effects · Gutenberg
Rotating Banner block for WordPress
A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer.
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
A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer.
Inspector panels on this block: Messages, Rotation & Behaviour, Appearance, Navigation Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Link Target” options: Same tab, New tab; “Animation” options: Slide, Fade; “Link Style” options: Inline underline, Pill button, No link.
Where to find it
Gutenberg inserter → Effects → search “Rotating Banner” (block name `blockenberg/rotating-banner` in block.json). Style it in the sidebar after insert.
How to use Rotating Banner block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Rotating Banner”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Messages. Set “Link Label”, “Link URL”, “Link Target”, “Countdown To (ISO date, optional)”.
- Check the published page. The view script reads HTML data attributes: data-anim, data-opts, data-rendered, data-uid. 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. |
| Link URL | Text field in the inspector. |
| Link Target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. |
| Countdown To (ISO date, optional) | Text field in the inspector. |
| Auto-play | On/off toggle in the inspector. On by default. Saved as `autoPlay`. |
| Interval (ms) | Numeric range control in the inspector. Range 1000–15000. block.json default: 5000. Saved as `interval`. |
| Animation | Select control; the chosen value is saved on the block. Options: Slide; Fade. block.json default: slide. Saved as `animationType`. |
| Show Arrows | On/off toggle in the inspector. On by default. Saved as `showArrows`. |
| Show Dot Indicators | On/off toggle in the inspector. On by default. Saved as `showDots`. |
| Show Close Button | On/off toggle in the inspector. On by default. Saved as `showClose`. |
| Cookie Dismiss Duration (days) | Numeric range control in the inspector. Range 0–365. block.json default: 7. Saved as `cookieDays`. |
| Banner Height (px) | Numeric range control in the inspector. Range 32–120. block.json default: 44. Saved as `height`. |
| Link Style | Select control; the chosen value is saved on the block. Options: Inline underline; Pill button; No link. block.json default: inline. Saved as `linkStyle`. |
| Arrow Background | Color control in the inspector. block.json default: rgba(0,0,0,0.15). Saved as `arrowBg`. |
| Arrow Color | Color control in the inspector. block.json default: #ffffff. Saved as `arrowColor`. |
| Dot Color | Color control in the inspector. block.json default: rgba(255,255,255,0.4). Saved as `dotColor`. |
| Active Dot Color | Color control in the inspector. block.json default: #ffffff. Saved as `dotActiveColor`. |
| Close Button Background | Color control in the inspector. block.json default: rgba(0,0,0,0.15). Saved as `closeBg`. |
| Close Button Color | Color control in the inspector. block.json default: #ffffff. Saved as `closeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-anim, data-opts, data-rendered, data-uid.
- Keyboard handlers move focus between items.
When this is the right block
- A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer — that is the job of Rotating Banner, 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 banner, announcement, carousel.
- 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 Rotating Banner block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Rotating Banner”. It sits under Effects. After insert, open Messages and set “Link Label”, “Link URL”, “Link Target”, “Countdown To (ISO date, optional)”.
What makes Rotating Banner different from other Blockenberg blocks?
A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer. Inspector labels on this block include “Link Label”, “Link URL”, “Link Target”, “Countdown To (ISO date, optional)”.
Is the Rotating Banner Gutenberg block free?
Yes. Rotating Banner ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Rotating 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: Messages, Rotation & Behaviour, Appearance, Navigation Colors).
Related effects blocks
Marquee / Announcement Bar
Scrolling announcement bar with pause on hover and accessibility support.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
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.
Marquee Cards
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
Word Flip
Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Rotating Banner from the Gutenberg inserter.