Post Date & Comment Date: Add relative date format

[amitraj2203]

What?

Closes: #62259

Why?

This PR addresses the need for the Post Date block to display the date in a relative format.

How?

This PR adds a Time Ago human-diff date format option to display relative times (e.g., "2 days ago"), enhancing the flexibility of date formatting in the editor.

Testing Instructions

1. Edit a Post/Page.
2. Add a Date block.
3. See the last option in CHOOSE A FORMAT

Screenshots or screencast

✍️ Dev note: New 'human-diff' Date Format Option

A new date format option has been introduced for the Post Date and Comment Date blocks, allowing users to display dates in a human-readable, relative format.

The human-diff format presents dates in a more intuitive way, such as 12 hours ago, 2 days ago, or a month ago. This enhancement provides a more user-friendly way to display date information, which can improve readability and engagement for readers.

To use this new format, users can select the option that displays an example of the relative time format (e.g., "2 years ago") from the Choose a format dropdown in the block settings panel for both the Post Date and Comment Date blocks. The feature utilizes WordPress's built-in human_time_diff() function to calculate and display the relative time difference.

To access this option:

1. Insert a Post Date or Comment Date block in your post or page.
2. In the block's settings panel, locate the Choose a format option.
3. Click on the dropdown to reveal various date format options.
4. Select the option that shows an example of the relative time format (e.g., "2 years ago").

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: amitraj2203 <[email protected]>
Co-authored-by: noisysocks <[email protected]>
Co-authored-by: ramonjd <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[noisysocks]

Nice, thanks for this @amitraj2203!

I don't think it's a good idea to do this by storing 'Time Ago' in the format attribute. Technically 'Time Ago' is a valid format string:

<?php
echo date('Time Ago'); // prints: UTC4806UTC AM22024

It's unlikely a user would actually want to use that format string but nonetheless I think it's best for us to not mix this data.

One idea is to add a new boolean attribute isRelative which when true means that the format is optional and the outputted date will be a relative string e.g. 2 months ago. What do you think of that approach?

[amitraj2203]

Hi @noisysocks,
Thanks for the suggestion. Yes, we can proceed with that. Just to confirm, I'll be using a ToggleControl for the new boolean attribute, correct?
For example,

Screen.Recording.2024-06-05.at.2.23.51.PM.mov

[noisysocks]

No I think we should still keep the dropdown as that's a better UI. Just changing the way that those settings are stored. Let me know if you need help.

[amitraj2203]

Hi @noisysocks!
So, if I understand correctly, when the user selects the Time Ago option from the dropdown, we should set the isRelative attribute to true and leave the format attribute as default or empty?

Also, the changes in the DateFormatPicker component are good to go or is there anything else we need to adjust there?
I would like to change Time Ago to Relative Time as it's making more sense.

[noisysocks]

Sorry @amitraj2203, I've changed my mind 😅

I think your approach of using the format attribute is right. Let's simply update the format string that denotes a relative date to be "human-diff".

My change of heart comes from reading this post by @dmsnell which uses format="human-diff" in a proposed Post Date bit and that looks pretty good to me.

[noisysocks]

Thanks so much for this PR @amitraj2203.

I hope you don't mind I pushed some changes: it now uses 'human-diff' instead of 'Time Ago' as the format value that indicates a relative time, it works in the Comment Date block now as well, and it now ensures that the example date shown is a relatively recent date. I also fixed some minor internationalisation problems.

[NikolaVasic12]

Hi @amitraj2203,
While solving the problem of translating "ago", I came across your commit. Can you tell me whether this will solve the problem of translating the word "ago" and whether this change will be included in the next WP version?

Thank you

[fabiankaegy]

Hey @amitraj2203 👋

Would you be able to help write a dev note for this for the 6.7 release? We are planning to have this as part of a larger Miscellaneous Editor Updates note.

We are hoping to get all drafts in by October 13th to leave some time for reviews before the RC1.

All Dev Notes get tracked in #65784 so feel free to leave a note there or ping me directly :)

Please let us know if you can assist with that.

Thanks in advance :)

[amitraj2203]

Hi @fabiankaegy, sorry for the delayed response. I have updated this PR's description with the dev note. Please take a look at it and let me know if any changes need to be made.

Thanks :)