Effects · Gutenberg
Content Ticker block for WordPress
A horizontal scrolling news/announcement ticker with a colored label prefix and clickable items.
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 horizontal scrolling news/announcement ticker with a colored label prefix and clickable items.
Inspector panels on this block: Ticker Items, Ticker Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Scroll direction” options: ← Scroll left, → Scroll right.
Where to find it
Gutenberg inserter → Effects → search “Content Ticker” (block name `blockenberg/content-ticker` in block.json). Style it in the sidebar after insert.
How to use Content Ticker block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Content Ticker”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Ticker Items. Set “Headline text”, “Link URL (optional)”, “Show prefix label”, “Prefix label”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Headline text | Text field in the inspector. |
| Link URL (optional) | Text field in the inspector. |
| Show prefix label | On/off toggle in the inspector. On by default. Saved as `showPrefix`. |
| Prefix label | Text field in the inspector. block.json default: 📢 Breaking. Saved as `prefix`. |
| Item separator | Text field in the inspector. block.json default: ◉ . Saved as `separator`. |
| Scroll direction | Select control; the chosen value is saved on the block. Options: ← Scroll left; → Scroll right. block.json default: left. Saved as `direction`. |
| Scroll speed (px/s) | Numeric range control in the inspector. Range 10–300. block.json default: 60. Saved as `speed`. |
| Pause on hover | On/off toggle in the inspector. On by default. Saved as `pauseOnHover`. |
| Height (px) | Numeric range control in the inspector. Range 28–80. block.json default: 44. Saved as `height`. |
| Border radius | Numeric range control in the inspector. Range 0–40. block.json default: 6. Saved as `borderRadius`. |
| Prefix padding | Numeric range control in the inspector. Range 8–60. block.json default: 20. Saved as `prefixPadding`. |
| Prefix background | Color control in the inspector. block.json default: #ef4444. Saved as `prefixBg`. |
| Prefix text | Color control in the inspector. block.json default: #ffffff. Saved as `prefixColor`. |
| Ticker background | Color control in the inspector. block.json default: #1e1b4b. Saved as `tickerBg`. |
| Ticker text | Color control in the inspector. block.json default: #e2e8f0. Saved as `tickerColor`. |
| Link color | Color control in the inspector. block.json default: #a5b4fc. Saved as `linkColor`. |
| Separator color | Color control in the inspector. block.json default: #475569. Saved as `separatorColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A horizontal scrolling news/announcement ticker with a colored label prefix and clickable items — that is the job of Content Ticker, not a generic content block.
- Use it when you need the editor control labeled “Headline text”, which exists on this block’s inspector.
- 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 Content Ticker block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Content Ticker”. It sits under Effects. After insert, open Ticker Items and set “Headline text”, “Link URL (optional)”, “Show prefix label”, “Prefix label”.
What makes Content Ticker different from other Blockenberg blocks?
A horizontal scrolling news/announcement ticker with a colored label prefix and clickable items. Inspector labels on this block include “Headline text”, “Link URL (optional)”, “Show prefix label”, “Prefix label”.
Is the Content Ticker Gutenberg block free?
Yes. Content Ticker ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Content Ticker 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: Ticker Items, Ticker Settings).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
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.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Content Ticker from the Gutenberg inserter.