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 index 0a1247cbc34..92def860465 100644 --- 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 index ca81e18eee9..9fccf6daff6 100644 --- 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 new file mode 100644 index 00000000000..c678700a56e --- /dev/null +++ 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 index 41f88f3f038..d726bc642b2 100644 --- 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( - '', + '', esc_attr( $classname ), + $sale_badge_html, $product_image_gallery_html );