diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index e18dcba462a5ea..a0479ee8ef2670 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(1.5em, min-content)' ), + ); } } 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(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 e71e1739447aac..440e82e3e78fa2 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(1.5em, min-content)` ); } } else if ( minimumColumnWidth ) { rules.push( `grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`, + `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 79257ec0200be1..375278cc2a6a95 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(1.5em, min-content); 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(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 300f6e72be480f..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));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));}', + '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(