Commit 850f00b6e6 for woocommerce
commit 850f00b6e67d778b546c9281ae0f81e8873f60fa
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri Dec 19 08:40:40 2025 +0100
Product Gallery: Full page gallery improvements (#62172)
* Make full page gallery follow global styles colors
* Simplified full page gallery structre
* Change the way image is scroll to view
* Simplify styles
* Fix specifcity for max-width
* Add changelog
* Adjust test viewport so we can correctly assess displayed image
* Update test config
* Allow X button in full page gallery to be on the top right corner no matter the screen width
* Add bottom padding and accommodate height of dialog to admin bar
* Fix typo
diff --git a/plugins/woocommerce/changelog/woothme-208-full-page-gallery-improvements b/plugins/woocommerce/changelog/woothme-208-full-page-gallery-improvements
new file mode 100644
index 0000000000..a9e1dfebee
--- /dev/null
+++ b/plugins/woocommerce/changelog/woothme-208-full-page-gallery-improvements
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Gallery: improve layout of full page gallery
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts
index bdb4297bc2..fdf41b511e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts
@@ -522,11 +522,17 @@ const productGallery = {
`[data-image-id="${ selectedImageId }"]`
);
- if ( selectedImage instanceof HTMLElement ) {
- selectedImage.scrollIntoView( {
- behavior: 'auto',
- block: 'center',
- } );
+ if (
+ selectedImage instanceof HTMLElement &&
+ selectedImage.parentNode instanceof HTMLElement
+ ) {
+ // We're doing this manually because scrollIntoView caused layout shifts resulting in buggy
+ // dialog layout.
+ selectedImage.parentNode.scrollTop =
+ selectedImage.offsetTop +
+ selectedImage.offsetHeight / 2 -
+ dialogRef.offsetHeight / 2 -
+ 32; // Arbitrary value for the header height.
}
}
},
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
index 56fc31a48c..83c34171d9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
@@ -299,6 +299,7 @@ $dialog-padding: 20px;
bottom: 0;
z-index: 1000;
overflow: hidden;
+ background-color: var(--wp--preset--color--base, #fff);
:where(.admin-bar) & {
// Subtract the admin bar height.
@@ -307,52 +308,43 @@ $dialog-padding: 20px;
}
}
+:where(.wc-block-product-gallery-dialog__header) {
+ margin: 0 auto;
+ padding: 14px;
+ display: flex;
+ justify-content: flex-end;
+}
+
:where(.wc-block-product-gallery-dialog__close-button) {
- padding: 5px;
- position: absolute;
- right: 25px;
- top: 25px;
+ padding: 4px;
background: none;
border: none;
cursor: pointer;
+ fill: var(--wp--preset--color--contrast, #000);
}
-:where(.wc-block-product-gallery-dialog__content) {
- // Subtract the top and bottom padding.
- height: calc(100vh - ($dialog-padding * 2));
- overflow: hidden;
- padding: 20px 0;
-
- @media (min-width: 765px) {
- padding: 20px 0;
- }
+.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content {
+ height: calc(100vh - 64px);
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 0 8px;
:where(.admin-bar) & {
// Subtract the admin bar height.
- height: calc(100vh - ($dialog-padding * 2) - $admin-bar-height);
+ height: calc(100vh - 64px - $admin-bar-height);
}
-}
-:where(.wc-block-product-gallery-dialog__images-container) {
- height: 100%;
- overflow-y: auto;
- box-sizing: border-box;
- padding: 3px 0;
-}
-
-:where(.wc-block-product-gallery-dialog__images) {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- :where(img) {
- max-width: 100%;
+ img {
+ max-width: 1600px;
+ width: 100%;
height: auto;
- margin-bottom: 20px;
- }
- :where(img:last-child) {
- margin-bottom: 0;
+ &:last-child {
+ margin-bottom: 50px;
+ }
}
}
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
index 9e58001457..c615741e31 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
@@ -195,6 +195,8 @@ test.describe( `${ blockData.name }`, () => {
editor,
pageObject,
} ) => {
+ await page.setViewportSize( { width: 800, height: 800 } );
+
await pageObject.addProductGalleryBlock( { cleanContent: false } );
await editor.saveSiteEditorEntities( {
@@ -230,7 +232,7 @@ test.describe( `${ blockData.name }`, () => {
.locator( `img[data-image-id='${ nextImageId }']` );
// The image should be in the viewport but it simply doesn't fit fully.
- await expect( dialogImage ).toBeInViewport( { ratio: 0.75 } );
+ await expect( dialogImage ).toBeInViewport( { ratio: 0.7 } );
const closePopUpButton = page.locator(
'.wc-block-product-gallery-dialog__close-button'
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
index a6d74f2f4f..59aee4c369 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
@@ -58,18 +58,16 @@ class ProductGallery extends AbstractBlock {
role="dialog"
aria-modal="true"
aria-label="Product Gallery">
- <div class="wc-block-product-gallery-dialog__content">
+ <div class="wc-block-product-gallery-dialog__header">
<button class="wc-block-product-gallery-dialog__close-button" data-wp-on--click="actions.closeDialog" aria-label="<?php echo esc_attr__( 'Close dialog', 'woocommerce' ); ?>">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
</svg>
</button>
- <div class="wc-block-product-gallery-dialog__images-container">
- <div class="wc-block-product-gallery-dialog__images">
- <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Output is already escaped by WooCommerce. ?>
- <?php echo $images_html; ?>
- </div>
- </div>
+ </div>
+ <div class="wc-block-product-gallery-dialog__content">
+ <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Output is already escaped by WooCommerce. ?>
+ <?php echo $images_html; ?>
</div>
</dialog>
<?php