BlockPopover: Remove __unstableCoverTarget in favour of BlockPopoverC…

…over
WordPress · Feb 22, 2024 · 943c53f · 943c53f
1 parent 5041f61
commit 943c53f
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 61 deletions.
diff --git a/packages/block-editor/src/components/block-popover/cover.js b/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 );
diff --git a/packages/block-editor/src/components/block-popover/drop-zone.js b/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>
 	);
 }
 

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
@@ -13,7 +13,6 @@ import {
 	useMemo,
 	useReducer,
 	useLayoutEffect,
-	useState,
 } from '@wordpress/element';
 
 /**
@@ -29,7 +28,6 @@ function BlockPopover(
 		clientId,
 		bottomClientId,
 		children,
-		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
 		shift = true,
@@ -131,9 +129,6 @@ function BlockPopover(
 		return null;
 	}
 
-	const shouldCoverTarget =
-		__unstableCoverTarget && lastSelectedElement === selectedElement;
-
 	return (
 		<Popover
 			ref={ mergedRefs }
@@ -155,39 +150,9 @@ function BlockPopover(
 			) }
 			variant="unstyled"
 		>
-			{ shouldCoverTarget ? (
-				<CoverTargetContainer selectedElement={ selectedElement }>
-					{ children }
-				</CoverTargetContainer>
-			) : (
-				children
-			) }
+			{ children }
 		</Popover>
 	);
 }
 
-function CoverTargetContainer( { selectedElement, children } ) {
-	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
-	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
-
-	useLayoutEffect( () => {
-		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( BlockPopover );
diff --git a/packages/block-editor/src/components/block-tools/empty-block-inserter.js b/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>
 	);
 }
diff --git a/packages/block-editor/src/components/resizable-box-popover/index.js b/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>
 	);
 }
diff --git a/packages/block-editor/src/hooks/margin.js b/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,13 +78,11 @@ export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	}
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
 			__unstablePopoverSlot="block-toolbar"
-			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }
diff --git a/packages/block-editor/src/hooks/padding.js b/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,13 +69,11 @@ export function PaddingVisualizer( { clientId, value, forceShow } ) {
 	}
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
 			__unstablePopoverSlot="block-toolbar"
-			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }