Use BlockPopoverCover with inline prop

WordPress · Aug 8, 2024 · 9e3b9ae · 9e3b9ae
1 parent ebcd385
commit 9e3b9ae
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 93 deletions.
diff --git a/packages/block-editor/src/components/grid/grid-underlay.js b/packages/block-editor/src/components/grid/grid-underlay.js
diff --git 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
@@ -173,6 +173,7 @@ export function getGridInfo( gridElement ) {
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
 			display: 'grid',
+			padding: getComputedCSS( gridElement, 'padding' ),
 		},
 	};
 }