From 6957c76feb53735857dc8fbc01e1e7f07974208a Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 10 May 2024 14:34:03 +1000
Subject: [PATCH] Handle resizing up and left by combining block rect and box
 rect

---
 .../grid-visualizer/grid-item-resizer.js      | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
index 99c1908f2c4a4f..c99894c8e335bf 100644
--- a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
+++ b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
@@ -155,28 +155,22 @@ export function GridItemResizer( { clientId, onChange } ) {
 						getComputedCSS( gridElement, 'grid-template-rows' ),
 						rowGap
 					);
+					const rect = new window.DOMRect(
+						blockElement.offsetLeft + boxElement.offsetLeft,
+						blockElement.offsetTop + boxElement.offsetTop,
+						boxElement.offsetWidth,
+						boxElement.offsetHeight
+					);
 					const columnStart =
-						getClosestTrack(
-							gridColumnTracks,
-							blockElement.offsetLeft
-						) + 1;
+						getClosestTrack( gridColumnTracks, rect.left ) + 1;
 					const rowStart =
-						getClosestTrack(
-							gridRowTracks,
-							blockElement.offsetTop
-						) + 1;
+						getClosestTrack( gridRowTracks, rect.top ) + 1;
 					const columnEnd =
-						getClosestTrack(
-							gridColumnTracks,
-							blockElement.offsetLeft + boxElement.offsetWidth,
-							'end'
-						) + 1;
+						getClosestTrack( gridColumnTracks, rect.right, 'end' ) +
+						1;
 					const rowEnd =
-						getClosestTrack(
-							gridRowTracks,
-							blockElement.offsetTop + boxElement.offsetHeight,
-							'end'
-						) + 1;
+						getClosestTrack( gridRowTracks, rect.bottom, 'end' ) +
+						1;
 					onChange( {
 						columnSpan: columnEnd - columnStart + 1,
 						rowSpan: rowEnd - rowStart + 1,