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 ( -
- + ); }