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

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

@ -13,28 +13,25 @@ $thumbnails-gap: 15px;
$default-number-of-thumbnails: 3; $default-number-of-thumbnails: 3;
$dialog-header-height: 29px; $dialog-header-height: 29px;
$dialog-header-padding-top: calc(30px / 2); $dialog-header-padding-top: calc(30px / 2);
$dialog-padding: 16px;
$admin-bar-desktop-height: 32px; $admin-bar-desktop-height: 32px;
$admin-bar-mobile-height: 46px; $admin-bar-mobile-height: 46px;
// Product Gallery // Product Gallery
#{$gallery} { #{$gallery} {
.wc-block-product-gallery-dialog__overlay { dialog {
height: 100vh; &.wc-block-product-gallery--dialog-open {
width: 100vw; display: flex;
position: fixed;
top: 0;
left: 0;
background-color: #808080;
z-index: 9999;
} }
dialog { flex-direction: column;
position: fixed; position: fixed;
border: none; border: none;
top: 0; top: 0;
z-index: 9999; z-index: 9999;
padding-top: 0; padding: $dialog-padding;
height: 100vh; height: 100vh;
width: calc(100vw - 2 * ($dialog-padding));
.admin-bar & { .admin-bar & {
margin-top: $admin-bar-desktop-height; margin-top: $admin-bar-desktop-height;
@ -52,6 +49,10 @@ $admin-bar-mobile-height: 46px;
padding-top: $dialog-header-padding-top; padding-top: $dialog-header-padding-top;
} }
.wc-block-product-gallery-dialog__body {
align-self: center;
}
.wc-block-product-galler-dialog__header-right { .wc-block-product-galler-dialog__header-right {
display: flex; display: flex;
justify-content: flex-end; 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(); 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( const popUpSelectedImageId = await getVisibleLargeImageId(
productGalleryPopUp.locator( productGalleryPopUpContent.locator(
`[data-block-name="woocommerce/product-gallery-large-image"]` `[data-block-name="woocommerce/product-gallery-large-image"]`
) )
); );
@ -445,17 +445,17 @@ test.describe( `${ blockData.name }`, () => {
largeImageBlock.click(); 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( const popUpInitialSelectedImageId = await getVisibleLargeImageId(
productGalleryPopUp.locator( productGalleryPopUpContent.locator(
`[data-block-name="woocommerce/product-gallery-large-image"]` `[data-block-name="woocommerce/product-gallery-large-image"]`
) )
); );
const popUpNextButton = productGalleryPopUp const popUpNextButton = productGalleryPopUpContent
.locator( .locator(
'.wc-block-product-gallery-large-image-next-previous--button' '.wc-block-product-gallery-large-image-next-previous--button'
) )
@ -463,23 +463,24 @@ test.describe( `${ blockData.name }`, () => {
await popUpNextButton.click(); await popUpNextButton.click();
const popUpNextImageId = await getVisibleLargeImageId( const popUpNextImageId = await getVisibleLargeImageId(
productGalleryPopUp.locator( productGalleryPopUpContent.locator(
`[data-block-name="woocommerce/product-gallery-large-image"]` `[data-block-name="woocommerce/product-gallery-large-image"]`
) )
); );
expect( popUpInitialSelectedImageId ).not.toBe( popUpNextImageId ); 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' '.wc-block-product-gallery-dialog__close'
); );
closePopUpButton.click(); closePopUpButton.click();
await page.waitForFunction( () => { await page.waitForFunction( () => {
const isPopUpOpen = document const isPopUpOpen = document
.querySelector( .querySelector( '[aria-label="Product gallery"]' )
'.wc-block-product-gallery-dialog__overlay'
)
?.checkVisibility(); ?.checkVisibility();
return isPopUpOpen === false; 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( $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-gallery-dialog__header">
<div class="wc-block-product-galler-dialog__header-right"> <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}}"> <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"> <div class="wc-block-product-gallery-dialog__body">
{{html}} {{html}}
</div> </div>
</dialog> </dialog>',
</div>',
array( array(
'{{html}}' => $html_processor->get_updated_html(), '{{html}}' => $html_processor->get_updated_html(),
'{{dialog_aria_label}}' => __( 'Product gallery', 'woocommerce' ), '{{dialog_aria_label}}' => __( 'Product gallery', 'woocommerce' ),