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. All three 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 offset
  • date: string | "" | Target date for countdown/age types
  • ageFormat: string | "y" | Age display format: y, ym, ymd
    Available types: year, nyear, pyear, month, month_short, month_number, nmonth, pmonth, date, monthyear, day, weekday, weekday_short, published, modified, blackfriday, cybermonday, daysuntil, dayssince, 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
    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 initial day count, renders HTML with data-wp-* attributes
  • Client-side: Uses @wordpress/interactivity store (dmyip/countdown) with view.js module
  • Auto-updates at midnight via setTimeout (calculates ms until next day)

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. Uses get_the_time() 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. Uses get_the_modified_time() 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
  • 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 (dmyipData) 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.