Countdowns

Countdown or count-up timer powered by the jQuery countdown plugin. It is shown in the block inserter as Canvas Countdown and registered as canvas-core/countdown.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• Counts Down ToDefaultA date and time

  A span is what a "your download starts in 10 seconds" timer needs: it restarts for every visitor instead of running out on a fixed date.

  ChoicesA date and timeA fixed span from page load

• Target Date (YYYY-MM-DD HH:mm)DefaultEmpty

  The date and time the countdown targets. Leave blank to default to 30 days from now.

  Shown when Counts Down To is "A date and time"

• HoursDefault0

  The hours part of the stretch of time the clock counts down, starting from the moment the visitor loads the page.

  Shown when Counts Down To is "A fixed span from page load"

• MinutesDefault0

  The minutes part of that stretch of time.

  Shown when Counts Down To is "A fixed span from page load"

• SecondsDefault10

  The seconds part of that stretch of time.

  Shown when Counts Down To is "A fixed span from page load"

• Bind to Event DateDefaultOff

  On an event page, count down to the event's start date/time (from the event's details) instead of the Target Date above.

• Count Elapsed TimeDefaultOff

  Count up from the target date instead of counting down to it.

• Redirect URL on ExpiryDefaultEmpty

  Optional URL to redirect to when the countdown reaches zero.

Settings

• Display FormatDefaultdHMS

  Controls which units are shown. Y=years, O=months, W=weeks, D=days, H=hours, M=minutes, S=seconds. Lowercase letters show only when non-zero.

• LayoutDefaultInline units

  Inline units are drawn by the countdown plugin; unit cards are a server-rendered grid you can style per unit.

  ChoicesInline unitsUnit cards

• Card StyleDefaultCard

  How each unit of the clock is boxed: a filled card, an outlined one, a circle, no box at all, or a dark card for a light background.

  ChoicesCardBorderedCircleMinimalDarkShown when Layout is "Unit cards"

• Unit SeparatorDefaultEmpty

  Character shown between units.

  Shown when Layout is "Unit cards"

• StyleDefaultDefault

  How large and how prominent the clock is. Inline sets it on one line for a sentence, and Coming Soon is the oversized treatment for a holding page.

  ChoicesDefaultMediumLargeInlineComing SoonShown when Layout is "Inline units"

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Flip Cards, Galleries.