Blog · Gutenberg
Dynamic Date block for WordPress
Outputs the current date, time or copyright year automatically, with live clock option.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Outputs the current date, time or copyright year automatically, with live clock option.
Inspector panels on this block: Date Settings, Text & Style, Color. Those titles come from index.js, not from a shared template.
Behavior controls: “Format” options: Long Date (Monday, Jan 1, 2024), Short Date (Jan 1, 2024), Numeric Date (01/01/2024), Year Only (2024), Time 12h (1:30 PM); “Timezone” options: Site Timezone, UTC, Custom; “HTML Tag” options: span, p, div; “Text & Style — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Blog → search “Dynamic Date” (block name `blockenberg/dynamic-date` in block.json). Style it in the sidebar after insert.
How to use Dynamic Date block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Dynamic Date”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Date Settings. Set “Format”, “Timezone”, “Custom Timezone”, “Live Clock (auto-update)”.
- Check the published page. The view script reads HTML data attributes: data-format, data-live, data-tz. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Format | Select control; the chosen value is saved on the block. Options: Long Date (Monday, Jan 1, 2024); Short Date (Jan 1, 2024); Numeric Date (01/01/2024); Year Only (2024); Time 12h (1:30 PM); Time 24h (13:30); Date & Time. block.json default: long-date. Saved as `format`. |
| Timezone | Select control; the chosen value is saved on the block. Options: Site Timezone; UTC; Custom. block.json default: site. Saved as `timezone`. |
| Custom Timezone | Select control; the chosen value is saved on the block. block.json default: UTC. Saved as `customTz`. |
| Live Clock (auto-update) | On/off toggle in the inspector. Off by default. Saved as `liveClock`. |
| Prefix Text | Text field in the inspector. Saved as `prefix`. |
| Suffix Text | Text field in the inspector. Saved as `suffix`. |
| HTML Tag | Select control; the chosen value is saved on the block. Options: span; p; div. block.json default: span. Saved as `tag`. |
| Text & Style — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `align`. |
| Typography — Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoText`. |
| Text Color | Color control in the inspector. Saved as `textColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-format, data-live, data-tz.
When this is the right block
- Outputs the current date, time or copyright year automatically, with live clock option — that is the job of Dynamic Date, not a generic content block.
- Use it when you need the editor control labeled “Format”, which exists on this block’s inspector.
- It matches pages about date, time, year.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Dynamic Date block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Dynamic Date”. It sits under Blog. After insert, open Date Settings and set “Format”, “Timezone”, “Custom Timezone”, “Live Clock (auto-update)”.
What makes Dynamic Date different from other Blockenberg blocks?
Outputs the current date, time or copyright year automatically, with live clock option. Inspector labels on this block include “Format”, “Timezone”, “Custom Timezone”, “Live Clock (auto-update)”.
Is the Dynamic Date Gutenberg block free?
Yes. Dynamic Date ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Dynamic Date to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Date Settings, Text & Style, Color).
Related blog blocks
Post Meta Bar
A configurable post metadata row: author, date, reading time, categories, tags, and comment count.
Reading Time
Displays estimated reading time calculated from the post content. Fully customizable styling.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Dynamic Date from the Gutenberg inserter.