From 35ff84c481cda97fbc74b771770638bf0a72a19a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 29 Aug 2022 19:32:56 +0200
Subject: [PATCH 1/2] Block toolbar: use anchor prop instead of
 anchorRef.{top,bottom}

---
 .../src/components/block-popover/index.js     | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 06b878e618be17..ec08efdd711ac1 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/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 }

From 58650ce8a73b31832875f6883c2ff81b1b6a16cf Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 31 Aug 2022 19:38:58 +0200
Subject: [PATCH 2/2] Update
 packages/block-editor/src/components/block-popover/index.js

Co-authored-by: Lena Morita <lena@jaguchi.com>
---
 packages/block-editor/src/components/block-popover/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index ec08efdd711ac1..f00731a8c16710 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -57,7 +57,7 @@ function BlockPopover(
 				// 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
+				// - for the bottom/right coordinates, use the largest numbers
 				const left = Math.min( selectedBCR.left, lastSelectedBCR.left );
 				const top = Math.min( selectedBCR.top, lastSelectedBCR.top );
 				const right = Math.max(