fix: Show sale bage on Product Image Gallery block (#8652)

* fix: show sale bage on Product Image Gallery block #8528 * set multiple flag to false
woocommerce · Mar 9, 2023 · 01efca1 · 01efca1
1 parent 0fdb926
commit 01efca1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json
@@ -7,7 +7,7 @@
 	"category": "woocommerce",
 	"supports": {
 		"align": true,
-		"reusable": false
+		"multiple": false
 	},
 	"keywords": [ "WooCommerce" ],
 	"usesContext": [ "postId", "postType", "queryId" ],

diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/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: () => {

diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss b/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;
+	}
+}
diff --git a/src/BlockTypes/ProductImageGallery.php b/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
 		);