{"id":16369393,"date":"2026-07-08T21:37:06","date_gmt":"2026-07-08T21:37:06","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&p=16369393"},"modified":"2026-07-08T23:08:46","modified_gmt":"2026-07-08T23:08:46","slug":"date-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/date-block\/","title":{"rendered":"Date Block"},"content":{"rendered":"\n

Go to the list of Blocks<\/a><\/p>\n\n\n\n

Use the Date block to display a custom date.<\/p>\n\n\n\n

\"Editor<\/a><\/figure>\n\n\n\n

Add a Date block<\/h2>\n\n\n\n

To add the Date block, click the + Block Inserter<\/strong> button in the top-left corner of the editor. Search for the Image block and click on the block to add it to the page.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

You can also quickly add the Date block by typing \/date<\/code> and pressing Enter<\/strong>.<\/p>\n\n\n\n

Detailed instructions on adding blocks.<\/a><\/p>\n\n\n\n

Block toolbar<\/h2>\n\n\n\n
\"Date<\/figure>\n\n\n\n

To view the block toolbar, click on the block and the toolbar will be displayed.<\/p>\n\n\n\n

Transform<\/h3>\n\n\n\n
\"Date<\/figure>\n\n\n\n

Click on the Transform<\/strong> button to convert the Date block into a Post Date, Modified Date, Group, Columns or Details block.<\/p>\n\n\n\n

You will also see a “This block is connected” message indicating that the block has a binding to the Post’s published date.<\/p>\n\n\n\n

Block moving tools<\/h3>\n\n\n\n
\"Block<\/figure>\n\n\n\n

The block-moving tools allow you to move the block in the editor. Use the six dots icon<\/strong> to drag and drop the block and place it anywhere on the page. Alternatively, click on the up and down arrows<\/strong> to move the block up or down.<\/p>\n\n\n\n

Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n

Change text alignment<\/h3>\n\n\n\n
\"Block<\/figure>\n\n\n\n

Click the Change alignment<\/strong> button in the Block toolbar to display the alignment drop-down. You can align the block text to the left, make it center-aligned or align it to the right.<\/p>\n\n\n\n

Change date<\/h3>\n\n\n\n
\"Block<\/figure>\n\n\n\n

Click the Change date<\/strong> button in the Block toolbar to display a modal with date settings.<\/p>\n\n\n\n

You can select a custom date and time through the input fields and options or select the date from the calendar. You can use the arrow buttons or drop down box to select a different month.<\/p>\n\n\n\n

Click anywhere outside the modal, press the Escape<\/kbd> key, or click on the button with the X to close the modal.<\/p>\n\n\n\n

More options <\/h3>\n\n\n\n

The More options<\/strong> menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove the block.<\/p>\n\n\n\n

Read about these and other settings.<\/a><\/p>\n\n\n\n

Block settings<\/h2>\n\n\n\n
\"Block<\/figure>\n\n\n\n

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click on the Settings <\/strong>button next to the Save\/Publish button.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Transform to variation button<\/h3>\n\n\n\n

The Date block can be easily transformed into a Post Date<\/a> or Modified Date<\/a> block either by choosing the Transform button on the block toolbar or the Transform to variation<\/strong> button from the block settings.<\/p>\n\n\n\n

\"Transform<\/figure>\n\n\n\n

The Image block settings panel is divided into two tabs \u2013 Settings<\/strong>, and Styles<\/strong>.<\/p>\n\n\n\n

Settings<\/h3>\n\n\n\n
\"Post<\/figure>\n\n\n\n

Default format<\/h4>\n\n\n\n

This option is toggled on when you first add a Date block. Your site’s Default format can be changed in the site settings area, see customize default date and time format<\/a> to learn how.<\/p>\n\n\n\n

To change the Date block to use a different format from your site’s default format, toggle off the Default format<\/strong> settings.<\/p>\n\n\n\n

You can choose a format from a list of predefined selections under Choose a format<\/strong>. <\/p>\n\n\n\n

\"Settings<\/figure>\n\n\n\n

Or you can choose Custom<\/strong> from the drop down and enter a new format string in the input box that appears. <\/p>\n\n\n\n

\"Settings<\/figure>\n\n\n\n

Link to Post<\/h4>\n\n\n\n

Toggle on the Link to post<\/strong> option to link the date to the URL of the post. In a Query Loop block, this enables the website visitor to go to the post by clicking on the Date.<\/p>\n\n\n\n

Advanced<\/h4>\n\n\n\n

The following Advanced settings options are available: HTML Anchor, Additional CSS Class(es), Additional CSS, and Styles.<\/p>\n\n\n\n

Learn more about advanced settings.<\/a><\/p>\n\n\n\n

Styles<\/h3>\n\n\n\n

Color <\/h4>\n\n\n\n

The Date block provides Color settings options to change the text and background colors.<\/p>\n\n\n\n

<\/a><\/a>See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n

Typography <\/h4>\n\n\n\n

The Date block provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration.<\/p>\n\n\n\n

<\/a>Get more details about changing typography settings.<\/a><\/p>\n\n\n\n

Dimensions <\/h4>\n\n\n\n

The Date block block provides dimension settings options to change padding and margin size.<\/p>\n\n\n\n

Learn more about dimension controls.<\/a><\/p>\n\n\n\n

Border<\/h4>\n\n\n\n

The Date block provides border settings options to add border color, width, and radius.<\/p>\n\n\n\n

Learn more about border settings.<\/a><\/p>\n\n\n\n

\n

Changelog<\/h2>\n\n\n\n
    \n
  • Created 2026-07-08<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Go to the list of Blocks Use the Date block to display a custom date. Add a Date block To add the Date block, click the + Block Inserter button in the top-left corner of the editor. Search for the Image block and click on the block to add it to the page. You can also quickly […]<\/p>\n","protected":false},"author":20811757,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,85],"class_list":["post-16369393","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-text-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16369393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/users\/20811757"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16369393"}],"version-history":[{"count":10,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16369393\/revisions"}],"predecessor-version":[{"id":16369414,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16369393\/revisions\/16369414"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16369393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16369393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}