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

Product Image Gallery block: Fix overflow when multiple images are used (https://github.com/woocommerce/woocommerce-blocks/pull/10013) 

* Fix Product Image Gallery block overflow when multiple images are used

* Increase css specificity for the Product Image Gallery images

* Fix whitespace

* Fix style issue when using smaller images in the product image gallery
This commit is contained in:
Alexandre Lara 2023-06-29 15:24:33 -03:00 committed by GitHub
parent f1df8fb975
commit 388605027b
3 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss
View File

@ -2,6 +2,7 @@
position: relative;
// This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container
clear: both;
max-width: 512px;
span.onsale {
right: unset;
@ -19,6 +20,5 @@
.woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
width: auto;
width: 100%;
}

1
plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts
View File

@ -27,6 +27,7 @@ const getBlockifiedTemplate = () =>
{
type: 'constrained',
justifyContent: 'right',
width: '512px',
},
[ createBlock( 'woocommerce/product-image-gallery' ) ]
),

4
plugins/woocommerce-blocks/templates/templates/blockified/single-product.html
View File

@ -7,8 +7,8 @@
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:column {"width":"512px"} -->
<div class="wp-block-column" style="flex-basis:512px">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:column -->