From 18acd97102befc8c47e9d4ecbd5e88ed1a2bd725 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 14 May 2024 10:41:40 +1000
Subject: [PATCH 1/2] Fix grid item resizing in non-iframed editor.

---
 .../components/grid-visualizer/grid-item-resizer.js  | 12 +++++++++---
 .../src/components/grid-visualizer/style.scss        |  7 +++++++
 2 files changed, 16 insertions(+), 3 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 bc82cb9d8efc05..60bc85a95d23aa 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
@@ -63,6 +63,8 @@ function GridItemResizerInner( {
 	 * This ref is necessary get the bounding client rect of the resizer,
 	 * because it exists outside of the iframe, so its bounding client
 	 * rect isn't the same as the block element's.
+	 * It needs to be added to a dummy element because we can't be sure if
+	 * the popover or the resizer are on the page when we need them.
 	 */
 	const resizerRef = useRef( null );
 
@@ -131,7 +133,6 @@ function GridItemResizerInner( {
 			clientId={ clientId }
 			__unstablePopoverSlot="block-toolbar"
 			additionalStyles={ styles }
-			__unstableContentRef={ resizerRef }
 		>
 			<ResizableBox
 				className="block-editor-grid-item-resizer__box"
@@ -164,8 +165,9 @@ function GridItemResizerInner( {
 					 * isn't directly above the handle, so we try to detect if it happens
 					 * outside the grid and dispatch a mouseup event on the handle.
 					 */
-					const rootElementParent =
-						rootBlockElement.closest( 'body' );
+					const rootElementParent = rootBlockElement.closest(
+						'.editor-styles-wrapper'
+					);
 					rootElementParent.addEventListener(
 						'mouseup',
 						() => {
@@ -221,6 +223,10 @@ function GridItemResizerInner( {
 					controller.abort();
 				} }
 			/>
+			<div
+				className="block-editor-grid-item-resizer__dummy"
+				ref={ resizerRef }
+			></div>
 		</BlockPopoverCover>
 	);
 }
diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss
index 9d5d306eadaa75..ed3e64cfc372ea 100644
--- a/packages/block-editor/src/components/grid-visualizer/style.scss
+++ b/packages/block-editor/src/components/grid-visualizer/style.scss
@@ -32,3 +32,10 @@
 	}
 }
 
+.block-editor-grid-item-resizer__dummy {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+}
+

From 3e1f42535f8b28df99e8432b005a637d220e0e63 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 14 May 2024 14:25:56 +1000
Subject: [PATCH 2/2] Update to use Rob's suggestion

---
 .../src/components/grid-visualizer/grid-item-resizer.js     | 6 ++----
 1 file changed, 2 insertions(+), 4 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 60bc85a95d23aa..561536643f1c4c 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
@@ -165,10 +165,8 @@ function GridItemResizerInner( {
 					 * isn't directly above the handle, so we try to detect if it happens
 					 * outside the grid and dispatch a mouseup event on the handle.
 					 */
-					const rootElementParent = rootBlockElement.closest(
-						'.editor-styles-wrapper'
-					);
-					rootElementParent.addEventListener(
+					controller.abort();
+					event.target.ownerDocument.addEventListener(
 						'mouseup',
 						() => {
 							event.target.dispatchEvent(