Effects · Gutenberg
Countdown block for WordPress
Display a countdown timer to a specific date and time.
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
Display a countdown timer to a specific date and time.
Inspector panels on this block: Date & Time, Display Options, Labels, Expiration. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout Style” options: Cards, Inline, Minimal, Circle; “When Expired” options: Show Message, Hide Block, Redirect, Keep Last State.
Where to find it
Gutenberg inserter → Effects → search “Countdown” (block name `blockenberg/countdown` in block.json). Style it in the sidebar after insert.
How to use Countdown block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Countdown”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Date & Time. Set “Evergreen Mode”, “Days”, “Hours”, “Minutes”.
- Check the published page. The view script reads HTML data attributes: data-evergreen, data-evergreen-duration, data-evergreen-id, data-expired-action, data-expired-message, data-expired-redirect, data-show-labels, data-show-separators. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Evergreen Mode | On/off toggle in the inspector. On by default. Saved as `evergreenMode`. |
| Days | Numeric range control in the inspector. Range 0–30. block.json default: 0. Saved as `evergreenDays`. |
| Hours | Numeric range control in the inspector. Range 0–23. block.json default: 24. Saved as `evergreenHours`. |
| Minutes | Numeric range control in the inspector. Range 0–59. block.json default: 0. Saved as `evergreenMinutes`. |
| Layout Style | Select control; the chosen value is saved on the block. Options: Cards; Inline; Minimal; Circle. block.json default: cards. Saved as `layoutStyle`. |
| Show Title | On/off toggle in the inspector. Off by default. Saved as `showTitle`. |
| 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 `showMinutes`. |
| Show Seconds | On/off toggle in the inspector. On by default. Saved as `showSeconds`. |
| Show Labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Show Separators | On/off toggle in the inspector. On by default. Saved as `showSeparators`. |
| Days Label | Text field in the inspector. block.json default: Days. Saved as `labelDays`. |
| Hours Label | Text field in the inspector. block.json default: Hours. Saved as `labelHours`. |
| Minutes Label | Text field in the inspector. block.json default: Minutes. Saved as `labelMinutes`. |
| Seconds Label | Text field in the inspector. block.json default: Seconds. Saved as `labelSeconds`. |
| When Expired | Select control; the chosen value is saved on the block. Options: Show Message; Hide Block; Redirect; Keep Last State. block.json default: message. Saved as `expiredAction`. |
| Expired Message | Text field in the inspector. block.json default: Time's up!. Saved as `expiredMessage`. |
| Redirect URL | Text field in the inspector. Saved as `expiredRedirectUrl`. |
| Digit | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDigit`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLabel`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Container Padding | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `padding`. |
| Gap Between Units | Numeric range control in the inspector. Range 8–48. block.json default: 16. Saved as `gap`. |
| Digit Box Padding | Numeric range control in the inspector. Range 8–40. block.json default: 20. Saved as `digitPadding`. |
| Container Radius | Numeric range control in the inspector. Range 0–30. block.json default: 12. Saved as `borderRadius`. |
| Digit Box Radius | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `digitRadius`. |
| Colors — Background | Color control in the inspector. Saved as `wrapBg`. |
| Digit Background | Color control in the inspector. block.json default: #1e293b. Saved as `digitBg`. |
| Digit Color | Color control in the inspector. block.json default: #ffffff. Saved as `digitColor`. |
| Label Color | Color control in the inspector. block.json default: #64748b. Saved as `labelColor`. |
| Separator Color | Color control in the inspector. block.json default: #94a3b8. Saved as `separatorColor`. |
| Title Color | Color control in the inspector. block.json default: #1e293b. Saved as `titleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-evergreen, data-evergreen-duration, data-evergreen-id, data-expired-action, data-expired-message, data-expired-redirect, data-show-labels, data-show-separators.
- It writes to localStorage in the visitor’s browser, not to wp_options.
When this is the right block
- Display a countdown timer to a specific date and time — that is the job of Countdown, not a generic content block.
- Use it when you need the editor control labeled “Evergreen Mode”, which exists on this block’s inspector.
- It matches pages about countdown, timer, date.
- 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 block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Countdown”. It sits under Effects. After insert, open Date & Time and set “Evergreen Mode”, “Days”, “Hours”, “Minutes”.
Where does Countdown store visitor state?
In localStorage on that browser. Clearing site data resets it. It is not a WordPress user meta field unless render.php says so.
Is the Countdown Gutenberg block free?
Yes. Countdown ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Countdown 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: Date & Time, Display Options, Labels, Expiration).
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 from the Gutenberg inserter.