Commit aee9501aa84 for woocommerce
commit aee9501aa8490ceb688254cf5d94f75d2f7d0cd3
Author: Luigi Teschio <gigitux@gmail.com>
Date: Tue Sep 29 11:16:12 2026 +0200
Use responsive product thumbnails in review blocks (#69115)
* fix thumbnail size
* add changelog
* Use thumbnail sizes for review product images
* improve size
diff --git a/plugins/woocommerce/changelog/58152-add-gallery-thumbnail-size-review-block b/plugins/woocommerce/changelog/58152-add-gallery-thumbnail-size-review-block
new file mode 100644
index 00000000000..ebae8bc4ced
--- /dev/null
+++ b/plugins/woocommerce/changelog/58152-add-gallery-thumbnail-size-review-block
@@ -0,0 +1,4 @@
+Significance: patch
+Type: performance
+
+Let browsers choose an appropriate product thumbnail in review blocks.
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/index.tsx b/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/index.tsx
index 9df1d6dd1e2..bbb217dfab0 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/index.tsx
@@ -24,14 +24,20 @@ function getReviewImage(
<div className="wc-block-review-list-item__image wc-block-components-review-list-item__image" />
);
}
+ const productImage = review.product_image;
+ const thumbnailSrcSet = productImage?.thumbnail_srcset || undefined;
return (
<div className="wc-block-review-list-item__image wc-block-components-review-list-item__image">
{ imageType === 'product' ? (
<img
aria-hidden="true"
- alt={ review.product_image?.alt || '' }
- src={ review.product_image?.thumbnail || '' }
+ alt={ productImage?.alt || '' }
+ src={ productImage?.thumbnail || '' }
+ srcSet={ thumbnailSrcSet }
+ sizes={
+ productImage?.thumbnail_srcset ? '66px' : undefined
+ }
/>
) : (
// The alt text is left empty on purpose, as it's considered a decorative image.
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/types.ts b/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/types.ts
index 2a42c9bf5db..6281f15c04d 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/types.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/types.ts
@@ -17,6 +17,8 @@ export type Review =
product_image: {
alt: string;
thumbnail: string;
+ thumbnail_srcset?: string;
+ thumbnail_sizes?: string;
name: string;
sizes: string;
src: string;