Repository: woocommerce/woocommerce
Pull request #57530: [Experimental] Product Reviews: Add review date block
Author: login: mikachan
Labels: name: plugin: woocommerce
description: Issues related to the WooCommerce Core plugin.
name: needs: analysis
description: Indicates if the PR requires a PR testing scrub session.
name: block-type: reviews
description: Issues related to all  of the reviews related blocks.
Created: 2025-04-25T13:58:35Z | Merged: 2025-04-29T09:44:50Z

### Submission Review Guidelines:

-   I have followed the [WooCommerce Contributing Guidelines](https://github.com/woocommerce/woocommerce/blob/trunk/.github/CONTRIBUTING.md) and the [WordPress Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/).
-   I have checked to ensure there aren't other open [Pull Requests](https://github.com/woocommerce/woocommerce/pulls) for the same update/change.
-   I have reviewed my code for [security best practices](https://developer.wordpress.org/apis/security/).
-   Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

<!-- You can erase any parts of this template not applicable to your Pull Request. -->

### Changes proposed in this Pull Request:

<!-- If necessary, indicate if this PR is part of a bigger feature. Add a label with the format `focus: name of the feature [team:name of the team]`. -->

<!-- Describe the changes made to this Pull Request and the reason for such changes. -->

<!-- For bug fixes: If known, please provide links to help with traceability and escape analysis. -->
<!-- Please include a link to the issue of the bug being fixed, if one doesn't exist please create it. -->
<!-- If the PR that introduced the bug is known, please also add its link below. -->

This PR adds a new Product Review Date block, which is based on Core's Comment Date block.

Related to https://github.com/woocommerce/woocommerce/issues/55729.
Closes https://github.com/woocommerce/woocommerce/issues/57122.

### Screenshots or screen recordings:

<!-- If this PR includes UI changes, please provide screenshots or a screen recording for clarity. -->
<!-- This section can be removed if not applicable. -->

<img width="1508" alt="image" src="https://github.com/user-attachments/assets/429885ef-cb6e-4c04-a0cc-6cc50cc57ef9" />


<!-- Begin testing instructions -->

### How to test the changes in this Pull Request:

<!-- Include detailed instructions on how these changes can be tested. Review and follow the guide for how to write high-quality testing instructions. -->

Using the [WooCommerce Testing Instructions Guide](https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions), include your detailed testing instructions:

1. Load this branch and have the WooCommerce Beta Tester plugin activated
2. Go to Tools > WCA Test Helper > Features and enable the experimental blocks feature flag
3. Go to Appearance > Editor > Templates and edit the Single Product template
4. Add the Blockified Product Details block ( an accordion )
5. It should contain the Product Review Date block for each of the existing product reviews.
6. You should be able to edit both the "Default format" of the date, and the "Link to review" settings from the block settings panel

<!-- End testing instructions -->

### Testing that has already taken place:

<!-- Detail any testing that has already been conducted. -->
<!-- Include environment details such as hosting type, plugins, theme, store size, store age, and relevant settings. -->
<!-- Mention any analysis performed, such as assessing potential impacts on environment attributes and other plugins, performance profiling, or LLM/AI-based analysis. -->
<!-- Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public pull request. -->

### Changelog entry

<!-- You can optionally choose to enter a changelog entry by checking the box below and supplying data. -->
<!-- It will trigger the 'Add changelog to PR' CI job to create and push the entry into the branch. -->

<!-- Due to org permissions, the job might fail for PRs crated from a fork under GitHub organizations. Possible solutions: -->
<!-- * Create entry manually with `pnpm --filter='@woocommerce/plugin-woocommerce' changelog add` and push it into the branch (replace `@woocommerce/plugin-woocommerce` with package name from nearest `package.json` file) -->
<!-- * Create entry from supplied PR data and push it automatically `pnpm utils changefile pr-number-here -o github-org-name-here` -->

-   [x] Automatically create a changelog entry from the details below.

<!-- If no changelog entry is required for this PR, you can specify that below and provide a comment explaining why. This cannot be used if you selected the option to automatically create a changelog entry above. -->

-   [ ] This Pull Request does not require a changelog entry. (Comment required below)

<details>

<summary>Changelog Entry Details</summary>

#### Significance

<!-- Choose only one -->

-   [ ] Patch
-   [x] Minor
-   [ ] Major

#### Type

<!-- Choose only one -->

-   [ ] Fix - Fixes an existing bug
-   [x] Add - Adds functionality
-   [ ] Update - Update existing functionality
-   [ ] Dev - Development related task
-   [ ] Tweak - A minor adjustment to the codebase
-   [ ] Performance - Address performance issues
-   [ ] Enhancement - Improvement to existing functionality

#### Message <!-- Add a changelog message here -->

Add experimental product review date block for use within the product reviews block.

</details>

<details>

<summary>Changelog Entry Comment</summary>

#### Comment <!-- If your Pull Request doesn't require a changelog entry, a comment explaining why is required instead -->

</details>



Diff:
diff --git a/plugins/woocommerce/changelog/57530-add-product-review-date-block b/plugins/woocommerce/changelog/57530-add-product-review-date-block
new file mode 100644
index 0000000000000..d3c599858dd02
--- /dev/null
+++ b/plugins/woocommerce/changelog/57530-add-product-review-date-block
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add experimental product review date block for use within the product reviews block.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/block.json
new file mode 100644
index 0000000000000..002f6db060857
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/block.json
@@ -0,0 +1,64 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "woocommerce/product-review-date",
+	"title": "Product Review Date",
+	"category": "woocommerce",
+	"ancestor": [ "woocommerce/blockified-product-reviews" ],
+	"description": "Displays the date on which the review was posted.",
+	"textdomain": "woocommerce",
+	"attributes": {
+		"format": {
+			"type": "string"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"usesContext": [ "commentId" ],
+	"supports": {
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		}
+	}
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
new file mode 100644
index 0000000000000..57eb3a0e41f7f
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+
+export default function Edit( {
+	attributes: { format, isLink },
+	context: { commentId },
+	setAttributes,
+}: BlockEditProps< {
+	format: string;
+	isLink: boolean;
+} > & {
+	context: { commentId: number };
+} ) {
+	const blockProps = useBlockProps();
+	let [ date ] = useEntityProp(
+		'root',
+		'comment',
+		'date',
+		String( commentId )
+	);
+	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
+		'root',
+		'site',
+		'date_format'
+	);
+
+	if ( ! commentId || ! date ) {
+		date = _x( 'Review Date', 'block title', 'woocommerce' );
+	}
+
+	let reviewDate =
+		date instanceof Date ? (
+			<time dateTime={ dateI18n( 'c', date, true ) }>
+				{ format === 'human-diff'
+					? humanTimeDiff( date, new Date() )
+					: dateI18n( format || siteFormat, date, true ) }
+			</time>
+		) : (
+			<time>{ date }</time>
+		);
+
+	if ( isLink ) {
+		reviewDate = (
+			<a
+				href="#review-date-pseudo-link"
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				{ reviewDate }
+			</a>
+		);
+	}
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
+					<DateFormatPicker
+						format={ format }
+						defaultFormat={ siteFormat }
+						onChange={ ( nextFormat: string ) =>
+							setAttributes( { format: nextFormat } )
+						}
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link to review', 'woocommerce' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...blockProps }>{ reviewDate }</div>
+		</>
+	);
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/index.tsx
new file mode 100644
index 0000000000000..02c593d0ac464
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/index.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { postDate as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import './style.scss';
+
+// @ts-expect-error metadata is not typed.
+registerBlockType( metadata, {
+	icon,
+	edit,
+} );
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/style.scss
new file mode 100644
index 0000000000000..b95a0244a68aa
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/style.scss
@@ -0,0 +1,4 @@
+.wp-block-woocommerce-product-review-date {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/template.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/template.ts
index 476f9aef7aff5..1470772f12c7d 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/template.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/template.ts
@@ -67,7 +67,7 @@ const TEMPLATE: InnerBlockTemplate[] = [
 								},
 								[
 									[
-										'core/comment-date',
+										'woocommerce/product-review-date',
 										{
 											fontSize: 'small',
 										},
diff --git a/plugins/woocommerce/client/blocks/bin/webpack-entries.js b/plugins/woocommerce/client/blocks/bin/webpack-entries.js
index ca07ca7666237..0052015837199 100644
--- a/plugins/woocommerce/client/blocks/bin/webpack-entries.js
+++ b/plugins/woocommerce/client/blocks/bin/webpack-entries.js
@@ -204,6 +204,9 @@ const blocks = {
 	'product-review-form': {
 		customDir: 'product-reviews/inner-blocks/review-form',
 	},
+	'product-review-date': {
+		customDir: 'product-reviews/inner-blocks/review-date',
+	},
 };
 
 /**
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/Reviews/ProductReviewDate.php b/plugins/woocommerce/src/Blocks/BlockTypes/Reviews/ProductReviewDate.php
new file mode 100644
index 0000000000000..fb0b1d347627b
--- /dev/null
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/Reviews/ProductReviewDate.php
@@ -0,0 +1,68 @@
+<?php declare( strict_types = 1 );
+namespace Automattic\WooCommerce\Blocks\BlockTypes\Reviews;
+
+use Automattic\WooCommerce\Blocks\BlockTypes\AbstractBlock;
+
+/**
+ * ProductReviewDate class.
+ */
+class ProductReviewDate extends AbstractBlock {
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'product-review-date';
+
+	/**
+	 * Render the block.
+	 *
+	 * @param array    $attributes Block attributes.
+	 * @param string   $content Block content.
+	 * @param WP_Block $block Block instance.
+	 * @return string Rendered block content.
+	 */
+	protected function render( $attributes, $content, $block ) {
+		if ( ! isset( $block->context['commentId'] ) ) {
+			return '';
+		}
+
+		$comment = get_comment( $block->context['commentId'] );
+		if ( empty( $comment ) ) {
+			return '';
+		}
+
+		$classes = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
+
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+		if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
+			// translators: %s: human-readable time difference.
+			$formatted_date = sprintf( __( '%s ago', 'woocommerce' ), 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( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_date );
+		}
+
+		return sprintf(
+			'<div %1$s><time datetime="%2$s">%3$s</time></div>',
+			$wrapper_attributes,
+			esc_attr( get_comment_date( 'c', $comment ) ),
+			$formatted_date
+		);
+	}
+
+	/**
+	 * Get the frontend script handle for this block type.
+	 *
+	 * @see $this->register_block_type()
+	 * @param string $key Data to get, or default to everything.
+	 * @return array|string|null
+	 */
+	protected function get_block_type_script( $key = null ) {
+		return null;
+	}
+}
diff --git a/plugins/woocommerce/src/Blocks/BlockTypesController.php b/plugins/woocommerce/src/Blocks/BlockTypesController.php
index 87e6a1a4801be..a8451b4e352b8 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypesController.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypesController.php
@@ -549,6 +549,7 @@ protected function get_block_types() {
 			$block_types[] = 'Reviews\ProductReviewRating';
 			$block_types[] = 'Reviews\ProductReviewsTitle';
 			$block_types[] = 'Reviews\ProductReviewForm';
+			$block_types[] = 'Reviews\ProductReviewDate';
 		}
 
 		/**


Reviews:
user: login: dinhtungdu
body: Thank you @mikachan for working on this PR!

I tested the block and it's working great in my test. Left some minor comments on code style but otherwise, this is LGTM.
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-28T14:21:52Z
user: login: mikachan
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-28T15:16:38Z
user: login: mikachan
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-28T15:16:53Z
user: login: mikachan
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-28T15:17:24Z
user: login: mikachan
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-28T15:18:01Z
user: login: dinhtungdu
body: Thanks for addressing the feedback! The PR is still testing well. :shipit: 

#### 🖼️ Screenshots/ screen recordings

<img width="1513" alt="image" src="https://github.com/user-attachments/assets/d6d6c6e4-c333-45dc-97a6-9f857f2fa4f6" />

#### 📝 List of functionality tested / steps followed

- Added the Blockified Product Reviews block, see the Product Review Date block included.
- Changed the date format and styling, see settings applied in the editor and on the front end.

#### 🌐 Site details
<details><summary>System Status Report</summary>

```
### WordPress Environment ###

WordPress address (URL): [Redacted]
Site address (URL): [Redacted]
WC Version: 9.9.0-dev
Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site.
Action Scheduler Version: ✔ 3.9.2
Log Directory Writable: ✔
WP Version: 6.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: –

### Server Environment ###

Server Info: nginx/1.25.4
Server Architecture: Darwin 24.4.0 arm64
PHP Version: 7.4.33
PHP Post Max Size: 8 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 8.5.0
OpenSSL/3.1.4

SUHOSIN Installed: –
MySQL Version: 8.0.33
Max Upload Size: 2 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

[REDACTED]

### Post Type Counts ###

attachment: 23
global_product_addon: 1
page: 9
post: 2
product: 18
product_variation: 7
revision: 20
wp_font_face: 36
wp_font_family: 12
wp_global_styles: 1
wp_navigation: 1
wp_template: 2

### Security ###

Secure connection (HTTPS): ❌
					Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ✔

### Active Plugins (2) ###

Laravel DD for Wordpress: by Peter Hegman – 1.0.1
WooCommerce: by Automattic – 9.9.0-dev

### Inactive Plugins (5) ###

Akismet Anti-spam: Spam Protection: by Automattic - Anti-spam Team – 5.3.6
Hello Dolly: by Matt Mullenweg – 1.7.2
WooCommerce: by Automattic – 9.7.1 (update to version 9.8.2 is available)
WooCommerce Beta Tester: by WooCommerce – 3.0.0
WooCommerce Product Add-Ons: by Woo – 7.8.1

### Settings ###

Legacy API Enabled: –
Force SSL: –
Currency: HKD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –
Enabled Features: analytics
marketplace
order_attribution
site_visibility_badge
remote_logging
email_improvements
custom_order_tables


### Logging ###

Enabled: ✔
Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
Retention period: 30 days
Level threshold: –
Log directory size: 36 KB

### WC Pages ###

Shop base: #7 - /shop/
Cart: #8 - /cart/ -  Contains the woocommerce/cart block
Checkout: #9 - /checkout/ -  Contains the woocommerce/checkout block
My account: #10 - /my-account/ -  Contains the [woocommerce_my_account] shortcode
Terms and conditions: ❌ Page not set

### Theme ###

Name: Twenty Twenty-Five
Version: 1.0 (update to version 1.2 is available)
Author URL: https://wordpress.org
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
Theme type: Block theme
WooCommerce Support: ❌ Not declared

### Templates ###

Overrides: /Users/tung/workspace/woocommerce/plugins/woocommerce/templates/block-notices/error.php
/Users/tung/workspace/woocommerce/plugins/woocommerce/templates/block-notices/notice.php
/Users/tung/workspace/woocommerce/plugins/woocommerce/templates/block-notices/success.php


### Admin ###

Enabled Features: activity-panels
analytics
product-block-editor
experimental-blocks
coupons
core-profiler
customize-store
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
minified-js
mobile-app-banner
onboarding
onboarding-tasks
pattern-toolkit-full-composability
payment-gateway-suggestions
product-custom-fields
printful
remote-inbox-notifications
remote-free-extensions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page
async-product-editor-category-field
launch-your-store
add-to-cart-with-options-stepper-layout
blockified-add-to-cart
disable-core-profiler-fallback
reactify-classic-payments-settings

Disabled Features: product-data-views
coming-soon-newsletter-template
product-pre-publish-modal
settings
product-editor-template-system
use-wp-horizon

Daily Cron: ✔ Next scheduled: 2025-04-29 08:18:38 +00:00
Options: ✔
Notes: 65
Onboarding: completed

### Action Scheduler ###

Complete: 43
Oldest: 2025-04-08 08:09:50 +0000
Newest: 2025-04-28 13:31:05 +0000

Failed: 1
Oldest: 2025-03-17 08:19:52 +0000
Newest: 2025-03-17 08:19:52 +0000

Pending: 1
Oldest: 2025-04-29 03:28:09 +0000
Newest: 2025-04-29 03:28:09 +0000


### Status report information ###

Generated at: 2025-04-29 01:59:43 +00:00
```
</details>
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-29T01:59:53Z

Review comments:
diff_hunk: @@ -0,0 +1,65 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "woocommerce/product-review-date",
+	"title": "Product Review Date",
+	"category": "woocommerce",
+	"ancestor": [ "woocommerce/blockified-product-reviews" ],
+	"description": "Displays the date on which the review was posted.",
+	"textdomain": "woocommerce",
+	"attributes": {
+		"format": {
+			"type": "string"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"usesContext": [ "commentId" ],
+	"supports": {
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		}
+	},
+	"style": "wp-block-product-review-date"
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/block.json
user: login: dinhtungdu
body: For WooCommerce blocks (except interactive ones), we don't need to define this property. It may change in the future, but for now, let's follow the convention.
created_at: 2025-04-28T13:55:09Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+// Fix dependency group error
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PanelBody, ToggleControl } from '@wordpress/components';
+// eslint-disable-next-line @woocommerce/dependency-group
+import { __, _x } from '@wordpress/i18n';
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
user: login: dinhtungdu
body: You can move these imports above the import of `__experimentalDateFormatPicker` for eslint to not scream at them.
created_at: 2025-04-28T13:56:59Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+// Fix dependency group error
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PanelBody, ToggleControl } from '@wordpress/components';
+// eslint-disable-next-line @woocommerce/dependency-group
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Renders the `woocommerce/product-review-date` block on the editor.
+ *
+ * @param {Object} props                   React props.
+ * @param {Object} props.setAttributes     Callback for updating block attributes.
+ * @param {Object} props.attributes        Block attributes.
+ * @param {string} props.attributes.format Format of the date.
+ * @param {string} props.attributes.isLink Whether the author name should be linked.
+ * @param {Object} props.context           Inherited context.
+ * @param {string} props.context.commentId The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
user: login: dinhtungdu
body: Should we remove these types in favor of TS?
created_at: 2025-04-28T13:58:11Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+// Fix dependency group error
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PanelBody, ToggleControl } from '@wordpress/components';
+// eslint-disable-next-line @woocommerce/dependency-group
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Renders the `woocommerce/product-review-date` block on the editor.
+ *
+ * @param {Object} props                   React props.
+ * @param {Object} props.setAttributes     Callback for updating block attributes.
+ * @param {Object} props.attributes        Block attributes.
+ * @param {string} props.attributes.format Format of the date.
+ * @param {string} props.attributes.isLink Whether the author name should be linked.
+ * @param {Object} props.context           Inherited context.
+ * @param {string} props.context.commentId The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( {
+	attributes: { format, isLink },
+	context: { commentId },
+	setAttributes,
+}: BlockEditProps< {
+	format: string;
+	isLink: boolean;
+} > & {
+	context: { commentId: number };
+} ) {
+	const blockProps = useBlockProps();
+	let [ date ] = useEntityProp(
+		'root',
+		'comment',
+		'date',
+		String( commentId )
+	);
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
user: login: dinhtungdu
body: This looks good, but note that we can't really test this right now as the Comment Template block returns nothing when added inside the Single Product block. We can revisit and fix it in the PR adding the Review Template block though.
created_at: 2025-04-28T14:04:55Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+// Fix dependency group error
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PanelBody, ToggleControl } from '@wordpress/components';
+// eslint-disable-next-line @woocommerce/dependency-group
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Renders the `woocommerce/product-review-date` block on the editor.
+ *
+ * @param {Object} props                   React props.
+ * @param {Object} props.setAttributes     Callback for updating block attributes.
+ * @param {Object} props.attributes        Block attributes.
+ * @param {string} props.attributes.format Format of the date.
+ * @param {string} props.attributes.isLink Whether the author name should be linked.
+ * @param {Object} props.context           Inherited context.
+ * @param {string} props.context.commentId The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( {
+	attributes: { format, isLink },
+	context: { commentId },
+	setAttributes,
+}: BlockEditProps< {
+	format: string;
+	isLink: boolean;
+} > & {
+	context: { commentId: number };
+} ) {
+	const blockProps = useBlockProps();
+	let [ date ] = useEntityProp(
+		'root',
+		'comment',
+		'date',
+		String( commentId )
+	);
+	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
+		'root',
+		'site',
+		'date_format'
+	);
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
+				<DateFormatPicker
+					format={ format }
+					defaultFormat={ siteFormat }
+					onChange={ ( nextFormat: string ) =>
+						setAttributes( { format: nextFormat } )
+					}
+				/>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Link to review', 'woocommerce' ) }
+					onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					checked={ isLink }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
user: login: dinhtungdu
body: (not blocking) Not sure why we need to use an intermediate variable in the `core/comment-date`. 
created_at: 2025-04-28T14:07:26Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,65 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "woocommerce/product-review-date",
+	"title": "Product Review Date",
+	"category": "woocommerce",
+	"ancestor": [ "woocommerce/blockified-product-reviews" ],
+	"description": "Displays the date on which the review was posted.",
+	"textdomain": "woocommerce",
+	"attributes": {
+		"format": {
+			"type": "string"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"usesContext": [ "commentId" ],
+	"supports": {
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		}
+	},
+	"style": "wp-block-product-review-date"
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/block.json
user: login: mikachan
body: That makes sense! Removed the attribute here: https://github.com/woocommerce/woocommerce/pull/57530/commits/f3df8ebbc146d1fc2e0f0da480abe6e765e1489d
created_at: 2025-04-28T15:16:38Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+// Fix dependency group error
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PanelBody, ToggleControl } from '@wordpress/components';
+// eslint-disable-next-line @woocommerce/dependency-group
+import { __, _x } from '@wordpress/i18n';
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
user: login: mikachan
body: Nice - done in https://github.com/woocommerce/woocommerce/pull/57530/commits/6651dbddc73c29620c6f73767928dad999be596d.
created_at: 2025-04-28T15:16:53Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+// Fix dependency group error
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PanelBody, ToggleControl } from '@wordpress/components';
+// eslint-disable-next-line @woocommerce/dependency-group
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Renders the `woocommerce/product-review-date` block on the editor.
+ *
+ * @param {Object} props                   React props.
+ * @param {Object} props.setAttributes     Callback for updating block attributes.
+ * @param {Object} props.attributes        Block attributes.
+ * @param {string} props.attributes.format Format of the date.
+ * @param {string} props.attributes.isLink Whether the author name should be linked.
+ * @param {Object} props.context           Inherited context.
+ * @param {string} props.context.commentId The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
user: login: mikachan
body: Yes, makes sense, I've removed them here: https://github.com/woocommerce/woocommerce/pull/57530/commits/1a78de97188ae98459caa59c140fff8938c99485
created_at: 2025-04-28T15:17:24Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	// @ts-expect-error - Experimental component
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+// Fix dependency group error
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PanelBody, ToggleControl } from '@wordpress/components';
+// eslint-disable-next-line @woocommerce/dependency-group
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Renders the `woocommerce/product-review-date` block on the editor.
+ *
+ * @param {Object} props                   React props.
+ * @param {Object} props.setAttributes     Callback for updating block attributes.
+ * @param {Object} props.attributes        Block attributes.
+ * @param {string} props.attributes.format Format of the date.
+ * @param {string} props.attributes.isLink Whether the author name should be linked.
+ * @param {Object} props.context           Inherited context.
+ * @param {string} props.context.commentId The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( {
+	attributes: { format, isLink },
+	context: { commentId },
+	setAttributes,
+}: BlockEditProps< {
+	format: string;
+	isLink: boolean;
+} > & {
+	context: { commentId: number };
+} ) {
+	const blockProps = useBlockProps();
+	let [ date ] = useEntityProp(
+		'root',
+		'comment',
+		'date',
+		String( commentId )
+	);
+	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
+		'root',
+		'site',
+		'date_format'
+	);
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
+				<DateFormatPicker
+					format={ format }
+					defaultFormat={ siteFormat }
+					onChange={ ( nextFormat: string ) =>
+						setAttributes( { format: nextFormat } )
+					}
+				/>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Link to review', 'woocommerce' ) }
+					onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					checked={ isLink }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
path: plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/review-date/edit.tsx
user: login: mikachan
body: I'm not sure either, I've removed the `inspectorControls` variable for now: https://github.com/woocommerce/woocommerce/pull/57530/commits/f8145eedccf08e6c64e1affa008a9fa3120dd353.
created_at: 2025-04-28T15:18:00Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-25T14:06:18Z
body: **Size Change:** +2.94 kB (+0.05%) 

**Total Size:** 5.88 MB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./plugins/woocommerce/client/blocks/build/product-gallery.js` | 6.08 kB | +195 B (+3.32%) |  |
| `./plugins/woocommerce/client/blocks/build/wc-blocks-vendors.js` | 41 kB | +259 B (+0.64%) |  |
| `./plugins/woocommerce/client/blocks/build/product-review-date.js` | 2.09 kB | +2.09 kB (new file) | 🆕 |

<a href="https://github.com/preactjs/compressed-size-action"><sub>compressed-size-action</sub></a>
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-25T14:09:20Z
body: 
## Test using WordPress Playground
The changes in this pull request can be previewed and tested using a [WordPress Playground](https://developer.wordpress.org/playground/) instance.
[WordPress Playground](https://developer.wordpress.org/playground/) is an experimental project that creates a full WordPress instance entirely within the browser.

[Test this pull request with WordPress Playground](https://playground.wordpress.net/#{"landingPage":"/wp-admin/admin.php?page=wc-admin","preferredVersions":{"php":"8.0","wp":"latest"},"phpExtensionBundles":["kitchen-sink"],"features":{"networking":true},"steps":[{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://playground.wordpress.net/plugin-proxy.php?org=woocommerce&repo=woocommerce&workflow=Build%20Live%20Branch&artifact=plugins-14711150515&pr=57530"},"options":{"activate":true}},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://github-proxy.com/https://github.com/woocommerce/woocommerce/releases/download/wc-beta-tester-2.3.1/woocommerce-beta-tester.zip"},"options":{"activate":true}},{"step":"login","username":"admin","password":"password"}],"plugins":[]}).

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-25T16:14:24Z
body: ## Testing Guidelines
Hi @dinhtungdu ,

Apart from reviewing the code changes, please make sure to **review the testing instructions** ([Guide](https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions)) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

**Reminder:** PR reviewers are required to document testing performed. This includes:
- 🖼️ **Screenshots or screen recordings**.
- 📝 **List of functionality tested / steps followed**.
- 🌐 **Site details** (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
- 🔍 **Any analysis performed**, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.
author_association: CONTRIBUTOR