Product Gallery block > Pop-Up: Fix overlay sizing issue (#44479)

* Fix overlay issue when Product Gallery Pop-Up is open

* Fix stylelint error

* Add changelog

* Fix e2e tests for Product Gallery Pop-Up

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss

@@ -13,28 +13,25 @@ $thumbnails-gap: 15px;
 $default-number-of-thumbnails: 3;
 $dialog-header-height: 29px;
 $dialog-header-padding-top: calc(30px / 2);
+$dialog-padding: 16px;
 $admin-bar-desktop-height: 32px;
 $admin-bar-mobile-height: 46px;
 
 // Product Gallery
 #{$gallery} {
-	.wc-block-product-gallery-dialog__overlay {
-		height: 100vh;
-		width: 100vw;
-		position: fixed;
-		top: 0;
-		left: 0;
-		background-color: #808080;
-		z-index: 9999;
-	}
-
 	dialog {
+		&.wc-block-product-gallery--dialog-open {
+			display: flex;
+		}
+
+		flex-direction: column;
 		position: fixed;
 		border: none;
 		top: 0;
 		z-index: 9999;
-		padding-top: 0;
+		padding: $dialog-padding;
 		height: 100vh;
+		width: calc(100vw - 2 * ($dialog-padding));
 
 		.admin-bar & {
 			margin-top: $admin-bar-desktop-height;
@@ -52,6 +49,10 @@ $admin-bar-mobile-height: 46px;
 			padding-top: $dialog-header-padding-top;
 		}
 
+		.wc-block-product-gallery-dialog__body {
+			align-self: center;
+		}
+
 		.wc-block-product-galler-dialog__header-right {
 			display: flex;
 			justify-content: flex-end;

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts

@@ -381,12 +381,12 @@ test.describe( `${ blockData.name }`, () => {
 			} );
 			largeImageBlock.click();
 
-			const productGalleryPopUp = page.locator(
+			const productGalleryPopUpContent = page.locator(
-				'.wc-block-product-gallery-dialog__overlay'
+				'.wc-block-product-gallery-dialog__body'
 			);
 
 			const popUpSelectedImageId = await getVisibleLargeImageId(
-				productGalleryPopUp.locator(
+				productGalleryPopUpContent.locator(
 					`[data-block-name="woocommerce/product-gallery-large-image"]`
 				)
 			);
@@ -445,17 +445,17 @@ test.describe( `${ blockData.name }`, () => {
 
 			largeImageBlock.click();
 
-			const productGalleryPopUp = page.locator(
+			const productGalleryPopUpContent = page.locator(
-				'.wc-block-product-gallery-dialog__overlay'
+				'.wc-block-product-gallery-dialog__body'
 			);
 
 			const popUpInitialSelectedImageId = await getVisibleLargeImageId(
-				productGalleryPopUp.locator(
+				productGalleryPopUpContent.locator(
 					`[data-block-name="woocommerce/product-gallery-large-image"]`
 				)
 			);
 
-			const popUpNextButton = productGalleryPopUp
+			const popUpNextButton = productGalleryPopUpContent
 				.locator(
 					'.wc-block-product-gallery-large-image-next-previous--button'
 				)
@@ -463,23 +463,24 @@ test.describe( `${ blockData.name }`, () => {
 			await popUpNextButton.click();
 
 			const popUpNextImageId = await getVisibleLargeImageId(
-				productGalleryPopUp.locator(
+				productGalleryPopUpContent.locator(
 					`[data-block-name="woocommerce/product-gallery-large-image"]`
 				)
 			);
 
 			expect( popUpInitialSelectedImageId ).not.toBe( popUpNextImageId );
 
-			const closePopUpButton = productGalleryPopUp.locator(
+			const productGalleryPopUpHeader = page.locator(
+				'.wc-block-product-gallery-dialog__header'
+			);
+			const closePopUpButton = productGalleryPopUpHeader.locator(
 				'.wc-block-product-gallery-dialog__close'
 			);
 			closePopUpButton.click();
 
 			await page.waitForFunction( () => {
 				const isPopUpOpen = document
-					.querySelector(
+					.querySelector( '[aria-label="Product gallery"]' )
-						'.wc-block-product-gallery-dialog__overlay'
-					)
 					?.checkVisibility();
 
 				return isPopUpOpen === false;

plugins/woocommerce/changelog/fix-43826-overlay-sizing-issue

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix overlay sizing issue with the Product Gallery Pop-Up.

plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php

@@ -77,8 +77,7 @@ class ProductGallery extends AbstractBlock {
 
 		$gallery_dialog = strtr(
 			'
-		<div class="wc-block-product-gallery-dialog__overlay" hidden data-wc-bind--hidden="!context.isDialogOpen" data-wc-watch="callbacks.keyboardAccess">
+			<dialog data-wc-bind--open="context.isDialogOpen" role="dialog" aria-modal="true" aria-label="{{dialog_aria_label}}" hidden data-wc-bind--hidden="!context.isDialogOpen" data-wc-watch="callbacks.keyboardAccess" data-wc-class--wc-block-product-gallery--dialog-open="context.isDialogOpen">
-			<dialog data-wc-bind--open="context.isDialogOpen" role="dialog" aria-modal="true" aria-label="{{dialog_aria_label}}">
 				<div class="wc-block-product-gallery-dialog__header">
 				<div class="wc-block-product-galler-dialog__header-right">
 					<button class="wc-block-product-gallery-dialog__close" data-wc-on--click="actions.closeDialog" aria-label="{{close_dialog_aria_label}}">
@@ -92,8 +91,7 @@ class ProductGallery extends AbstractBlock {
 				<div class="wc-block-product-gallery-dialog__body">
 					{{html}}
 				</div>
-			</dialog>
+			</dialog>',
-		</div>',
 			array(
 				'{{html}}'                    => $html_processor->get_updated_html(),
 				'{{dialog_aria_label}}'       => __( 'Product gallery', 'woocommerce' ),