From d982fdf43fdb0a2581ce0e8ee5ec6835bdc06d68 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 25 Jun 2024 15:45:58 +1000
Subject: [PATCH] Fix min rows needed when items span multiple cells

---
 .../grid-visualizer/use-grid-layout-sync.js   | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/grid-visualizer/use-grid-layout-sync.js b/packages/block-editor/src/components/grid-visualizer/use-grid-layout-sync.js
index 8b4a57a178d46..6a3a05e52fcb9 100644
--- a/packages/block-editor/src/components/grid-visualizer/use-grid-layout-sync.js
+++ b/packages/block-editor/src/components/grid-visualizer/use-grid-layout-sync.js
@@ -34,26 +34,19 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		const isManualGrid = !! columnCount;
 
 		if ( isManualGrid ) {
-			// Ensure there's enough rows to fit all blocks.
-			const minimumNeededRows = Math.ceil(
-				blockOrder.length / columnCount
-			);
-			if ( rowCount < minimumNeededRows ) {
-				updates[ gridClientId ] = {
-					layout: {
-						...gridLayout,
-						rowCount: minimumNeededRows,
-					},
-				};
-			}
-
 			const rects = [];
+			let cellsTaken = 0;
 
 			// Respect the position of blocks that already have a columnStart and rowStart value.
 			for ( const clientId of blockOrder ) {
 				const attributes = getBlockAttributes( clientId );
-				const { columnStart, rowStart, columnSpan, rowSpan } =
-					attributes.style?.layout || {};
+				const {
+					columnStart,
+					rowStart,
+					columnSpan = 1,
+					rowSpan = 1,
+				} = attributes.style?.layout || {};
+				cellsTaken += columnSpan * rowSpan;
 				if ( ! columnStart || ! rowStart ) {
 					continue;
 				}
@@ -67,6 +60,17 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 				);
 			}
 
+			// Ensure there's enough rows to fit all blocks.
+			const minimumNeededRows = Math.ceil( cellsTaken / columnCount );
+			if ( rowCount < minimumNeededRows ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: minimumNeededRows,
+					},
+				};
+			}
+
 			// When in manual mode, ensure that every block has a columnStart and rowStart value.
 			for ( const clientId of blockOrder ) {
 				const attributes = getBlockAttributes( clientId );