wpwebsite.dev

  • Countdown Timer Block for Gutenberg
Countdown Timer Block for Gutenberg - Image 1

Countdown Timer Block for Gutenberg

A lightweight Gutenberg block that adds a customizable countdown timer to any page or post.

The block lets you pick a target date and time, preview the live countdown directly in the editor, and control how the timer is rendered on the frontend. It supports both a compact text-only display and a structured segmented layout with optional labels.

  • Select a target date and time using the built-in DateTimePicker
  • Shows a live countdown preview in the editor (updates every second)
  • Provides an “end message” text displayed after the countdown reaches zero
  • Offers multiple display options:
    • Text-only mode (single DD:HH:MM:SS string)
    • Segmented mode (days / hours / minutes / seconds blocks)
  • Optional styling toggles:
    • Circle mode (adds a .circle class)
    • Show labels toggle (Nap / Óra / Perc / Másodperc, fully editable)

How it works (output)

On save, the block outputs a countdown wrapper with:

  • a data-date attribute containing the target ISO date string
  • CSS classes based on the selected style options:
    • circle (optional)
    • text-only (optional)

The frontend timer is designed to be driven by a script that reads the data-date value and updates the displayed countdown.

Editor-friendly localization

All visible labels (Days, Hours, Minutes, Seconds, end text) are editable block settings, making it easy to match the site language and tone without code changes.

There are no reviews yet.

Be the first to review “Countdown Timer Block for Gutenberg”

Your email address will not be published. Required fields are marked *