Fix responsive behaviour so both column start and column span are tak…

…en into account (WordPress#63464) Co-authored-by: tellthemachines <[email protected]> Co-authored-by: noisysocks <[email protected]>
carstingaxion · Jul 18, 2024 · 8479fe4 · 8479fe4
1 parent abb3907
commit 8479fe4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/backport-changelog/6.7/6910.md b/backport-changelog/6.7/6910.md
@@ -3,4 +3,5 @@ https://github.com/WordPress/wordpress-develop/pull/6910
 * https://github.com/WordPress/gutenberg/pull/59483
 * https://github.com/WordPress/gutenberg/pull/60652
 * https://github.com/WordPress/gutenberg/pull/62777
-* https://github.com/WordPress/gutenberg/pull/63108
+* https://github.com/WordPress/gutenberg/pull/63108
+* https://github.com/WordPress/gutenberg/pull/63464
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -646,11 +646,19 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		if ( ( $column_span || $column_start ) && ( $minimum_column_width || ! $column_count ) ) {
 			$column_span_number  = floatval( $column_span );
 			$column_start_number = floatval( $column_start );
-			$highest_number      = max( $column_span_number, $column_start_number );
 			$parent_column_width = $minimum_column_width ? $minimum_column_width : '12rem';
 			$parent_column_value = floatval( $parent_column_width );
 			$parent_column_unit  = explode( $parent_column_value, $parent_column_width );
 
+			$num_cols_to_break_at = 2;
+			if ( $column_span_number && $column_start_number ) {
+				$num_cols_to_break_at = $column_start_number + $column_span_number - 1;
+			} elseif ( $column_span_number ) {
+				$num_cols_to_break_at = $column_span_number;
+			} else {
+				$num_cols_to_break_at = $column_start_number;
+			}
+
 			/*
 			 * If there is no unit, the width has somehow been mangled so we reset both unit and value
 			 * to defaults.
@@ -672,7 +680,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			 * viable to use in the computation of the container query value.
 			 */
 			$default_gap_value             = 'px' === $parent_column_unit ? 24 : 1.5;
-			$container_query_value         = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value;
+			$container_query_value         = $num_cols_to_break_at * $parent_column_value + ( $num_cols_to_break_at - 1 ) * $default_gap_value;
 			$minimum_container_query_value = $parent_column_value * 2 + $default_gap_value - 1;
 			$container_query_value         = max( $container_query_value, $minimum_container_query_value ) . $parent_column_unit;
 			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.

diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
@@ -119,11 +119,20 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				parentColumnUnit = 'rem';
 			}
 
-			const highestNumber = Math.max( columnSpan, columnStart );
+			let numColsToBreakAt = 2;
+
+			if ( columnSpan && columnStart ) {
+				numColsToBreakAt = columnSpan + columnStart - 1;
+			} else if ( columnSpan ) {
+				numColsToBreakAt = columnSpan;
+			} else {
+				numColsToBreakAt = columnStart;
+			}
+
 			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
 			const containerQueryValue =
-				highestNumber * parentColumnValue +
-				( highestNumber - 1 ) * defaultGapValue;
+				numColsToBreakAt * parentColumnValue +
+				( numColsToBreakAt - 1 ) * defaultGapValue;
 			// For blocks that only span one column, we want to remove any rowStart values as
 			// the container reduces in size, so that blocks are still arranged in markup order.
 			const minimumContainerQueryValue =