From 48ae9b0aada423acdacb604f633bb5fcca049dc1 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 8 May 2024 11:13:50 +1000
Subject: [PATCH] Try popover ref

---
 .../components/grid-visualizer/grid-item-resizer.js    | 10 +++-------
 .../src/components/grid-visualizer/style.scss          |  6 ------
 2 files changed, 3 insertions(+), 13 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 c18cd590d3fac..7f4e0967e289a 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
@@ -22,7 +22,7 @@ export function GridItemResizer( { clientId, onChange } ) {
 	 * necessary because the resizer exists outside of the iframe, so
 	 * its bounding client rect isn't the same as the block element's.
 	 */
-	const resizerDummyRef = useRef( null );
+	const resizerRef = useRef( null );
 
 	if ( ! blockElement ) {
 		return null;
@@ -62,8 +62,7 @@ export function GridItemResizer( { clientId, onChange } ) {
 		offsetWidth: rootBlockElement.offsetWidth,
 		offsetHeight: rootBlockElement.offsetHeight,
 		getBoundingClientRect: () => {
-			const resizerTop =
-				resizerDummyRef.current?.getBoundingClientRect()?.top;
+			const resizerTop = resizerRef.current?.getBoundingClientRect()?.top;
 			// Fallback value of 60 to account for editor top bar height.
 			const heightDifference = resizerTop
 				? resizerTop - blockClientRect.top
@@ -96,6 +95,7 @@ export function GridItemResizer( { clientId, onChange } ) {
 			clientId={ clientId }
 			__unstablePopoverSlot="block-toolbar"
 			additionalStyles={ styles }
+			__unstableContentRef={ resizerRef }
 		>
 			<ResizableBox
 				className="block-editor-grid-item-resizer__box"
@@ -179,10 +179,6 @@ export function GridItemResizer( { clientId, onChange } ) {
 					} );
 				} }
 			/>
-			<div
-				className="block-editor-grid-item-resizer__dummy"
-				ref={ resizerDummyRef }
-			></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 a50b5552c25a7..9d5d306eadaa7 100644
--- a/packages/block-editor/src/components/grid-visualizer/style.scss
+++ b/packages/block-editor/src/components/grid-visualizer/style.scss
@@ -32,9 +32,3 @@
 	}
 }
 
-.block-editor-grid-item-resizer__dummy {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	z-index: -1;
-}