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

[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 <amitraj2203@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

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