fix: show sale bage on Product Image Gallery block #8528

assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts

@@ -10,6 +10,7 @@ import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
  */
 import edit from './edit';
 import metadata from './block.json';
+import './style.scss';
 
 registerBlockSingleProductTemplate( {
 	registerBlockFn: () => {

assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss

@@ -0,0 +1,13 @@
+.woocommerce .wp-block-woocommerce-product-image-gallery {
+	position: relative;
+
+	div.images {
+		width: unset !important;
+	}
+
+	span.onsale {
+		right: unset;
+		z-index: 1;
+		left: -1rem
+	}
+}

src/BlockTypes/ProductImageGallery.php

@@ -48,14 +48,18 @@ protected function render( $attributes, $content, $block ) {
 		}
 
 		$classname = $attributes['className'] ?? '';
+		ob_start();
+		woocommerce_show_product_sale_flash();
+		$sale_badge_html = ob_get_clean();
 
 		ob_start();
 		woocommerce_show_product_images();
 		$product_image_gallery_html = ob_get_clean();
 
 		return sprintf(
-			'<div class="wp-block-woocommerce-product-image-gallery %1$s">%2$s</div>',
+			'<div class="wp-block-woocommerce-product-image-gallery %1$s">%2$s %3$s</div>',
 			esc_attr( $classname ),
+			$sale_badge_html,
 			$product_image_gallery_html
 		);