diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index a5e754194d1..459eaeb4170 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -57,17 +57,17 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); 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 { + #{$gallery-next-previous-outside-image} & .wc-block-product-gallery-large-image__image-element { overflow: hidden; margin: 0 auto; max-width: $outside-image-max-width; - margin-left: 30px; } - .wc-block-woocommerce-product-gallery-large-image__container { + .wc-block-product-gallery-large-image__wrapper { flex-shrink: 0; max-width: 100%; overflow: hidden; + width: 100%; } .wc-block-product-gallery-large-image__container { @@ -77,13 +77,13 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); scroll-behavior: auto; } - #{$gallery-next-previous-inside-image} & .wc-block-woocommerce-product-gallery-large-image__container { + #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { max-width: 100%; overflow: hidden; margin: unset; } - #{$gallery-next-previous-inside-image} & .wc-block-woocommerce-product-gallery-large-image__container { + #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { overflow: unset; max-width: unset; margin: unset; @@ -95,6 +95,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); margin: 0 auto; z-index: 1; transition: all 0.1s linear; + width: 100%; // Keep the order in this way. The hoverZoom class should override the full-screen-on-click class when both are applied. &.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click { diff --git a/src/BlockTypes/ProductGalleryLargeImage.php b/src/BlockTypes/ProductGalleryLargeImage.php index 5536541bb0d..8b126b83e1e 100644 --- a/src/BlockTypes/ProductGalleryLargeImage.php +++ b/src/BlockTypes/ProductGalleryLargeImage.php @@ -88,7 +88,6 @@ protected function render( $attributes, $content, $block ) { return strtr( '