Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Alexandre Lara 2024-02-09 11:38:41 -03:00 committed by GitHub
parent b91762be69
commit 74c6fcad2d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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;

4
plugins/woocommerce/changelog/fix-43826-overlay-sizing-issue Normal file
View File

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

6
plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
View File

@ -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}}">
<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">
<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>
</div>',
</dialog>',
array(
'{{html}}' => $html_processor->get_updated_html(),
'{{dialog_aria_label}}' => __( 'Product gallery', 'woocommerce' ),