Effects · Gutenberg
Flip Countdown block for WordPress
An airport-style flip-clock countdown timer with animated flip cards for days, hours, minutes and seconds.
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
An airport-style flip-clock countdown timer with animated flip cards for days, hours, minutes and seconds.
Inspector panels on this block: Content, Countdown Settings, Card Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Target date & time (ISO format)” (e.g. 2026-12-31T23:59:59); “When countdown ends” options: Show end message, Hide the block, Keep showing zeros.
Where to find it
Gutenberg inserter → Effects → search “Flip Countdown” (block name `blockenberg/flip-countdown` in block.json). Style it in the sidebar after insert.
How to use Flip Countdown block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Flip Countdown”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Target date & time (ISO format)”, “End message”, “When countdown ends”, “Show Days”.
- 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 |
|---|---|
| Target date & time (ISO format) | Text field in the inspector. e.g. 2026-12-31T23:59:59. Saved as `targetDate`. |
| End message | Text field in the inspector. block.json default: 🎉 The wait is over!. Saved as `endMessage`. |
| When countdown ends | Select control; the chosen value is saved on the block. Options: Show end message; Hide the block; Keep showing zeros. block.json default: message. Saved as `endAction`. |
| 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 unit 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`. |
| Card border radius | Numeric range control in the inspector. Range 0–30. block.json default: 8. Saved as `cardRadius`. |
| Gap between units | Numeric range control in the inspector. Range 4–60. block.json default: 16. Saved as `cardGap`. |
| Card background | Color control in the inspector. block.json default: #1e1b4b. Saved as `flipBg`. |
| Digit color | Color control in the inspector. block.json default: #ffffff. Saved as `flipColor`. |
| Hinge color | Color control in the inspector. block.json default: #0f0e17. Saved as `flipHingeBg`. |
| Label color | Color control in the inspector. block.json default: #64748b. Saved as `labelColor`. |
| Separator color | Color control in the inspector. block.json default: #6366f1. Saved as `separatorColor`. |
| Section background | Color control in the inspector. block.json default: #f8fafc. Saved as `sectionBg`. |
| Title color | Color control in the inspector. block.json default: #1e1b4b. Saved as `titleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- An airport-style flip-clock countdown timer with animated flip cards for days, hours, minutes and seconds — that is the job of Flip Countdown, not a generic content block.
- Use it when you need the editor control labeled “Target date & time (ISO format)”, 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 Flip Countdown block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Flip Countdown”. It sits under Effects. After insert, open Content and set “Target date & time (ISO format)”, “End message”, “When countdown ends”, “Show Days”.
What makes Flip Countdown different from other Blockenberg blocks?
An airport-style flip-clock countdown timer with animated flip cards for days, hours, minutes and seconds. Inspector labels on this block include “Target date & time (ISO format)”, “End message”, “When countdown ends”, “Show Days”.
Is the Flip Countdown Gutenberg block free?
Yes. Flip Countdown ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Flip 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: Content, Countdown Settings, Card Style).
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 Flip Countdown from the Gutenberg inserter.