Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Post Date & Comment Date: Add relative date format #62298

Merged
merged 5 commits into from
Jun 12, 2024
Merged

Post Date & Comment Date: Add relative date format #62298

merged 5 commits into from
Jun 12, 2024

Conversation

amitraj2203
Copy link
Contributor

@amitraj2203 amitraj2203 commented Jun 4, 2024 •
edited
Loading

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

image

✍️ 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 GitHub Actions
Copy link

github-actions bot commented Jun 4, 2024 •
edited
Loading

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 noisysocks added [Type] Enhancement A suggestion for improvement. [Block] Post Date Affects the Post Date Block labels Jun 5, 2024
@noisysocks
Copy link
Member

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
Copy link
Contributor Author

amitraj2203 commented Jun 5, 2024 •
edited
Loading

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Member

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
noisysocks approved these changes Jun 12, 2024
View reviewed changes
Copy link
Member

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@noisysocks noisysocks enabled auto-merge (squash) June 12, 2024 05:23
@noisysocks noisysocks changed the title Post Date: Adds relative date format Post Date: Add relative date format Jun 12, 2024
@noisysocks noisysocks added the [Block] Comment Date Affects the Comment Date Block label Jun 12, 2024
@noisysocks noisysocks changed the title Post Date: Add relative date format Post Date & Comment Date: Add relative date format Jun 12, 2024
@noisysocks noisysocks merged commit 907a70e into WordPress:trunk Jun 12, 2024
62 of 63 checks passed
@github-actions github-actions bot added this to the Gutenberg 18.6 milestone Jun 12, 2024
@NikolaVasic12
Copy link

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

patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
@amitraj2203 @noisysocks
@ramonjd @patil-vipul
Post Date: Adds relative date format (WordPress#62298)
2a0f9e8 
* Adds "Time Ago" option to SelectControl of DateFormatPicker

* Update post-date block to have "Time ago" format

* Use 'human-diff' as format for relative dates

* Add support for relative dates to Comment Date block

* Always use a somewhat recent example date

---------

Co-authored-by: amitraj2203 <[email protected]>
Co-authored-by: noisysocks <[email protected]>
Co-authored-by: ramonjd <[email protected]>
@t-hamano t-hamano mentioned this pull request Jun 24, 2024
Merged
@t-hamano t-hamano mentioned this pull request Jul 10, 2024
Closed
@fabiankaegy fabiankaegy added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Oct 1, 2024
@fabiankaegy fabiankaegy mentioned this pull request Oct 1, 2024
Closed
97 tasks
@fabiankaegy
Copy link
Member

fabiankaegy commented Oct 2, 2024 •
edited
Loading

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
Copy link
Contributor Author

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 :)

This was referenced Oct 26, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@noisysocks noisysocks noisysocks approved these changes

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Block] Comment Date Affects the Comment Date Block [Block] Post Date Affects the Post Date Block Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Enhancement A suggestion for improvement.
Projects
WordPress 6.7 Documentation
Status: Todo
Milestone
Gutenberg 18.6
Development

Successfully merging this pull request may close these issues.

Post Date: Add relative date format
4 participants
@amitraj2203 @noisysocks @NikolaVasic12 @fabiankaegy