I am coming from the PHP world where I would just put

<div>
  <h1><?= get_the_title() ?></h1>
  <p><?= the_time('j F  Y'); ?></p>
</div>

Now I have a Gutenberg Edit.js block.

<div>
    <RichText
        className="snug huge"
        placeholder="Your title here"
        onChange={(content) => setAttributes({ title: content })}
        value={attributes.title}
        tagName="h1"
    />
    <p>[The date of the page or post needs to be formatted and placed here]</p>
</div>

How on earth do I put the date the post was published in?

Edit:

Recently I have found a list of all PHP template tags and their Gutenberg counterparts:

This has lead me to find the Post Date — however there is no documentation at all for it. I think it is what I am after, however I'm unsure how to use it.

I am coming from the PHP world where I would just put

<div>
  <h1><?= get_the_title() ?></h1>
  <p><?= the_time('j F  Y'); ?></p>
</div>

Now I have a Gutenberg Edit.js block.

<div>
    <RichText
        className="snug huge"
        placeholder="Your title here"
        onChange={(content) => setAttributes({ title: content })}
        value={attributes.title}
        tagName="h1"
    />
    <p>[The date of the page or post needs to be formatted and placed here]</p>
</div>

How on earth do I put the date the post was published in?

Edit:

Recently I have found a list of all PHP template tags and their Gutenberg counterparts: https://github.com/WordPress/gutenberg/issues/22724

This has lead me to find the Post Date — however there is no documentation at all for it. I think it is what I am after, however I'm unsure how to use it. https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-date

• block-editor

• What date? Of the post? – kero Commented Feb 25, 2022 at 14:48
• Yes the date of the post – Djave Commented Feb 25, 2022 at 15:15
• is this in the edit component, or is this in the save component/what gets shown on the frontend? RichText components are only used int he edit component in the block editor, they shouldn't be used in the save component because they're interactive. The output of the save component is turned into static HTML that gets saved in the database. If you want something dynamic that executes PHP when it's displayed then you need to render the block using PHP, which means that your first and original code is the solution – Tom J Nowell ♦ Commented Feb 25, 2022 at 15:59
• @TomJNowell It is in the Edit component. I am trying to make the editing experience look as similar as possible to the viewing experience, so I would like to show the post date within the Gutenberg editor. This means I can't use PHP — if you ignore my first code snippet, I purely want to show the date of the post in the Gutenberg editor. – Djave Commented Feb 25, 2022 at 16:02
• Nice find with the post-date block! What is the problem with using their method described here? – kero Commented Feb 25, 2022 at 17:03

1 Answer 1

I was able to get there by doing the following.

import * as wpDate from "@wordpress/date";

You can find the very limited documentation on that here: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-date/

I was able to use the following:

const post = wp.data.select("core/editor").getCurrentPost();
const postDate = wpDate.format("d|m|Y", post.date);

Then, when I needed it:

<div>
    <RichText
        className="snug huge"
        placeholder="Your title here"
        onChange={(content) => setAttributes({ title: content })}
        value={attributes.title}
        tagName="h1"
    />
    <p>{postDate}</p>
</div>