Product Image Gallery block: Fix overflow when multiple images are us…

…ed (#10013) * Fix Product Image Gallery block overflow when multiple images are used * Increase css specificity for the Product Image Gallery images * Fix whitespace * Fix style issue when using smaller images in the product image gallery
woocommerce · Jun 29, 2023 · c86719b · c86719b
1 parent 17e4481
commit c86719b
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
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
@@ -2,6 +2,7 @@
 	position: relative;
 	// This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container
 	clear: both;
+	max-width: 512px;
 
 	span.onsale {
 		right: unset;
@@ -19,6 +20,5 @@
 
 
 .woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
-	width: auto;
+	width: 100%;
 }
-
diff --git a/assets/js/blocks/classic-template/single-product.ts b/assets/js/blocks/classic-template/single-product.ts
@@ -27,6 +27,7 @@ const getBlockifiedTemplate = () =>
 					{
 						type: 'constrained',
 						justifyContent: 'right',
+						width: '512px',
 					},
 					[ createBlock( 'woocommerce/product-image-gallery' ) ]
 				),

diff --git a/templates/templates/blockified/single-product.html b/templates/templates/blockified/single-product.html
@@ -7,8 +7,8 @@
 
 	<!-- wp:columns {"align":"wide"} -->
 	<div class="wp-block-columns alignwide">
-		<!-- wp:column -->
-		<div class="wp-block-column">
+		<!-- wp:column {"width":"512px"} -->
+		<div class="wp-block-column" style="flex-basis:512px">
 			<!-- wp:woocommerce/product-image-gallery /-->
 		</div>
 		<!-- /wp:column -->