KAD-3175 Extend template when no content exists in a section

stellarwp · Aug 15, 2024 · 0970307 · 0970307
1 parent a2ffd42
commit 0970307
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 0 deletions.
diff --git a/includes/blocks/header/class-kadence-blocks-header-column-block.php b/includes/blocks/header/class-kadence-blocks-header-column-block.php
@@ -123,6 +123,10 @@ public function build_html( $attributes, $unique_id, $content, $block_instance )
 			}
 		}
 
+		if( empty( $content ) ) {
+			$classes[] = 'no-content';
+		}
+
 		$html .= '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
 		$html .= $content;
 		$html .= '</div>';

diff --git a/src/blocks/header/children/column/edit.js b/src/blocks/header/children/column/edit.js
@@ -72,6 +72,7 @@ export function Edit(props) {
 		'wp-block-kadence-header-column': true,
 		[`wp-block-kadence-header-column-${location}`]: location,
 		[`wp-block-kadence-header-column${uniqueID}`]: uniqueID,
+		'no-content': !hasChildBlocks,
 	});
 	const innerBlocksProps = useInnerBlocksProps(
 		{

diff --git a/src/blocks/header/children/row/editor.scss b/src/blocks/header/children/row/editor.scss
@@ -7,6 +7,9 @@
 		grid-template-columns: 1fr auto 1fr;
 		margin: 0 auto;
 	}
+	.kadence-header-row-inner:has(div.no-content) {
+		grid-template-columns: auto auto auto;
+	}
 	.wp-block-kadence-header-column,
 	.wp-block-kadence-header-section {
 		gap: 10px;

diff --git a/src/blocks/header/children/row/style.scss b/src/blocks/header/children/row/style.scss
@@ -7,6 +7,10 @@
 		grid-template-columns: 1fr auto 1fr;
 		margin: 0 auto;
 	}
+	.kadence-header-row-inner:has(div.no-content) {
+		grid-template-columns: auto auto auto;
+	}
+
 	.wp-block-kadence-header-column,
 	.wp-block-kadence-header-section {
 		gap: 10px;