From c5fe4297059e266dae995b63f9dce537bff78788 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 25 Jun 2024 12:12:25 +1000
Subject: [PATCH] Fix rows logic and fix front end

---
 lib/block-supports/layout.php                   | 10 +++++++---
 packages/block-editor/src/hooks/layout-child.js |  9 ++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index cb6081bafae41..2f9cc1dc35159 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -495,6 +495,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				'selector'     => $selector,
 				'declarations' => array(
 					'grid-template-columns' => 'repeat(auto-fill, minmax(' . $max_value . ', 1fr))',
+					'container-type'        => 'inline-size',
 				),
 			);
 		} elseif ( ! empty( $layout['columnCount'] ) ) {
@@ -664,17 +665,20 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			 * A default gap value is used for this computation because custom gap values may not be
 			 * 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 = $container_query_value . $parent_column_unit;
+			$default_gap_value             = 'px' === $parent_column_unit ? 24 : 1.5;
+			$container_query_value         = $highest_number * $parent_column_value + ( $highest_number - 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.
 			$grid_column_value = $column_span ? '1/-1' : 'auto';
+			$grid_row_value    = $row_start && ( ! $row_span || '1' === $row_span ) ? 'auto' : 'span ' . $row_span;
 
 			$child_layout_styles[] = array(
 				'rules_group'  => "@container (max-width: $container_query_value )",
 				'selector'     => ".$container_content_class",
 				'declarations' => array(
 					'grid-column' => $grid_column_value,
+					'grid-row'    => $grid_row_value,
 				),
 			);
 		}
diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
index 2ea1b4dbb6ce8..1430d39cb3ae4 100644
--- a/packages/block-editor/src/hooks/layout-child.js
+++ b/packages/block-editor/src/hooks/layout-child.js
@@ -116,6 +116,10 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			const containerQueryValue =
 				highestNumber * parentColumnValue +
 				( highestNumber - 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 =
+				parentColumnValue * 2 + defaultGapValue - 1;
 			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
 			const gridColumnValue = columnSpan ? '1/-1' : 'auto';
 
@@ -125,7 +129,10 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 					? 'auto'
 					: `span ${ rowSpan }`;
 
-			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
+			css += `@container (max-width: ${ Math.max(
+				containerQueryValue,
+				minimumContainerQueryValue
+			) }${ parentColumnUnit }) {
 				${ selector } {
 					grid-column: ${ gridColumnValue };
 					grid-row: ${ gridRowValue };