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.

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.