Dynamic Month & Year Gutenberg Blocks

Lesson 3 of 12 2 min read
  • JNext lesson
  • KPrevious lesson
  • FSearch lessons
  • EscClear search

All blocks are registered under the “Widgets” category in the Block Inserter.

The Dynamic Date block is the block-native way to insert self-updating dates, with Published Date and Modified Date blocks joining in 1.7.2 for displaying post timestamps anywhere in a layout. The Live Countdown block rounds out the set: version 1.8.0 rebuilt it with recurring annual mode, cache-aware client updates, and leap-day handling. All four live under the Widgets category in the inserter.

Dynamic Date Block (dmyip/dynamic-date)

A general-purpose block for any dynamic date type with live editor preview.

Attributes:

  • type: string | "year" | Date type to display
  • format: string | "" | Custom PHP date format
  • offset: number | 0 | Year or month offset
  • date: string | "" | Target date for countdown/age types (YYYY-MM-DD, or MM-DD for recurring types)
  • rule: string | "" | Recurring rule for occurrence types, like "last sunday of january"
  • case: string | "none" | Output case: none, title, upper, lower
  • rolloverDay: number | 0 | Switch month output to the next month after this day of the month
    Available types: year, nyear, pyear, month, month_short, month_number, nmonth, pmonth, date, monthyear, day, weekday, weekday_short, published, modified, blackfriday, cybermonday, daysuntil, dayssince, daysuntilnext, nextoccurrence, occurrenceyear, age, age_ym, age_ymd, age_ordinal, season, season_south

Block Supports:

  • Typography: font size, line height
  • Color: text, background
  • Spacing: margin, padding
  • Alignment: left, center, right
  • HTML editing disabled (html: false)

Rendering: Server-side via render.php. The block wraps output in a <p> tag with get_block_wrapper_attributes().

Live Countdown Block (dmyip/countdown)

Real-time countdown powered by the WordPress Interactivity API. Updates live without page reload.

Attributes:

  • mode: string | "until" | Direction: until or since
  • targetDate: string | "" | Target date (YYYY-MM-DD)
  • label: string | "days" | Label text next to number
  • showLabel: boolean | true | Show/hide label
  • recurring: boolean | false | Added in 1.8.0. Count down to the next annual occurrence of the target’s month and day, rolling over automatically each year (leap-day dates handled)
    Block Supports:
  • Typography: font size, line height
  • Color: text, background
  • Spacing: margin, padding
  • Alignment: left, center, right
  • Interactivity API: true

How it works:

  • Server-side: Calculates the initial day count in the site timezone and renders HTML with data-wp-* attributes
  • Client-side: Uses @wordpress/interactivity store (dmyip/countdown); since 1.8.0 the view.js file ships as a proper JavaScript module
  • Recalculates on load and once a minute against the site timezone, so the number stays correct even when a caching plugin serves stale page HTML

Published Date Block (dmyip/published-date)

Displays the post’s publication date.

Attributes:

  • format: string | "" | Custom date format (empty = WordPress default from Settings > General)
  • prefix: string | "" | Text before the date
  • suffix: string | "" | Text after the date
    Context used: postId, postType

Block Supports:

  • Typography: font size, line height
  • Color: text, background
  • Spacing: margin, padding
  • Alignment: left, center, right

Rendering: Server-side through the shared date engine. Reads the post’s date via get_post_datetime() with the post ID from block context. Falls back to WordPress date format from Settings > General when format is empty.

Modified Date Block (dmyip/modified-date)

Displays the post’s last modified date.

Attributes: Same as Published Date Block.

Context used: postId, postType

Rendering: Server-side through the shared date engine. Reads the post’s modified date via get_post_datetime() with the post ID from block context.

Editor Toolbar Integration

The plugin adds a toolbar button to the Block Editor’s formatting toolbar that works in any text-based block (Paragraph, Heading, List, etc.).

  • Click the toolbar button to see a dropdown of all shortcode categories
  • Since 1.8.0 the picker is searchable: filter by name or shortcode instead of scrolling the full list
  • Select a shortcode to insert it at the cursor position
  • Inserted shortcodes are visually highlighted with a distinct background color

The toolbar is registered via build/index.js and uses localized data (dmyipEditorData since 1.8.0) for live preview values.

Quick answers to common questions:

Block or shortcode: which should I use?

Blocks for layouts and patterns where you want visual editing and settings panels; shortcodes for inline use in sentences, titles, and meta fields where a block can’t go. They render through the same engine, so output is identical.

What do the Published and Modified Date blocks add?

They render the post’s own dates with your chosen format, useful in custom layouts and patterns where the theme’s date display doesn’t fit. Unlike the Dynamic Date block, they reflect the post’s timestamps rather than today’s date.