diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss index c03439cf470..7202e349ebc 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss +++ b/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; diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts index db217e9cba1..0c35152bbc4 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts +++ b/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( - '.wc-block-product-gallery-dialog__overlay' + const productGalleryPopUpContent = page.locator( + '.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( - '.wc-block-product-gallery-dialog__overlay' + const productGalleryPopUpContent = page.locator( + '.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( - '.wc-block-product-gallery-dialog__overlay' - ) + .querySelector( '[aria-label="Product gallery"]' ) ?.checkVisibility(); return isPopUpOpen === false; diff --git a/plugins/woocommerce/changelog/fix-43826-overlay-sizing-issue b/plugins/woocommerce/changelog/fix-43826-overlay-sizing-issue new file mode 100644 index 00000000000..93f761c7fd3 --- /dev/null +++ b/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. diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php index 087975d7690..670da92be98 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php @@ -77,8 +77,7 @@ class ProductGallery extends AbstractBlock { $gallery_dialog = strtr( ' - ', + ', array( '{{html}}' => $html_processor->get_updated_html(), '{{dialog_aria_label}}' => __( 'Product gallery', 'woocommerce' ),