add wrapper div in frontend

gambitph · Jul 22, 2024 · 6be73bd · 6be73bd
1 parent 35c9ddb
commit 6be73bd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/src/block/carousel/frontend-carousel.js b/src/block/carousel/frontend-carousel.js
@@ -52,6 +52,7 @@ class _StackableCarousel {
 
 		this.slideEls[ this.currentSlide - 1 ].classList.add( 'stk-block-carousel__slide--active' )
 
+		this.fixInnerColumnMargins()
 		this.unpauseAutoplay()
 	}
 
@@ -588,6 +589,17 @@ class _StackableCarousel {
 
 		this.hasTouched = false
 	}
+
+	// Adds a div wrapper for inner columns with left and right margins
+	fixInnerColumnMargins = () => {
+		const innerColumns = this.sliderEl.querySelectorAll( '.has-inner-column-margin' )
+		innerColumns.forEach( el => {
+			const wrapper = document.createElement( 'div' )
+			el.parentNode.insertBefore( wrapper, el )
+			wrapper.appendChild( el )
+			el.classList.remove( 'has-inner-column-margin' )
+		} )
+	}
 }
 
 class StackableCarousel {

diff --git a/src/block/carousel/index.php b/src/block/carousel/index.php
@@ -69,3 +69,30 @@ function stackable_skip_loading_lazy_carousel_image( $value, $image ) {
 		add_filter( 'wp_img_tag_add_loading_attr', 'stackable_skip_loading_lazy_carousel_image', 10, 2 );
 	}
 }
+
+if ( ! function_exists( 'stackable_carousel_add_has_inner_column_margin_class' ) ) {
+	function stackable_carousel_add_has_inner_column_margin_class( $block_content, $block ) {
+		if ( empty( $block['innerBlocks'] ) ) {
+			return;
+		}
+
+		if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
+			return $block_content;
+		}
+
+		$html_tag = new WP_HTML_Tag_Processor( $block_content );
+
+		foreach ( $block['innerBlocks'] as $inner_block ) {
+			if ( $inner_block['blockName'] == 'stackable/column' && ( isset( $inner_block['attrs']['blockMargin']['left'] ) || isset( $inner_block['attrs']['blockMargin']['right'] ) ) ) {
+				if ( $html_tag->next_tag( array( 'class_name' => 'stk-'.$inner_block['attrs']['uniqueId'] ) ) ) {
+					error_log( 'has-inner-column-margin' );
+					$html_tag->add_class( 'has-inner-column-margin' );
+				}
+			}
+		}
+
+		return $html_tag->get_updated_html();
+	}
+
+	add_filter( 'render_block_stackable/carousel', 'stackable_carousel_add_has_inner_column_margin_class', 10, 2 );
+}