Adding a reset to template columns for row layouts that use a multi-r…

…ow layout option on larger devices and a non-row layout on smaller ones. https://stellarwp.atlassian.net/browse/KAD-3442
stellarwp · Dec 5, 2024 · 995f6eb · 995f6eb
1 parent fadbe42
commit 995f6eb
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/includes/blocks/class-kadence-blocks-row-layout-block.php b/includes/blocks/class-kadence-blocks-row-layout-block.php
@@ -177,18 +177,23 @@ public function get_template_columns( $css, $columns, $layout, $inner_selector,
 				} else {
 					switch ( $layout ) {
 						case 'left-half':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)';
 							break;
 						case 'right-half':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)';
 							break;
 						case 'center-half':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)';
 							break;
 						case 'center-wide':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)';
 							break;
 						case 'center-exwide':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr)';
 							break;
 						case 'first-row':
@@ -204,12 +209,15 @@ public function get_template_columns( $css, $columns, $layout, $inner_selector,
 							$css->set_selector( $inner_selector );
 							break;
 						case 'two-grid':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'repeat(2, minmax(0, 1fr))';
 							break;
 						case 'row':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr)';
 							break;
 						default:
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'repeat(3, minmax(0, 1fr))';
 							break;
 					}
@@ -221,18 +229,23 @@ public function get_template_columns( $css, $columns, $layout, $inner_selector,
 				} else {
 					switch ( $layout ) {
 						case 'left-forty':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)';
 							break;
 						case 'right-forty':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)';
 							break;
 						case 'two-grid':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'repeat(2, minmax(0, 1fr))';
 							break;
 						case 'row':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr)';
 							break;
 						default:
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'repeat(4, minmax(0, 1fr))';
 							break;
 					}
@@ -256,15 +269,19 @@ public function get_template_columns( $css, $columns, $layout, $inner_selector,
 							$css->set_selector( $inner_selector );
 							break;
 						case 'two-grid':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'repeat(2, minmax(0, 1fr))';
 							break;
 						case 'three-grid':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'repeat(3, minmax(0, 1fr))';
 							break;
 						case 'row':
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'minmax(0, 1fr)';
 							break;
 						default:
+							$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
 							$grid_layout = 'repeat(5, minmax(0, 1fr))';
 							break;
 					}
@@ -293,6 +310,16 @@ public function get_template_columns( $css, $columns, $layout, $inner_selector,
 		}
 		return $grid_layout;
 	}
+
+	/**
+	 * A reset helper for the template columns
+	 */
+	public function reset_grid_colum_for_template_columns( $css, $inner_selector ) {
+		$css->set_selector( $inner_selector . ' > *:not(.added-for-specificity):not(.added-for-specificity)' );
+		$css->add_property( 'grid-column', 'initial' );
+		$css->set_selector( $inner_selector );
+	}
+
 	/**
 	 * Builds CSS for block.
 	 *