BlockPopover: Remove __unstableCoverTarget and __unstableRefreshSize in favour of BlockPopoverCover

packages/block-editor/src/components/block-popover/cover.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopover from '.';
+
+function BlockPopoverCover(
+	{ clientId, bottomClientId, children, shift = false, ...props },
+	ref
+) {
+	bottomClientId ??= clientId;
+
+	const selectedElement = useBlockElement( clientId );
+
+	return (
+		<BlockPopover
+			ref={ ref }
+			clientId={ clientId }
+			bottomClientId={ bottomClientId }
+			shift={ shift }
+			{ ...props }
+		>
+			{ selectedElement && clientId === bottomClientId ? (
+				<CoverContainer selectedElement={ selectedElement }>
+					{ children }
+				</CoverContainer>
+			) : (
+				children
+			) }
+		</BlockPopover>
+	);
+}
+
+function CoverContainer( { selectedElement, children } ) {
+	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
+	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
+
+	useEffect( () => {
+		const observer = new window.ResizeObserver( () => {
+			setWidth( selectedElement.offsetWidth );
+			setHeight( selectedElement.offsetHeight );
+		} );
+		observer.observe( selectedElement, { box: 'border-box' } );
+		return () => observer.disconnect();
+	}, [ selectedElement ] );
+
+	const style = useMemo( () => {
+		return {
+			position: 'absolute',
+			width,
+			height,
+		};
+	}, [ width, height ] );
+
+	return <div style={ style }>{ children }</div>;
+}
+
+export default forwardRef( BlockPopoverCover );

packages/block-editor/src/components/block-popover/drop-zone.js

@@ -9,7 +9,7 @@ import { __unstableMotion as motion } from '@wordpress/components';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import BlockPopover from './index';
+import BlockPopoverCover from './cover';
 
 const animateVariants = {
 	hide: { opacity: 0, scaleY: 0.75 },
@@ -38,9 +38,8 @@ function BlockDropZonePopover( {
 	const reducedMotion = useReducedMotion();
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
 			className="block-editor-block-popover__drop-zone"
@@ -56,7 +55,7 @@ function BlockDropZonePopover( {
 				}
 				className="block-editor-block-popover__drop-zone-foreground"
 			/>
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }
 

packages/block-editor/src/components/block-popover/index.js

@@ -28,8 +28,6 @@ function BlockPopover(
 		clientId,
 		bottomClientId,
 		children,
-		__unstableRefreshSize,
-		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
 		shift = true,
@@ -75,30 +73,6 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const style = useMemo( () => {
-		if (
-			// popoverDimensionsRecomputeCounter is by definition always equal or greater
-			// than 0. This check is only there to satisfy the correctness of the
-			// exhaustive-deps rule for the `useMemo` hook.
-			popoverDimensionsRecomputeCounter < 0 ||
-			! selectedElement ||
-			lastSelectedElement !== selectedElement
-		) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [
-		selectedElement,
-		lastSelectedElement,
-		__unstableRefreshSize,
-		popoverDimensionsRecomputeCounter,
-	] );
-
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
@@ -176,8 +150,7 @@ function BlockPopover(
 			) }
 			variant="unstyled"
 		>
-			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
-			{ ! __unstableCoverTarget && children }
+			{ children }
 		</Popover>
 	);
 }

packages/block-editor/src/components/block-tools/empty-block-inserter.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import BlockPopoverCover from '../block-popover/cover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
@@ -28,9 +28,8 @@ export default function EmptyBlockInserter( {
 	} );
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ capturingClientId || clientId }
-			__unstableCoverTarget
 			bottomClientId={ lastClientId }
 			className={ classnames(
 				'block-editor-block-list__block-side-inserter-popover',
@@ -39,8 +38,6 @@ export default function EmptyBlockInserter( {
 				}
 			) }
 			__unstableContentRef={ __unstableContentRef }
-			resize={ false }
-			shift={ false }
 			{ ...popoverProps }
 		>
 			<div className="block-editor-block-list__empty-block-inserter">
@@ -51,6 +48,6 @@ export default function EmptyBlockInserter( {
 					__experimentalIsQuick
 				/>
 			</div>
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }

packages/block-editor/src/components/resizable-box-popover/index.js

@@ -6,22 +6,20 @@ import { ResizableBox } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import BlockPopoverCover from '../block-popover/cover';
 
 export default function ResizableBoxPopover( {
 	clientId,
 	resizableBoxProps,
 	...props
 } ) {
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
 			__unstablePopoverSlot="__unstable-block-tools-after"
-			shift={ false }
 			{ ...props }
 		>
 			<ResizableBox { ...resizableBoxProps } />
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }

packages/block-editor/src/hooks/margin.js

@@ -7,7 +7,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../components/block-popover';
+import BlockPopoverCover from '../components/block-popover/cover';
 import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedCSS( element, property ) {
@@ -78,14 +78,11 @@ export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	}
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
-			__unstableRefreshSize={ margin }
 			__unstablePopoverSlot="block-toolbar"
-			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }

packages/block-editor/src/hooks/padding.js

@@ -7,7 +7,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../components/block-popover';
+import BlockPopoverCover from '../components/block-popover/cover';
 import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedCSS( element, property ) {
@@ -69,14 +69,11 @@ export function PaddingVisualizer( { clientId, value, forceShow } ) {
 	}
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
-			__unstableRefreshSize={ padding }
 			__unstablePopoverSlot="block-toolbar"
-			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }

packages/block-library/src/cover/edit/resizable-cover-popover.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -40,10 +40,6 @@ export default function ResizableCoverPopover( {
 	...props
 } ) {
 	const [ isResizing, setIsResizing ] = useState( false );
-	const dimensions = useMemo(
-		() => ( { height, minHeight, width } ),
-		[ minHeight, height, width ]
-	);
 
 	const resizableBoxProps = {
 		className: classnames( className, { 'is-resizing': isResizing } ),
@@ -75,7 +71,6 @@ export default function ResizableCoverPopover( {
 	return (
 		<ResizableBoxPopover
 			className="block-library-cover__resizable-box-popover"
-			__unstableRefreshSize={ dimensions }
 			resizableBoxProps={ resizableBoxProps }
 			{ ...props }
 		/>