From 2ea69787706681fa37fa5b9e8eec4c100a2eec68 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 27 Jun 2023 17:31:19 +0700
Subject: [PATCH] Product Image: use WC Core function to render image (#9984)

---
 .../blocks/product-elements/image/style.scss    |  1 +
 src/BlockTypes/ProductImage.php                 | 17 +++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/image/style.scss b/assets/js/atomic/blocks/product-elements/image/style.scss
index aba3ac766ae..5a6e789ccc2 100644
--- a/assets/js/atomic/blocks/product-elements/image/style.scss
+++ b/assets/js/atomic/blocks/product-elements/image/style.scss
@@ -16,6 +16,7 @@
 		border-radius: inherit;
 		vertical-align: middle;
 		width: 100%;
+		height: auto;
 
 		&[hidden] {
 			display: none;
diff --git a/src/BlockTypes/ProductImage.php b/src/BlockTypes/ProductImage.php
index 3aa5e306153..7d943b97ed0 100644
--- a/src/BlockTypes/ProductImage.php
+++ b/src/BlockTypes/ProductImage.php
@@ -145,20 +145,21 @@ private function render_anchor( $product, $on_sale_badge, $product_image, $attri
 	 * @return string
 	 */
 	private function render_image( $product, $attributes ) {
-		$image_type = 'single' === $attributes['imageSizing'] ? 'woocommerce_single' : 'woocommerce_thumbnail';
-		$image_info = wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id() ), $image_type );
+		$image_size = 'single' === $attributes['imageSizing'] ? 'woocommerce_single' : 'woocommerce_thumbnail';
 
-		if ( ! isset( $image_info[0] ) ) {
+		if ( ! $product->get_image_id() ) {
 			// The alt text is left empty on purpose, as it's considered a decorative image.
 			// More can be found here: https://www.w3.org/WAI/tutorials/images/decorative/.
 			// Github discussion for a context: https://github.com/woocommerce/woocommerce-blocks/pull/7651#discussion_r1019560494.
-			return sprintf( '<img src="%s" alt="" />', wc_placeholder_img_src( $image_type ) );
+			return wc_placeholder_img( $image_size, array( 'alt' => '' ) );
 		}
 
-		return sprintf(
-			'<img data-testid="product-image" alt="%s" src="%s">',
-			$product->get_title(),
-			$image_info[0]
+		return $product->get_image(
+			$image_size,
+			array(
+				'alt'         => $product->get_title(),
+				'data-testid' => 'product-image',
+			)
 		);
 	}