From 661be5d769affc638549d6afce42618227c20ced Mon Sep 17 00:00:00 2001 From: Amit Raj Date: Wed, 5 Jun 2024 00:21:47 +0530 Subject: [PATCH 1/5] Adds "Time Ago" option to SelectControl of DateFormatPicker --- .../src/components/date-format-picker/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 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 8c35b025bfccf..b5706fa4d9bf1 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, @@ -92,13 +92,17 @@ function NonDefaultControls( { format, onChange } ) { _x( 'F j, Y', 'long date format' ), /* translators: See https://www.php.net/manual/datetime.format.php */ _x( 'M j', 'short date format without the year' ), + __( 'Time Ago' ), ] ), ]; const suggestedOptions = suggestedFormats.map( ( suggestedFormat, index ) => ( { key: `suggested-${ index }`, - name: dateI18n( suggestedFormat, EXAMPLE_DATE ), + name: + suggestedFormat === 'Time Ago' + ? humanTimeDiff( EXAMPLE_DATE, new Date() ) + : dateI18n( suggestedFormat, EXAMPLE_DATE ), format: suggestedFormat, } ) ); From efe5361e83007f43df2813783f6c3e4f76c16b66 Mon Sep 17 00:00:00 2001 From: Amit Raj Date: Wed, 5 Jun 2024 00:23:08 +0530 Subject: [PATCH 2/5] Update post-date block to have "Time ago" format --- packages/block-library/src/post-date/edit.js | 10 ++++++++-- packages/block-library/src/post-date/index.php | 15 ++++++++++++--- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index cfb5c57210600..01ac5edd4ba36 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 bcfff02fc178d..1f06a91bb132d 100644 --- a/packages/block-library/src/post-date/index.php +++ b/packages/block-library/src/post-date/index.php @@ -20,8 +20,13 @@ 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 ( 'Time Ago' === $attributes['format'] ) { + $formatted_date = human_time_diff( get_post_timestamp( $post_ID, 'date' ) ) . ' ' . __( 'ago' ); + } 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 +43,11 @@ 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 ( 'Time Ago' === $attributes['format'] ) { + $formatted_date = human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) . ' ' . __( 'ago' ); + } 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 { From c8391edcd5c4d001afc6d809a496d83c38845736 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 12 Jun 2024 14:54:55 +1000 Subject: [PATCH 3/5] Use 'human-diff' as format for relative dates --- .../components/date-format-picker/index.js | 24 +++++++++++-------- packages/block-library/src/post-date/edit.js | 4 ++-- .../block-library/src/post-date/index.php | 10 ++++---- 3 files changed, 22 insertions(+), 16 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 b5706fa4d9bf1..4ecf54ee6e43d 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -92,20 +92,22 @@ function NonDefaultControls( { format, onChange } ) { _x( 'F j, Y', 'long date format' ), /* translators: See https://www.php.net/manual/datetime.format.php */ _x( 'M j', 'short date format without the year' ), - __( 'Time Ago' ), ] ), ]; - const suggestedOptions = suggestedFormats.map( - ( suggestedFormat, index ) => ( { + const suggestedOptions = [ + ...suggestedFormats.map( ( suggestedFormat, index ) => ( { key: `suggested-${ index }`, - name: - suggestedFormat === 'Time Ago' - ? humanTimeDiff( EXAMPLE_DATE, new Date() ) - : dateI18n( suggestedFormat, EXAMPLE_DATE ), + name: dateI18n( suggestedFormat, EXAMPLE_DATE ), format: suggestedFormat, - } ) - ); + } ) ), + { + key: 'human-diff', + name: humanTimeDiff( EXAMPLE_DATE ), + format: 'human-diff', + }, + ]; + const customOption = { key: 'custom', name: __( 'Custom' ), @@ -115,7 +117,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/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 01ac5edd4ba36..e5d51b1172258 100644 --- a/packages/block-library/src/post-date/edit.js +++ b/packages/block-library/src/post-date/edit.js @@ -86,8 +86,8 @@ export default function PostDateEdit( { let postDate = date ? ( ) : ( diff --git a/packages/block-library/src/post-date/index.php b/packages/block-library/src/post-date/index.php index 1f06a91bb132d..8e778f4e85399 100644 --- a/packages/block-library/src/post-date/index.php +++ b/packages/block-library/src/post-date/index.php @@ -22,8 +22,9 @@ function render_block_core_post_date( $attributes, $content, $block ) { $post_ID = $block->context['postId']; - if ( 'Time Ago' === $attributes['format'] ) { - $formatted_date = human_time_diff( get_post_timestamp( $post_ID, 'date' ) ) . ' ' . __( 'ago' ); + 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 ); } @@ -43,8 +44,9 @@ 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 ) ) { - if ( 'Time Ago' === $attributes['format'] ) { - $formatted_date = human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) . ' ' . __( 'ago' ); + 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 ); } From 2dcb4fd30736837804ee67a11fb52d8162f06e0c Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 12 Jun 2024 14:55:16 +1000 Subject: [PATCH 4/5] Add support for relative dates to Comment Date block --- packages/block-library/src/comment-date/edit.js | 10 ++++++++-- packages/block-library/src/comment-date/index.php | 12 +++++++----- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/comment-date/edit.js b/packages/block-library/src/comment-date/edit.js index 7139abece9639..8ff940a78dd5e 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 f5876bb237b67..8deed94132488 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 ); From eb6bd507b63912175d878b29eeaa26ec8823fe6f Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 12 Jun 2024 15:11:42 +1000 Subject: [PATCH 5/5] Always use a somewhat recent example date --- .../components/date-format-picker/index.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 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 4ecf54ee6e43d..19ec0bf8c24b1 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -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 ) => @@ -98,12 +102,12 @@ function NonDefaultControls( { format, onChange } ) { 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( EXAMPLE_DATE ), + name: humanTimeDiff( exampleDate ), format: 'human-diff', }, ];