Handle resizing up and left by combining block rect and box rect

WordPress · May 10, 2024 · 6957c76 · 6957c76
1 parent 19e8ae2
commit 6957c76
Showing 1 changed file with 12 additions and 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
@@ -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,