diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index cf76527f4910a0..442ae06edffe08 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -8,7 +8,6 @@ import classnames from 'classnames'; */ import { useSelect } from '@wordpress/data'; import { - useCallback, useMemo, createContext, useReducer, @@ -107,66 +106,65 @@ function BlockPopoverInbetween( { isVisible, ] ); - const getAnchorRect = useCallback( () => { + const popoverAnchor = useMemo( () => { if ( ( ! previousElement && ! nextElement ) || ! isVisible ) { - return {}; + return undefined; } const { ownerDocument } = previousElement || nextElement; - const previousRect = previousElement - ? previousElement.getBoundingClientRect() - : null; - const nextRect = nextElement - ? nextElement.getBoundingClientRect() - : null; + return { + ownerDocument, + getBoundingClientRect() { + const previousRect = previousElement + ? previousElement.getBoundingClientRect() + : null; + const nextRect = nextElement + ? nextElement.getBoundingClientRect() + : null; - if ( isVertical ) { - if ( isRTL() ) { - return { - top: previousRect ? previousRect.bottom : nextRect.top, - left: previousRect ? previousRect.right : nextRect.right, - right: previousRect ? previousRect.right : nextRect.right, - bottom: previousRect ? previousRect.bottom : nextRect.top, - height: 0, - width: 0, - ownerDocument, - }; - } + let left = 0; + let top = 0; - return { - top: previousRect ? previousRect.bottom : nextRect.top, - left: previousRect ? previousRect.left : nextRect.left, - right: previousRect ? previousRect.left : nextRect.left, - bottom: previousRect ? previousRect.bottom : nextRect.top, - height: 0, - width: 0, - ownerDocument, - }; - } + if ( isVertical ) { + // vertical + top = previousRect ? previousRect.bottom : nextRect.top; - if ( isRTL() ) { - return { - top: previousRect ? previousRect.top : nextRect.top, - left: previousRect ? previousRect.left : nextRect.right, - right: previousRect ? previousRect.left : nextRect.right, - bottom: previousRect ? previousRect.top : nextRect.top, - height: 0, - width: 0, - ownerDocument, - }; - } + if ( isRTL() ) { + // vertical, rtl + left = previousRect + ? previousRect.right + : nextRect.right; + } else { + // vertical, ltr + left = previousRect ? previousRect.left : nextRect.left; + } + } else { + top = previousRect ? previousRect.top : nextRect.top; - return { - top: previousRect ? previousRect.top : nextRect.top, - left: previousRect ? previousRect.right : nextRect.left, - right: previousRect ? previousRect.right : nextRect.left, - bottom: previousRect ? previousRect.left : nextRect.right, - height: 0, - width: 0, - ownerDocument, + if ( isRTL() ) { + // non vertical, rtl + left = previousRect + ? previousRect.left + : nextRect.right; + } else { + // non vertical, ltr + left = previousRect + ? previousRect.right + : nextRect.left; + } + } + + return new window.DOMRect( left, top, 0, 0 ); + }, }; - }, [ previousElement, nextElement, positionRecompute, isVisible ] ); + }, [ + previousElement, + nextElement, + positionRecompute, + isVertical, + isVisible, + ] ); const popoverScrollRef = usePopoverScroll( __unstableContentRef ); @@ -229,7 +227,7 @@ function BlockPopoverInbetween( {