diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index f68a7532f58b83..c1d9b2222960c4 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { useCallback, useMemo, createContext } from '@wordpress/element'; +import { useMemo, createContext } from '@wordpress/element'; import { Popover } from '@wordpress/components'; import { isRTL } from '@wordpress/i18n'; @@ -91,66 +91,81 @@ function BlockPopoverInbetween( { }; }, [ previousElement, nextElement, isVertical ] ); - 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.left + : nextRect.left, + bottom: nextRect + ? nextRect.top + : previousRect.bottom, + height: 0, + width: 0, + }; + } + + return { + top: previousRect ? previousRect.bottom : nextRect.top, + left: previousRect ? previousRect.left : nextRect.left, + right: previousRect + ? previousRect.right + : nextRect.right, + bottom: nextRect ? nextRect.top : previousRect.bottom, + height: 0, + width: 0, + }; + } + + if ( isRTL() ) { + return { + top: previousRect ? previousRect.top : nextRect.top, + left: previousRect ? previousRect.left : nextRect.right, + right: nextRect ? nextRect.right : previousRect.left, + bottom: previousRect + ? previousRect.bottom + : nextRect.bottom, + height: 0, + width: 0, + }; + } - if ( isVertical ) { - if ( isRTL() ) { return { - top: previousRect ? previousRect.bottom : nextRect.top, - left: previousRect ? previousRect.right : nextRect.right, - right: previousRect ? previousRect.left : nextRect.left, - bottom: nextRect ? nextRect.top : previousRect.bottom, + top: previousRect ? previousRect.top : nextRect.top, + left: previousRect ? previousRect.right : nextRect.left, + right: nextRect ? nextRect.left : previousRect.right, + bottom: previousRect + ? previousRect.bottom + : nextRect.bottom, height: 0, width: 0, - ownerDocument, }; - } - - return { - top: previousRect ? previousRect.bottom : nextRect.top, - left: previousRect ? previousRect.left : nextRect.left, - right: previousRect ? previousRect.right : nextRect.right, - bottom: nextRect ? nextRect.top : previousRect.bottom, - height: 0, - width: 0, - ownerDocument, - }; - } - - if ( isRTL() ) { - return { - top: previousRect ? previousRect.top : nextRect.top, - left: previousRect ? previousRect.left : nextRect.right, - right: nextRect ? nextRect.right : previousRect.left, - bottom: previousRect ? previousRect.bottom : nextRect.bottom, - height: 0, - width: 0, - ownerDocument, - }; - } - - return { - top: previousRect ? previousRect.top : nextRect.top, - left: previousRect ? previousRect.right : nextRect.left, - right: nextRect ? nextRect.left : previousRect.right, - bottom: previousRect ? previousRect.bottom : nextRect.bottom, - height: 0, - width: 0, - ownerDocument, + }, }; - }, [ previousElement, nextElement ] ); + }, [ previousElement, nextElement, isVisible ] ); const popoverScrollRef = usePopoverScroll( __unstableContentRef ); @@ -172,7 +187,7 @@ function BlockPopoverInbetween( {