Add interactivity to comment-date block

packages/block-library/src/comment-date/block.json

@@ -18,6 +18,7 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
+		"interactivity": true,
 		"anchor": true,
 		"html": false,
 		"color": {
@@ -46,5 +47,6 @@
 				"fontSize": true
 			}
 		}
-	}
+	},
+	"viewScript": [ "file:./view.min.js" ]
 }

packages/block-library/src/comment-date/index.php

@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Server-side rendering of the `core/comment-date` block.
  *
@@ -26,21 +27,27 @@ 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
+
+	$formatted_time = sprintf(
+		'<time datetime="%1$s" data-wp-init="effects.core.checkDiff" data-wp-text="context.commentsDateDiff"></time>',
+		esc_attr( get_comment_date( 'c', $comment ) ),
 	);
-	$link               = get_comment_link( $comment );
+
+	$link = get_comment_link( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) ) {
-		$formatted_date = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_date );
+		$formatted_time = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_time );
 	}
 
 	return sprintf(
-		'<div %1$s><time datetime="%2$s">%3$s</time></div>',
+		'<div 
+			data-wp-context=\'{ "commentDate": "' . get_comment_time( 'c', false, true, $comment ) . '", "commentsDateDiff": ""}\'
+			%1$s
+		>
+			%2$s
+		</div>',
 		$wrapper_attributes,
-		esc_attr( get_comment_date( 'c', $comment ) ),
-		$formatted_date
+		$formatted_time
 	);
 }
 

packages/block-library/src/comment-date/view.js

@@ -0,0 +1,115 @@
+/**
+ * Internal dependencies
+ */
+import './runtime/init.js';
+import { store } from './runtime';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+( function ( domain, translations ) {
+	var localeData =
+		translations.locale_data[ domain ] || translations.locale_data.messages;
+	localeData[ '' ].domain = domain;
+	wp.i18n.setLocaleData( localeData, domain );
+} )( 'default', {
+	'translation-revision-date': '2023-03-07 19:10:38+0000',
+	generator: 'GlotPress/4.0.0-alpha.4',
+	domain: 'messages',
+	locale_data: {
+		messages: {
+			'': {
+				domain: 'messages',
+				'plural-forms':
+					'nplurals=3; plural=(n == 1) ? 0 : ((n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 12 || n % 100 > 14)) ? 1 : 2);',
+				lang: 'pl',
+			},
+			'Hello world!': [ 'Witaj swiecie' ],
+			'%s second ago': [
+				'%s sekunde temu',
+				'%s sekundy temu',
+				'%s sekund temu',
+			],
+			'%s minute ago': [
+				'%s minute temu',
+				'%s minuty temu',
+				'%s minut temu',
+			],
+			'%s hour ago': [
+				'%s godzine temu',
+				'%s godziny temu',
+				'%s godzin temu',
+			],
+			'%s day ago': [ '%s dzien temu', '%s dni temu', '%s dni temu' ],
+			'%s month ago': [
+				'%s miesiac temu',
+				'%s miesiace temu',
+				'%s miesiecy temu',
+			],
+			'%s year ago': [ '%s rok temu', '%s lata temu', '%s lat temu' ],
+		},
+	},
+	comment: {
+		reference: 'wp-includes/js/wp-auth-check.js',
+	},
+} );
+
+function makeTheUpdate( context ) {
+	const secondsDiff = Math.max(
+		Math.round( ( new Date() - new Date( context.commentDate ) ) / 1000 ),
+		1
+	);
+
+	if ( secondsDiff < 60 ) {
+		// Seconds
+		context.commentsDateDiff = sprintf(
+			_n( '%s second ago', '%s seconds ago', secondsDiff ),
+			secondsDiff
+		);
+		setTimeout( () => {
+			makeTheUpdate( context );
+		}, 1000 );
+	} else if ( secondsDiff < 3600 ) {
+		// Minutes
+		const minutesDiff = Math.round( secondsDiff / 60 );
+		context.commentsDateDiff = sprintf(
+			_n( '%s minute ago', '%s minutes ago', minutesDiff ),
+			minutesDiff
+		);
+		setTimeout( () => {
+			makeTheUpdate( context );
+		}, 60 * 1000 );
+	} else if ( secondsDiff < 3600 * 24 ) {
+		const hoursDiff = Math.round( secondsDiff / 3600 );
+		context.commentsDateDiff = sprintf(
+			_n( '%s hour ago', '%s hours ago', hoursDiff ),
+			hoursDiff
+		);
+	} else if ( secondsDiff < 3600 * 24 * 30 ) {
+		const daysDiff = Math.round( secondsDiff / ( 3600 * 24 ) );
+		context.commentsDateDiff = sprintf(
+			_n( '%s day ago', '%s days ago', daysDiff ),
+			daysDiff
+		);
+	} else if ( secondsDiff < 3600 * 24 * 365 ) {
+		const monthsDiff = Math.round( secondsDiff / ( 3600 * 24 * 30 ) );
+		context.commentsDateDiff = sprintf(
+			_n( '%s month ago', '%s months ago', monthsDiff ),
+			monthsDiff
+		);
+	} else {
+		const yearDiff = Math.round( secondsDiff / ( 3600 * 24 * 365 ) );
+		context.commentsDateDiff = sprintf(
+			_n( '%s year ago', '%s years ago', yearDiff ),
+			yearDiff
+		);
+	}
+}
+
+store( {
+	effects: {
+		core: {
+			checkDiff: ( { context } ) => {
+				makeTheUpdate( context );
+			},
+		},
+	},
+} );