From e144bffa57449fad20b976f19bf5bec2a64c6bcc Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 6 May 2024 12:12:48 +1000
Subject: [PATCH 1/3] Use `grid-auto-rows` to ensure min height of new grid
 rows.

---
 lib/block-supports/layout.php                  | 6 ++++++
 packages/block-editor/src/layouts/grid.js      | 3 +++
 packages/block-editor/src/layouts/test/grid.js | 8 ++++----
 phpunit/block-supports/layout-test.php         | 4 ++--
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index e18dcba462a5ea..eede1096e2f7b0 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -476,6 +476,11 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 					'selector'     => $selector,
 					'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(0, 1fr))' ),
 				);
+			} else {
+				$layout_styles[] = array(
+					'selector'     => $selector,
+					'declarations' => array( 'grid-auto-rows' => 'minmax(0, 1fr)' ),
+				);
 			}
 		} else {
 			$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
@@ -484,6 +489,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				'selector'     => $selector,
 				'declarations' => array(
 					'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
+					'grid-auto-rows'        => 'minmax(0, 1fr)',
 					'container-type'        => 'inline-size',
 				),
 			);
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index e71e1739447aac..23ea2b22006429 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -132,10 +132,13 @@ export default {
 				rules.push(
 					`grid-template-rows: repeat(${ rowCount }, minmax(0, 1fr))`
 				);
+			} else {
+				rules.push( `grid-auto-rows: minmax(0, 1fr)` );
 			}
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
+				`grid-auto-rows: minmax(0, 1fr)`,
 				`container-type: inline-size`
 			);
 		}
diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js
index 79257ec0200be1..368a50aa8be551 100644
--- a/packages/block-editor/src/layouts/test/grid.js
+++ b/packages/block-editor/src/layouts/test/grid.js
@@ -4,8 +4,8 @@
 import grid from '../grid';
 
 describe( 'getLayoutStyle', () => {
-	it( 'should return only `grid-template-columns` and `container-type` properties if no non-default params are provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
+	it( 'should return only `grid-template-columns`, `grid-auto-rows` and `container-type` properties if no non-default params are provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); grid-auto-rows: minmax(0, 1fr); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
@@ -18,8 +18,8 @@ describe( 'getLayoutStyle', () => {
 
 		expect( result ).toBe( expected );
 	} );
-	it( 'should return only `grid-template-columns` if columnCount property is provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
+	it( 'should return only `grid-template-columns` and `grid-auto-rows` if columnCount property is provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
diff --git a/phpunit/block-supports/layout-test.php b/phpunit/block-supports/layout-test.php
index 300f6e72be480f..714430cc05c996 100644
--- a/phpunit/block-supports/layout-test.php
+++ b/phpunit/block-supports/layout-test.php
@@ -371,7 +371,7 @@ public function data_gutenberg_get_layout_style() {
 						'type' => 'grid',
 					),
 				),
-				'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr));container-type:inline-size;}',
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr));grid-auto-rows:minmax(0, 1fr);container-type:inline-size;}',
 			),
 			'grid layout with columnCount'                 => array(
 				'args'            => array(
@@ -381,7 +381,7 @@ public function data_gutenberg_get_layout_style() {
 						'columnCount' => 3,
 					),
 				),
-				'expected_output' => '.wp-layout{grid-template-columns:repeat(3, minmax(0, 1fr));}',
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:minmax(0, 1fr);}',
 			),
 			'default layout with blockGap to verify converting gap value into valid CSS' => array(
 				'args'            => array(

From 60f5e5bca86cfe347c35f7e747bcc9c8bbbe4d64 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 6 May 2024 15:40:26 +1000
Subject: [PATCH 2/3] Adjust minmax

---
 lib/block-supports/layout.php                  | 4 ++--
 packages/block-editor/src/layouts/grid.js      | 4 ++--
 packages/block-editor/src/layouts/test/grid.js | 4 ++--
 phpunit/block-supports/layout-test.php         | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index eede1096e2f7b0..87ee25b4c36577 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -479,7 +479,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			} else {
 				$layout_styles[] = array(
 					'selector'     => $selector,
-					'declarations' => array( 'grid-auto-rows' => 'minmax(0, 1fr)' ),
+					'declarations' => array( 'grid-auto-rows' => 'minmax(50px, min-content)' ),
 				);
 			}
 		} else {
@@ -489,7 +489,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				'selector'     => $selector,
 				'declarations' => array(
 					'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
-					'grid-auto-rows'        => 'minmax(0, 1fr)',
+					'grid-auto-rows'        => 'minmax(50px, min-content)',
 					'container-type'        => 'inline-size',
 				),
 			);
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index 23ea2b22006429..a5ff2fba19bf2e 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -133,12 +133,12 @@ export default {
 					`grid-template-rows: repeat(${ rowCount }, minmax(0, 1fr))`
 				);
 			} else {
-				rules.push( `grid-auto-rows: minmax(0, 1fr)` );
+				rules.push( `grid-auto-rows: minmax(50px, min-content)` );
 			}
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
-				`grid-auto-rows: minmax(0, 1fr)`,
+				`grid-auto-rows: minmax(50px, min-content)`,
 				`container-type: inline-size`
 			);
 		}
diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js
index 368a50aa8be551..9fdbc57e3aecf2 100644
--- a/packages/block-editor/src/layouts/test/grid.js
+++ b/packages/block-editor/src/layouts/test/grid.js
@@ -5,7 +5,7 @@ import grid from '../grid';
 
 describe( 'getLayoutStyle', () => {
 	it( 'should return only `grid-template-columns`, `grid-auto-rows` and `container-type` properties if no non-default params are provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); grid-auto-rows: minmax(0, 1fr); container-type: inline-size; }`;
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); grid-auto-rows: minmax(50px, min-content); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
@@ -19,7 +19,7 @@ describe( 'getLayoutStyle', () => {
 		expect( result ).toBe( expected );
 	} );
 	it( 'should return only `grid-template-columns` and `grid-auto-rows` if columnCount property is provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }`;
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(50px, min-content); }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
diff --git a/phpunit/block-supports/layout-test.php b/phpunit/block-supports/layout-test.php
index 714430cc05c996..7d6301cf58828f 100644
--- a/phpunit/block-supports/layout-test.php
+++ b/phpunit/block-supports/layout-test.php
@@ -371,7 +371,7 @@ public function data_gutenberg_get_layout_style() {
 						'type' => 'grid',
 					),
 				),
-				'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr));grid-auto-rows:minmax(0, 1fr);container-type:inline-size;}',
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr));grid-auto-rows:minmax(50px, min-content);container-type:inline-size;}',
 			),
 			'grid layout with columnCount'                 => array(
 				'args'            => array(
@@ -381,7 +381,7 @@ public function data_gutenberg_get_layout_style() {
 						'columnCount' => 3,
 					),
 				),
-				'expected_output' => '.wp-layout{grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:minmax(0, 1fr);}',
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:minmax(50px, min-content);}',
 			),
 			'default layout with blockGap to verify converting gap value into valid CSS' => array(
 				'args'            => array(

From 9bcb2ab799a995411f75d57a48060e3c4a2cf9d9 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 7 May 2024 16:07:28 +1000
Subject: [PATCH 3/3] Try smaller min size

---
 lib/block-supports/layout.php                  | 4 ++--
 packages/block-editor/src/layouts/grid.js      | 4 ++--
 packages/block-editor/src/layouts/test/grid.js | 4 ++--
 phpunit/block-supports/layout-test.php         | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 87ee25b4c36577..a0479ee8ef2670 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -479,7 +479,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			} else {
 				$layout_styles[] = array(
 					'selector'     => $selector,
-					'declarations' => array( 'grid-auto-rows' => 'minmax(50px, min-content)' ),
+					'declarations' => array( 'grid-auto-rows' => 'minmax(1.5em, min-content)' ),
 				);
 			}
 		} else {
@@ -489,7 +489,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				'selector'     => $selector,
 				'declarations' => array(
 					'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
-					'grid-auto-rows'        => 'minmax(50px, min-content)',
+					'grid-auto-rows'        => 'minmax(1.5em, min-content)',
 					'container-type'        => 'inline-size',
 				),
 			);
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index a5ff2fba19bf2e..440e82e3e78fa2 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -133,12 +133,12 @@ export default {
 					`grid-template-rows: repeat(${ rowCount }, minmax(0, 1fr))`
 				);
 			} else {
-				rules.push( `grid-auto-rows: minmax(50px, min-content)` );
+				rules.push( `grid-auto-rows: minmax(1.5em, min-content)` );
 			}
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
-				`grid-auto-rows: minmax(50px, min-content)`,
+				`grid-auto-rows: minmax(1.5em, min-content)`,
 				`container-type: inline-size`
 			);
 		}
diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js
index 9fdbc57e3aecf2..375278cc2a6a95 100644
--- a/packages/block-editor/src/layouts/test/grid.js
+++ b/packages/block-editor/src/layouts/test/grid.js
@@ -5,7 +5,7 @@ import grid from '../grid';
 
 describe( 'getLayoutStyle', () => {
 	it( 'should return only `grid-template-columns`, `grid-auto-rows` and `container-type` properties if no non-default params are provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); grid-auto-rows: minmax(50px, min-content); container-type: inline-size; }`;
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); grid-auto-rows: minmax(1.5em, min-content); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
@@ -19,7 +19,7 @@ describe( 'getLayoutStyle', () => {
 		expect( result ).toBe( expected );
 	} );
 	it( 'should return only `grid-template-columns` and `grid-auto-rows` if columnCount property is provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(50px, min-content); }`;
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(1.5em, min-content); }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
diff --git a/phpunit/block-supports/layout-test.php b/phpunit/block-supports/layout-test.php
index 7d6301cf58828f..456ceb84aa0b53 100644
--- a/phpunit/block-supports/layout-test.php
+++ b/phpunit/block-supports/layout-test.php
@@ -371,7 +371,7 @@ public function data_gutenberg_get_layout_style() {
 						'type' => 'grid',
 					),
 				),
-				'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr));grid-auto-rows:minmax(50px, min-content);container-type:inline-size;}',
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr));grid-auto-rows:minmax(1.5em, min-content);container-type:inline-size;}',
 			),
 			'grid layout with columnCount'                 => array(
 				'args'            => array(
@@ -381,7 +381,7 @@ public function data_gutenberg_get_layout_style() {
 						'columnCount' => 3,
 					),
 				),
-				'expected_output' => '.wp-layout{grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:minmax(50px, min-content);}',
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:minmax(1.5em, min-content);}',
 			),
 			'default layout with blockGap to verify converting gap value into valid CSS' => array(
 				'args'            => array(