From 995f6ebb75836fa54feae321610e7a2aaa629648 Mon Sep 17 00:00:00 2001 From: Mark Woodard Date: Thu, 5 Dec 2024 11:33:06 -0600 Subject: [PATCH] Adding a reset to template columns for row layouts that use a multi-row layout option on larger devices and a non-row layout on smaller ones. https://stellarwp.atlassian.net/browse/KAD-3442 --- .../class-kadence-blocks-row-layout-block.php | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/includes/blocks/class-kadence-blocks-row-layout-block.php b/includes/blocks/class-kadence-blocks-row-layout-block.php index bb1a68e7a..ca204e9f5 100644 --- 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. *