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..19ec0bf8c24b1 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 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 );
diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index cfb5c57210600..e5d51b1172258 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..8e778f4e85399 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 {