Title: Date Block
Author: Andrea Roenning
Published: July 8, 2026

---

# Date Block

## In this article

 * [Add a Date block](https://wordpress.org/documentation/article/date-block/?output_format=md#add-a-date-block)
 * [Block toolbar](https://wordpress.org/documentation/article/date-block/?output_format=md#block-toolbar)
    - [Transform](https://wordpress.org/documentation/article/date-block/?output_format=md#transform)
    - [Block moving tools](https://wordpress.org/documentation/article/date-block/?output_format=md#block-moving-tools)
    - [Change text alignment](https://wordpress.org/documentation/article/date-block/?output_format=md#change-text-alignment)
    - [Change date](https://wordpress.org/documentation/article/date-block/?output_format=md#change-date)
    - [More options](https://wordpress.org/documentation/article/date-block/?output_format=md#more-options)
 * [Block settings](https://wordpress.org/documentation/article/date-block/?output_format=md#block-settings)
    - [Transform to variation button](https://wordpress.org/documentation/article/date-block/?output_format=md#transform-to-variation-button)
    - [Settings](https://wordpress.org/documentation/article/date-block/?output_format=md#settings)
    - [Styles](https://wordpress.org/documentation/article/date-block/?output_format=md#styles)
 * [Changelog](https://wordpress.org/documentation/article/date-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/date-block/?output_format=md#wp--skip-link--target)

[Go to the list of Blocks](https://wordpress.org/documentation/article/blocks/)

Use the Date block to display a custom date.

[⌊Editor view of the date block set to a custom date of January 1, 2026⌉⌊Editor 
view of the date block set to a custom date of January 1, 2026⌉[

## 󠀁[Add a Date block](https://wordpress.org/documentation/article/date-block/?output_format=md#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.

![Add a date block with a slash command](https://wordpress.org/documentation/files/
2026/07/date-block-slash.png)

You can also quickly add the Date block by typing `/date` and pressing **Enter**.

[Detailed instructions on adding blocks.](https://wordpress.org/documentation/article/adding-a-new-block/)

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/date-block/?output_format=md#block-toolbar)󠁿

![Date b;pcl tpp;bar](https://wordpress.org/documentation/files/2026/07/date-block-
toolbar.png)

To view the block toolbar, click on the block and the toolbar will be displayed.

### 󠀁[Transform](https://wordpress.org/documentation/article/date-block/?output_format=md#transform)󠁿

![Date block transforms](https://wordpress.org/documentation/files/2026/07/date-
block-transforms.png)

Click on the **Transform** button to convert the Date block into a Post Date, Modified
Date, Group, Columns or Details block.

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

### 󠀁[Block moving tools](https://wordpress.org/documentation/article/date-block/?output_format=md#block-moving-tools)󠁿

![Block moving tools](https://wordpress.org/documentation/files/2026/07/date-block-
toolbar-move.png)

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

[Get more information about moving a block within the editor.](https://wordpress.org/documentation/article/moving-blocks/)

### 󠀁[Change text alignment](https://wordpress.org/documentation/article/date-block/?output_format=md#change-text-alignment)󠁿

![Block toolbar align](https://wordpress.org/documentation/files/2026/07/date-block-
toolbar-align.png)

Click the **Change alignment** 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.

### 󠀁[Change date](https://wordpress.org/documentation/article/date-block/?output_format=md#change-date)󠁿

![Block toolbar change date display](https://wordpress.org/documentation/files/2026/
07/date-block-edit-date-499x1024.png)

Click the **Change date** button in the Block toolbar to display a modal with date
settings.

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.

Click anywhere outside the modal, press the Escape key, or click on the button with
the X to close the modal.

### 󠀁[More options](https://wordpress.org/documentation/article/date-block/?output_format=md#more-options)󠁿

The **More options** 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.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block settings](https://wordpress.org/documentation/article/date-block/?output_format=md#block-settings)󠁿

![Block settings button](https://wordpress.org/documentation/files/2022/03/block-
settings-button-7-0.png)

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**
button next to the Save/Publish button.

### 󠀁[Transform to variation button](https://wordpress.org/documentation/article/date-block/?output_format=md#transform-to-variation-button)󠁿

The Date block can be easily transformed into a [Post Date](https://wordpress.org/documentation/article/post-date-block/)
or [Modified Date](https://wordpress.org/documentation/article/post-modified-date-block/)
block either by choosing the Transform button on the block toolbar or the **Transform
to variation** button from the block settings.

![Transform to a variation button](https://wordpress.org/documentation/files/2026/
07/Screenshot-2026-07-08-at-4.36.03-PM.png)

The Image block settings panel is divided into two tabs – **Settings**, and **Styles**.

### 󠀁[Settings](https://wordpress.org/documentation/article/date-block/?output_format=md#settings)󠁿

![Post Date Block Settings tab](https://wordpress.org/documentation/files/2022/03/
block-settings-tab.png)

#### 󠀁[Default format](https://wordpress.org/documentation/article/date-block/?output_format=md#default-format)󠁿

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](https://wordpress.org/documentation/article/customize-date-and-time-format/)
to learn how.

To change the Date block to use a different format from your site’s default format,
toggle off the **Default format** settings.

You can choose a format from a list of predefined selections under **Choose a format**.

![Settings custom format dropdown options. ](https://wordpress.org/documentation/
files/2022/03/Screenshot-2026-07-05-at-9.09.22-AM.png)

Or you can choose **Custom** from the drop down and enter a new format string in
the input box that appears.

![Settings custom format dropdown options with Custom selected](https://wordpress.
org/documentation/files/2022/03/Screenshot-2026-07-05-at-9.11.05-AM.png)

#### 󠀁[Link to Post](https://wordpress.org/documentation/article/date-block/?output_format=md#link-to-post)󠁿

Toggle on the **Link to post** 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.

#### 󠀁[Advanced](https://wordpress.org/documentation/article/date-block/?output_format=md#advanced)󠁿

The following Advanced settings options are available: HTML Anchor, Additional CSS
Class(es), Additional CSS, and Styles.

[Learn more about advanced settings.](https://wordpress.org/documentation/article/advanced-settings-overview/)

### 󠀁[Styles](https://wordpress.org/documentation/article/date-block/?output_format=md#styles)󠁿

#### 󠀁[Color](https://wordpress.org/documentation/article/date-block/?output_format=md#color)󠁿

The Date block provides Color settings options to change the text and background
colors.

[[[[[See this guide for more information about changing colors.](https://wordpress.org/documentation/article/colors-settings-overview/)

#### 󠀁[Typography](https://wordpress.org/documentation/article/date-block/?output_format=md#typography)󠁿

The Date block provides typography settings to change the font family, size, appearance,
line height, letter case, letter spacing, and decoration.

[[[Get more details about changing typography settings.](https://wordpress.org/documentation/article/typography-settings-overview/)

#### 󠀁[Dimensions](https://wordpress.org/documentation/article/date-block/?output_format=md#dimensions)󠁿

The Date block block provides dimension settings options to change padding and margin
size.

[Learn more about dimension controls.](https://wordpress.org/documentation/article/dimension-controls-overview/)

#### 󠀁[Border](https://wordpress.org/documentation/article/date-block/?output_format=md#border)󠁿

The Date block provides border settings options to add border color, width, and 
radius.

[Learn more about border settings.](https://wordpress.org/documentation/article/border-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/date-block/?output_format=md#changelog)󠁿

 * Created 2026-07-08

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/date-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fdate-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

July 8, 2026

Last updated

July 8, 2026