Block toolbar: use anchor prop instead of anchorRef.{top,bottom}

packages/block-editor/src/components/block-popover/index.js

@@ -47,22 +47,48 @@ function BlockPopover(
 		};
 	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
+	const popoverAnchor = useMemo(
+		() => ( {
+			getBoundingClientRect() {
+				const selectedBCR = selectedElement.getBoundingClientRect();
+				const lastSelectedBCR =
+					lastSelectedElement.getBoundingClientRect();
+
+				// Get the biggest rectangle that encompasses completely the currently
+				// selected element and the last selected element:
+				// - for top/left coordinates, use the smaller numbers
+				// - for the bottom/right coordinates, use the larget numbers
+				const left = Math.min( selectedBCR.left, lastSelectedBCR.left );
+				const top = Math.min( selectedBCR.top, lastSelectedBCR.top );
+				const right = Math.max(
+					selectedBCR.right,
+					lastSelectedBCR.right
+				);
+				const bottom = Math.max(
+					selectedBCR.bottom,
+					lastSelectedBCR.bottom
+				);
+				const width = right - left;
+				const height = bottom - top;
+
+				return new window.DOMRect( left, top, width, height );
+			},
+			ownerDocument: selectedElement.ownerDocument,
+		} ),
+		[ selectedElement, lastSelectedElement ]
+	);
+
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
 		return null;
 	}
 
-	const anchorRef = {
-		top: selectedElement,
-		bottom: lastSelectedElement,
-	};
-
 	return (
 		<Popover
 			ref={ mergedRefs }
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }