From 907a70e5a826e9dcbbbfa398d19c96bca6b0e423 Mon Sep 17 00:00:00 2001 From: Amit Raj <77401999+amitraj2203@users.noreply.github.com> Date: Wed, 12 Jun 2024 11:49:28 +0530 Subject: [PATCH] Post Date: Adds relative date format (#62298) * 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 Co-authored-by: noisysocks Co-authored-by: ramonjd --- .../components/date-format-picker/index.js | 38 ++++++++++++------- .../block-library/src/comment-date/edit.js | 10 ++++- .../block-library/src/comment-date/index.php | 12 +++--- packages/block-library/src/post-date/edit.js | 10 ++++- .../block-library/src/post-date/index.php | 17 +++++++-- 5 files changed, 62 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js index 8c35b025bfccf6..19ec0bf8c24b1d 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { _x, __ } from '@wordpress/i18n'; -import { dateI18n } from '@wordpress/date'; +import { dateI18n, humanTimeDiff } from '@wordpress/date'; import { useState, createInterpolateElement } from '@wordpress/element'; import { TextControl, @@ -13,11 +13,15 @@ import { __experimentalVStack as VStack, } from '@wordpress/components'; -// So that we can illustrate the different formats in the dropdown properly, -// show a date that has a day greater than 12 and a month with more than three -// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was -// released. -const EXAMPLE_DATE = new Date( 2022, 0, 25 ); +// So that we illustrate the different formats in the dropdown properly, show a date that is +// somwhat recent, has a day greater than 12, and a month with more than three letters. +const exampleDate = new Date(); +exampleDate.setDate( 20 ); +exampleDate.setMonth( exampleDate.getMonth() - 3 ); +if ( exampleDate.getMonth() === 4 ) { + // May has three letters, so use March. + exampleDate.setMonth( 3 ); +} /** * The `DateFormatPicker` component renders controls that let the user choose a @@ -54,7 +58,7 @@ export default function DateFormatPicker( { label={ __( 'Default format' ) } help={ `${ __( 'Example:' ) } ${ dateI18n( defaultFormat, - EXAMPLE_DATE + exampleDate ) }` } checked={ ! format } onChange={ ( checked ) => @@ -95,13 +99,19 @@ function NonDefaultControls( { format, onChange } ) { ] ), ]; - const suggestedOptions = suggestedFormats.map( - ( suggestedFormat, index ) => ( { + const suggestedOptions = [ + ...suggestedFormats.map( ( suggestedFormat, index ) => ( { key: `suggested-${ index }`, - name: dateI18n( suggestedFormat, EXAMPLE_DATE ), + name: dateI18n( suggestedFormat, exampleDate ), format: suggestedFormat, - } ) - ); + } ) ), + { + key: 'human-diff', + name: humanTimeDiff( exampleDate ), + format: 'human-diff', + }, + ]; + const customOption = { key: 'custom', name: __( 'Custom' ), @@ -111,7 +121,9 @@ function NonDefaultControls( { format, onChange } ) { }; const [ isCustom, setIsCustom ] = useState( - () => !! format && ! suggestedFormats.includes( format ) + () => + !! format && + ! suggestedOptions.some( ( option ) => option.format === format ) ); return ( diff --git a/packages/block-library/src/comment-date/edit.js b/packages/block-library/src/comment-date/edit.js index 7139abece96397..8ff940a78dd5eb 100644 --- a/packages/block-library/src/comment-date/edit.js +++ b/packages/block-library/src/comment-date/edit.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { useEntityProp } from '@wordpress/core-data'; -import { dateI18n, getSettings as getDateSettings } from '@wordpress/date'; +import { + dateI18n, + humanTimeDiff, + getSettings as getDateSettings, +} from '@wordpress/date'; import { InspectorControls, useBlockProps, @@ -64,7 +68,9 @@ export default function Edit( { let commentDate = date instanceof Date ? ( ) : ( diff --git a/packages/block-library/src/comment-date/index.php b/packages/block-library/src/comment-date/index.php index f5876bb237b67d..8deed941324886 100644 --- a/packages/block-library/src/comment-date/index.php +++ b/packages/block-library/src/comment-date/index.php @@ -28,11 +28,13 @@ function render_block_core_comment_date( $attributes, $content, $block ) { $classes = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : ''; $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); - $formatted_date = get_comment_date( - isset( $attributes['format'] ) ? $attributes['format'] : '', - $comment - ); - $link = get_comment_link( $comment ); + if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) { + // translators: %s: human-readable time difference. + $formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_comment_date( 'U', $comment ) ) ); + } else { + $formatted_date = get_comment_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $comment ); + } + $link = get_comment_link( $comment ); if ( ! empty( $attributes['isLink'] ) ) { $formatted_date = sprintf( '%2s', esc_url( $link ), $formatted_date ); diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index cfb5c572106008..e5d51b11722580 100644 --- a/packages/block-library/src/post-date/edit.js +++ b/packages/block-library/src/post-date/edit.js @@ -8,7 +8,11 @@ import clsx from 'clsx'; */ import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { useMemo, useState } from '@wordpress/element'; -import { dateI18n, getSettings as getDateSettings } from '@wordpress/date'; +import { + dateI18n, + humanTimeDiff, + getSettings as getDateSettings, +} from '@wordpress/date'; import { AlignmentControl, BlockControls, @@ -82,7 +86,9 @@ export default function PostDateEdit( { let postDate = date ? ( ) : ( dateLabel diff --git a/packages/block-library/src/post-date/index.php b/packages/block-library/src/post-date/index.php index bcfff02fc178d7..8e778f4e853997 100644 --- a/packages/block-library/src/post-date/index.php +++ b/packages/block-library/src/post-date/index.php @@ -20,8 +20,14 @@ function render_block_core_post_date( $attributes, $content, $block ) { return ''; } - $post_ID = $block->context['postId']; - $formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID ); + $post_ID = $block->context['postId']; + + if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) { + // translators: %s: human-readable time difference. + $formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID ) ) ); + } else { + $formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID ); + } $unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) ); $classes = array(); @@ -38,7 +44,12 @@ function render_block_core_post_date( $attributes, $content, $block ) { */ if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) { if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) { - $formatted_date = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID ); + if ( 'human-diff' === $attributes['format'] ) { + // translators: %s: human-readable time difference. + $formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) ); + } else { + $formatted_date = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID ); + } $unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) ); $classes[] = 'wp-block-post-date__modified-date'; } else {