Fix inbetween inserters with new Popover component

WordPress · May 27, 2022 · 2ac7d28 · 2ac7d28
1 parent 2d9bd97
commit 2ac7d28
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -119,8 +119,8 @@ function BlockPopoverInbetween( {
 				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,
+					right: previousRect ? previousRect.right : nextRect.right,
+					bottom: previousRect ? previousRect.bottom : nextRect.top,
 					height: 0,
 					width: 0,
 					ownerDocument,
@@ -130,8 +130,8 @@ function BlockPopoverInbetween( {
 			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,
+				right: previousRect ? previousRect.left : nextRect.left,
+				bottom: previousRect ? previousRect.bottom : nextRect.top,
 				height: 0,
 				width: 0,
 				ownerDocument,
@@ -142,8 +142,8 @@ function BlockPopoverInbetween( {
 			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,
+				right: previousRect ? previousRect.left : nextRect.right,
+				bottom: previousRect ? previousRect.top : nextRect.top,
 				height: 0,
 				width: 0,
 				ownerDocument,
@@ -153,8 +153,8 @@ function BlockPopoverInbetween( {
 		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,
+			right: previousRect ? previousRect.right : nextRect.left,
+			bottom: previousRect ? previousRect.left : nextRect.right,
 			height: 0,
 			width: 0,
 			ownerDocument,
@@ -192,6 +192,7 @@ function BlockPopoverInbetween( {
 				props.className
 			) }
 			__unstableForcePosition
+			placement="bottom-start"
 		>
 			<div
 				className="block-editor-block-popover__inbetween-container"

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
@@ -62,6 +62,7 @@ export default function BlockPopover( {
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
 			__unstableForcePosition
+			__unstableShift
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -115,6 +115,7 @@ const Popover = (
 		__unstableSlotName = SLOT_NAME,
 		__unstableObserveElement,
 		__unstableForcePosition,
+		__unstableShift = false,
 		...contentProps
 	},
 	ref
@@ -190,12 +191,13 @@ const Popover = (
 						} );
 					},
 			  } ),
-		,
-		shift( {
-			crossAxis: true,
-			limiter: limitShift(),
-			padding: 1, // Necessary to avoid flickering at the edge of the viewport.
-		} ),
+		__unstableShift
+			? shift( {
+					crossAxis: true,
+					limiter: limitShift(),
+					padding: 1, // Necessary to avoid flickering at the edge of the viewport.
+			  } )
+			: undefined,
 		hasArrow ? arrow( { element: arrowRef } ) : undefined,
 	].filter( ( m ) => !! m );
 	const anchorRefFallback = useRef( null );
@@ -271,13 +273,12 @@ const Popover = (
 			usedRef = {
 				getBoundingClientRect() {
 					const rect = getAnchorRect();
-					return {
-						...rect,
-						x: rect.x ?? rect.left,
-						y: rect.y ?? rect.top,
-						height: rect.height ?? rect.bottom - rect.top,
-						width: rect.width ?? rect.right - rect.left,
-					};
+					return new window.DOMRect(
+						rect.x ?? rect.left,
+						rect.y ?? rect.top,
+						rect.width ?? rect.right - rect.left,
+						rect.height ?? rect.bottom - rect.top
+					);
 				},
 			};
 		} else if ( anchorRefFallback.current ) {