diff --git a/packages/block-editor/src/components/block-popover/cover.js b/packages/block-editor/src/components/block-popover/cover.js
new file mode 100644
index 0000000000000..6d2d5b8ce1ac0
--- /dev/null
+++ 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 (
+
+ { selectedElement && clientId === bottomClientId ? (
+
+ { children }
+
+ ) : (
+ children
+ ) }
+
+ );
+}
+
+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
{ children }
;
+}
+
+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
index c26f28127022d..1174c619cb3f4 100644
--- 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 (
-
-
+
);
}
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 9cbee1b372bc3..d5ac90c68745e 100644
--- 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 (
- { shouldCoverTarget ? (
-
- { children }
-
- ) : (
- children
- ) }
+ { children }
);
}
-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 { children }
;
-}
-
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
index 1d520ed72b1c6..bf708c686363f 100644
--- 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 (
-
@@ -51,6 +48,6 @@ export default function EmptyBlockInserter( {
__experimentalIsQuick
/>
-
+
);
}
diff --git a/packages/block-editor/src/components/resizable-box-popover/index.js b/packages/block-editor/src/components/resizable-box-popover/index.js
index 12a61aceaaf38..8a49c1631287a 100644
--- a/packages/block-editor/src/components/resizable-box-popover/index.js
+++ b/packages/block-editor/src/components/resizable-box-popover/index.js
@@ -6,7 +6,7 @@ import { ResizableBox } from '@wordpress/components';
/**
* Internal dependencies
*/
-import BlockPopover from '../block-popover';
+import BlockPopoverCover from '../block-popover/cover';
export default function ResizableBoxPopover( {
clientId,
@@ -14,14 +14,12 @@ export default function ResizableBoxPopover( {
...props
} ) {
return (
-
-
+
);
}
diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js
index d81dcf86a0148..7be1179d29510 100644
--- 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 (
-
-
+
);
}
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index 10085e5ae6291..50eed7ac05d5e 100644
--- 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 (
-
-
+
);
}