Block inbetween inserter: use Popover's new anchor prop (#43693)

* BlockPopoverInbetween: refactor to use `anchor` prop * Simplify logic, use DOMRect * Add missing hook deps
WordPress · Sep 14, 2022 · 16e66d4 · 16e66d4
1 parent 28c7b18
commit 16e66d4
Showing 1 changed file with 50 additions and 52 deletions.
diff --git 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( {
 		<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).