From 5cbafa6be1dbee528929d57201f0a963d6d32341 Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <daniel.dudzic@automattic.com>
Date: Tue, 3 Oct 2023 22:40:20 +0200
Subject: [PATCH 1/2] Product Gallery: Add a better default Dialog template
 part

---
 assets/js/blocks/product-gallery/style.scss | 25 +++++++++++++++-
 templates/parts/product-gallery.html        | 32 ++++++++++-----------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss
index 314ba66f912..f5eb207810c 100644
--- a/assets/js/blocks/product-gallery/style.scss
+++ b/assets/js/blocks/product-gallery/style.scss
@@ -26,7 +26,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 		width: calc(100vw - 100px);
 		border: none;
 		border-radius: 10px;
-		height: 90vh;
+		height: calc(100vh - 100px);
 		top: 0;
 		margin-top: $gap-largest;
 		margin-bottom: $gap-largest;
@@ -68,6 +68,11 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 		z-index: 1;
 		transition: all 0.1s linear;
 
+		dialog & {
+			max-height: 80vh;
+			width: auto;
+		}
+
 		// Keep the order in this way. The hoverZoom class should override the full-screen-on-click class when both are applied.
 		&.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click {
 			cursor: pointer;
@@ -199,6 +204,15 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 
 // Thumbnails
 #{$thumbnails} {
+
+	dialog & {
+		height: calc(100vh - 160px);
+		overflow-y: scroll;
+		display: flex;
+		flex-flow: column wrap;
+		justify-content: flex-start;
+	}
+
 	img {
 		cursor: pointer;
 	}
@@ -213,6 +227,15 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 		height: 100px;
 		margin: 5px;
 
+		dialog & {
+			width: auto;
+			height: auto;
+			margin: 5px;
+			max-width: 90px;
+			max-height: 90px;
+			min-width: 40px;
+			min-height: 40px;
+		}
 	}
 }
 
diff --git a/templates/parts/product-gallery.html b/templates/parts/product-gallery.html
index 19108d590fd..dc449278483 100644
--- a/templates/parts/product-gallery.html
+++ b/templates/parts/product-gallery.html
@@ -1,27 +1,27 @@
 <!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
-	<!-- wp:woocommerce/product-gallery {"mode":"full"} -->
-	<div
-		class="wp-block-woocommerce-product-gallery wc-block-product-gallery wc-block-product-gallery--has-next-previous-buttons-inside-image">
-		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+	<!-- wp:woocommerce/product-gallery {"thumbnailsNumberOfThumbnails":8,"productGalleryClientId":"a65ef9cb-c3b6-49c7-8aa5-8a4d40475eb5","mode":"full","align":"full"} -->
+	<div class="wp-block-woocommerce-product-gallery alignfull wc-block-product-gallery wc-block-product-gallery--has-next-previous-buttons-inside-image">
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
 		<div class="wp-block-group">
-			<!-- wp:woocommerce/product-gallery-thumbnails {"lock":{"move":true,"remove":true}} /-->
+			<!-- wp:woocommerce/product-gallery-thumbnails {"lock":{"move":true,"remove":true},"style":{"layout":{"selfStretch":"fixed","flexSize":"200px"}}} /-->
 
-			<!-- wp:woocommerce/product-gallery-large-image {"lock":{"move":true,"remove":true}} -->
-			<div
-				class="wp-block-woocommerce-product-gallery-large-image wc-block-product-gallery-large-image__inner-blocks">
-				<!-- wp:woocommerce/product-sale-badge {"isDescendentOfSingleProductTemplate":true,"align":"right","style":{"spacing":{"margin":{"top":"4px","right":"4px","bottom":"4px","left":"4px"}}}} /-->
+			<!-- wp:group {"lock":{"move":true,"remove":true},"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
+			<div class="wp-block-group">
+				<!-- wp:woocommerce/product-gallery-large-image {"lock":{"move":true,"remove":true}} -->
+				<div class="wp-block-woocommerce-product-gallery-large-image wc-block-product-gallery-large-image__inner-blocks">
+					<!-- wp:woocommerce/product-gallery-large-image-next-previous {"lock":{"move":true,"remove":true},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
+					<div class="wp-block-woocommerce-product-gallery-large-image-next-previous"></div>
+					<!-- /wp:woocommerce/product-gallery-large-image-next-previous -->
+				</div>
+				<!-- /wp:woocommerce/product-gallery-large-image -->
 
-				<!-- wp:woocommerce/product-gallery-large-image-next-previous {"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-				<div class="wp-block-woocommerce-product-gallery-large-image-next-previous"></div>
-				<!-- /wp:woocommerce/product-gallery-large-image-next-previous -->
+				<!-- wp:woocommerce/product-gallery-pager {"lock":{"move":false,"remove":false}} /-->
 			</div>
-			<!-- /wp:woocommerce/product-gallery-large-image -->
+			<!-- /wp:group -->
 		</div>
 		<!-- /wp:group -->
-
-		<!-- wp:woocommerce/product-gallery-pager {"lock":{"move":true,"remove":true}} /-->
 	</div>
 	<!-- /wp:woocommerce/product-gallery -->
 </div>
-<!-- /wp:group -->
\ No newline at end of file
+<!-- /wp:group -->

From 9a14cf5aa8889e90c4475297cbb5ce8bcf76d3d2 Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <daniel.dudzic@automattic.com>
Date: Tue, 10 Oct 2023 09:41:03 +0200
Subject: [PATCH 2/2] Product Gallery Dialog: Limit max height of the Large
 Image to prevent dialog overflow

---
 assets/js/blocks/product-gallery/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss
index c21d3879164..32d602105c4 100644
--- a/assets/js/blocks/product-gallery/style.scss
+++ b/assets/js/blocks/product-gallery/style.scss
@@ -77,7 +77,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 		transition: all 0.1s linear;
 
 		dialog & {
-			max-height: 80vh;
+			max-height: calc(100vh - 160px);
 			width: auto;
 		}