fix css

woocommerce · Oct 11, 2023 · 69daeae · 69daeae
1 parent 6539cd0
commit 69daeae
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -88,7 +88,6 @@ protected function render( $attributes, $content, $block ) {
 		return strtr(
 			'<div class="wc-block-product-gallery-large-image wp-block-woocommerce-product-gallery-large-image" {directives}>
 				<div class="wc-block-product-gallery-large-image__container">
-					{visible_main_image}
 					{main_images}
 				</div>
 					{content}
@@ -137,16 +136,18 @@ private function get_main_images_html( $context, $product_id ) {
 			$product_id,
 			'full',
 			$attributes,
-			'wc-block-woocommerce-product-gallery-large-image__container'
+			'wc-block-product-gallery-large-image__image-element'
 		);
 
-		$visible_main_image           = array_shift( $main_images );
-		$visible_main_image_processor = new \WP_HTML_Tag_Processor( $visible_main_image );
-		$visible_main_image_processor->next_tag();
-		$visible_main_image_processor->remove_attribute( 'hidden' );
-		$visible_main_image = $visible_main_image_processor->get_updated_html();
+		$main_image_with_wrapper = array_map(
+			function( $main_image_element ) {
+				return "<div class='wc-block-product-gallery-large-image__wrapper'>" . $main_image_element . '</div>';
+			},
+			$main_images
+		);
 
-		return array( $visible_main_image, $main_images );
+		$visible_main_image = array_shift( $main_images );
+		return array( $visible_main_image, $main_image_with_wrapper );
 
 	}