From 9e3b9aef0894b5a8bf638258fa04719a887c2f9f Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 8 Aug 2024 15:49:30 +0800
Subject: [PATCH] Use BlockPopoverCover with inline prop

---
 .../src/components/grid/grid-underlay.js      | 90 -------------------
 .../src/components/grid/grid-visualizer.js    |  7 +-
 .../block-editor/src/components/grid/utils.js |  1 +
 3 files changed, 5 insertions(+), 93 deletions(-)
 delete mode 100644 packages/block-editor/src/components/grid/grid-underlay.js

diff --git a/packages/block-editor/src/components/grid/grid-underlay.js b/packages/block-editor/src/components/grid/grid-underlay.js
deleted file mode 100644
index 5b57da72d9c749..00000000000000
--- a/packages/block-editor/src/components/grid/grid-underlay.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useLayoutEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
-
-export function getComputedCSS( element, property ) {
-	return element.ownerDocument.defaultView
-		.getComputedStyle( element )
-		.getPropertyValue( property );
-}
-
-/** @typedef {import('react').ReactNode} ReactNode */
-
-/**
- * Underlay is a bit like a Popover, but is inline so only requires half the code.
- *
- * @param {Object}    props
- * @param {string}    props.clientId  The client id of the block being interacted with.
- * @param {string}    props.className A classname to add to the grid underlay.
- * @param {ReactNode} props.children  Child elements.
- */
-export default function Underlay( { clientId, className, children } ) {
-	const [ underlayStyle, setUnderlayStyle ] = useState( { display: 'none' } );
-	const rootClientId = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockRootClientId( clientId ),
-		[ clientId ]
-	);
-	const rootElement = useBlockElement( rootClientId );
-	const gridElement = useBlockElement( clientId );
-
-	useLayoutEffect( () => {
-		if ( ! gridElement || ! rootElement ) {
-			return;
-		}
-
-		const { ownerDocument } = gridElement;
-		const { defaultView } = ownerDocument;
-
-		const update = () => {
-			const rootRect = rootElement.getBoundingClientRect();
-			const gridRect = gridElement.getBoundingClientRect();
-
-			setUnderlayStyle( {
-				position: 'absolute',
-				left: Math.floor( gridRect.left - rootRect.left ),
-				top: Math.floor( gridRect.top - rootRect.top ),
-				width: Math.floor( gridRect.width ),
-				height: Math.floor( gridRect.height ),
-				margin: 0,
-				padding: getComputedCSS( gridElement, 'padding' ),
-				zIndex: 0,
-			} );
-		};
-
-		// Observe any resizes of both the layout and focused elements.
-		const resizeObserver = defaultView.ResizeObserver
-			? new defaultView.ResizeObserver( update )
-			: undefined;
-		const mutationObserver = defaultView.MutationObserver
-			? new defaultView.MutationObserver( update )
-			: undefined;
-
-		// Monitor grid and parent block resizing.
-		resizeObserver?.observe( gridElement );
-		resizeObserver?.observe( rootElement );
-
-		// Monitor block moving.
-		mutationObserver?.observe( gridElement, { attributes: true } );
-		update();
-
-		return () => {
-			resizeObserver?.disconnect();
-			mutationObserver?.disconnect();
-		};
-	}, [ gridElement, rootElement ] );
-
-	return (
-		<div className={ className } style={ underlayStyle }>
-			{ children }
-		</div>
-	);
-}
diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
index 78e834513dbe58..6296b5280e7f52 100644
--- a/packages/block-editor/src/components/grid/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -13,8 +13,8 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import GridUnderlay from './grid-underlay';
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
 import { range, GridRect, getGridInfo } from './utils';
 import { store as blockEditorStore } from '../../store';
 import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
@@ -84,7 +84,8 @@ const GridVisualizerGrid = forwardRef(
 		}, [] );
 
 		return (
-			<GridUnderlay
+			<BlockPopoverCover
+				inline
 				className={ clsx( 'block-editor-grid-visualizer', {
 					'is-dropping-allowed': isDroppingAllowed,
 				} ) }
@@ -109,7 +110,7 @@ const GridVisualizerGrid = forwardRef(
 						) )
 					) }
 				</div>
-			</GridUnderlay>
+			</BlockPopoverCover>
 		);
 	}
 );
diff --git a/packages/block-editor/src/components/grid/utils.js b/packages/block-editor/src/components/grid/utils.js
index 40c08896bb839a..117c8f92e9ba05 100644
--- a/packages/block-editor/src/components/grid/utils.js
+++ b/packages/block-editor/src/components/grid/utils.js
@@ -173,6 +173,7 @@ export function getGridInfo( gridElement ) {
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
 			display: 'grid',
+			padding: getComputedCSS( gridElement, 'padding' ),
 		},
 	};
 }