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 Large Image: Add wrapper to fix zoom (https://github.com/woocommerce/woocommerce-blocks/pull/11023) 

* Product Gallery Large Image: Add wrapper to fix zoom

* Product Gallery: Fix E2E test
This commit is contained in:
Daniel Dudzic 2023-09-22 13:48:51 +02:00 committed by GitHub
parent 25bac5f030
commit a7b5812703
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,13 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
position: relative; position: relative;
overflow: hidden; overflow: hidden;
// Restrict the width of the Large Image when the Next/Previous buttons are outside the image.
#{$gallery-next-previous-outside-image} & .wc-block-woocommerce-product-gallery-large-image__container {
overflow: hidden;
max-width: $outside-image-max-width;
margin: 0 auto;
}
img { img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
@ -40,11 +47,6 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
&[hidden] { &[hidden] {
display: none; display: none;
} }
// Restrict the width of the Large Image when the Next/Previous buttons are outside the image.
#{$gallery-next-previous-outside-image} & {
max-width: $outside-image-max-width;
}
} }
.wc-block-product-gallery-large-image__inner-blocks { .wc-block-product-gallery-large-image__inner-blocks {

3
plugins/woocommerce-blocks/src/Utils/ProductGalleryUtils.php
View File

@ -35,8 +35,9 @@ class ProductGalleryUtils {
$attributes $attributes
); );
$product_image_html = '<div class="wc-block-woocommerce-product-gallery-large-image__container">' . $product_image_html . '</div>';
$product_image_html_processor = new \WP_HTML_Tag_Processor( $product_image_html ); $product_image_html_processor = new \WP_HTML_Tag_Processor( $product_image_html );
$product_image_html_processor->next_tag(); $product_image_html_processor->next_tag( 'img' );
$product_image_html_processor->set_attribute( $product_image_html_processor->set_attribute(
'data-wc-context', 'data-wc-context',
wp_json_encode( wp_json_encode(