Effects · Gutenberg
Countdown Progress block for WordPress
Visual ring or bar countdown timer to a target date, with live ticking.
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
Visual ring or bar countdown timer to a target date, with live ticking.
Inspector panels on this block: Content, Style & Layout, Units. Those titles come from index.js, not from a shared template.
Behavior controls: “Display Style” options: Rings (SVG), Bars.
Where to find it
Gutenberg inserter → Effects → search “Countdown Progress” (block name `blockenberg/countdown-progress` in block.json). Style it in the sidebar after insert.
How to use Countdown Progress block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Countdown Progress”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Heading”, “Subtext”, “End Date (YYYY-MM-DDTHH:mm:ss)”, “Display Style”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Heading | Text field in the inspector. block.json default: Launching In. Saved as `heading`. |
| Subtext | Text field in the inspector. block.json default: Don't miss out — get notified when we go live.. Saved as `subtext`. |
| End Date (YYYY-MM-DDTHH:mm:ss) | Text field in the inspector. Saved as `endDate`. |
| Display Style | Select control; the chosen value is saved on the block. Options: Rings (SVG); Bars. block.json default: ring. Saved as `style`. |
| Ring Radius | Numeric range control in the inspector. Range 30–100. block.json default: 60. Saved as `radius`. |
| Stroke Width | Numeric range control in the inspector. Range 4–20. block.json default: 10. Saved as `strokeWidth`. |
| Max Width | Numeric range control in the inspector. Range 400–1400. block.json default: 900. Saved as `maxWidth`. |
| Padding Top | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Show Days | On/off toggle in the inspector. On by default. Saved as `showDays`. |
| Show Hours | On/off toggle in the inspector. On by default. Saved as `showHours`. |
| Show Minutes | On/off toggle in the inspector. On by default. Saved as `showMins`. |
| Show Seconds | On/off toggle in the inspector. On by default. Saved as `showSecs`. |
| Show Labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Heading | Color control in the inspector. block.json default: #ffffff. Saved as `headingColor`. |
| Subtext | Color control in the inspector. block.json default: #94a3b8. Saved as `subColor`. |
| Ring / Bar Fill | Color control in the inspector. block.json default: #6366f1. Saved as `ringColor`. |
| Ring / Bar Track | Color control in the inspector. block.json default: #1e293b. Saved as `ringBg`. |
| Number | Color control in the inspector. block.json default: #ffffff. Saved as `numColor`. |
| Unit Label | Color control in the inspector. block.json default: #94a3b8. Saved as `labelColor`. |
| Heading (Typo Heading) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Subtext (Typo Sub) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSub`. |
| Number (Typo Num) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoNum`. |
| Unit Label (Typo Unit) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoUnit`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Visual ring or bar countdown timer to a target date, with live ticking — that is the job of Countdown Progress, not a generic content block.
- Use it when you need the editor control labeled “Heading”, 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 Countdown Progress block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Countdown Progress”. It sits under Effects. After insert, open Content and set “Heading”, “Subtext”, “End Date (YYYY-MM-DDTHH:mm:ss)”, “Display Style”.
What makes Countdown Progress different from other Blockenberg blocks?
Visual ring or bar countdown timer to a target date, with live ticking. Inspector labels on this block include “Heading”, “Subtext”, “End Date (YYYY-MM-DDTHH:mm:ss)”, “Display Style”.
Is the Countdown Progress Gutenberg block free?
Yes. Countdown Progress ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Countdown Progress 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: Content, Style & Layout, Units).
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 Countdown Progress from the Gutenberg inserter.