Commit d3c9069430d for woocommerce
commit d3c9069430d0c3c40f472e336f41b60513116a15
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Mon Aug 3 15:29:26 2026 +0200
Improve Product Image srcset to prevent wide images from appearing blurry in square blocks (#67325)
* Add special case for aspect ratio '1'
* Make sure we never set sizes to 0w
* Clean up
* Add changelog
* Make it so we support any number as aspect ratio
* Accept non-string aspect ratios
diff --git a/plugins/woocommerce/changelog/fix-67301 b/plugins/woocommerce/changelog/fix-67301
new file mode 100644
index 00000000000..f46657ee4c3
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-67301
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Improve Product Image srcset to prevent wide images from appearing blurry in square blocks
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductImage.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductImage.php
index d70685be959..422edfd6029 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductImage.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductImage.php
@@ -260,9 +260,14 @@ class ProductImage extends AbstractBlock {
$attr['loading'] = $loading_attr;
}
- $adjust_srcset = function ( $sources, $size_array, $image_src, $image_meta ) use ( $aspect_ratio ) {
+ $srcset_aspect_ratio = $aspect_ratio;
+ if ( is_numeric( $srcset_aspect_ratio ) ) {
+ $srcset_aspect_ratio = (string) $srcset_aspect_ratio . '/1';
+ }
+
+ $adjust_srcset = function ( $sources, $size_array, $image_src, $image_meta ) use ( $srcset_aspect_ratio ) {
if (
- ! is_string( $aspect_ratio ) ||
+ ! is_string( $srcset_aspect_ratio ) ||
! is_array( $sources ) ||
! is_array( $image_meta ) ||
! isset( $image_meta['width'], $image_meta['height'] ) ||
@@ -274,7 +279,7 @@ class ProductImage extends AbstractBlock {
return $sources;
}
- $aspect_ratio_parts = explode( '/', $aspect_ratio );
+ $aspect_ratio_parts = explode( '/', $srcset_aspect_ratio );
if (
count( $aspect_ratio_parts ) !== 2 ||
@@ -296,7 +301,7 @@ class ProductImage extends AbstractBlock {
if ( ! is_array( $source ) || ! isset( $source['value'] ) || ! is_numeric( $source['value'] ) ) {
continue;
}
- $sources[ $key ]['value'] = (int) round( $source['value'] / $stretch_factor );
+ $sources[ $key ]['value'] = max( 1, (int) round( $source['value'] / $stretch_factor ) );
}
}
@@ -305,8 +310,8 @@ class ProductImage extends AbstractBlock {
$maybe_adjust_srcset =
'cover' === $attributes['scale'] &&
- is_string( $aspect_ratio ) &&
- false !== strpos( $aspect_ratio, '/' );
+ is_string( $srcset_aspect_ratio ) &&
+ false !== strpos( $srcset_aspect_ratio, '/' );
if ( $maybe_adjust_srcset ) {
add_filter( 'wp_calculate_image_srcset', $adjust_srcset, 10, 4 );