BlockPopoverInbetween: refactor to use anchor prop

WordPress · Aug 31, 2022 · a265060 · a265060
1 parent fb73356
commit a265060
Showing 1 changed file with 66 additions and 51 deletions.
diff --git 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( {
 		<Popover
 			ref={ popoverScrollRef }
 			animate={ false }
-			getAnchorRect={ getAnchorRect }
+			anchor={ popoverAnchor }
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).