From b941a1e15769d061c26e12df4af3c3311ab7a11a Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Tue, 14 May 2024 15:14:02 +1000
Subject: [PATCH] Fix grid item resizing in non-iframed editor. (#61636)

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
---
 .../components/grid-visualizer/grid-item-resizer.js  | 12 ++++++++----
 .../src/components/grid-visualizer/style.scss        |  7 +++++++
 2 files changed, 15 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 bc82cb9d8efc05..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
@@ -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,9 +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( 'body' );
-					rootElementParent.addEventListener(
+					controller.abort();
+					event.target.ownerDocument.addEventListener(
 						'mouseup',
 						() => {
 							event.target.dispatchEvent(
@@ -221,6 +221,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;
+}
+