From 9cc9dd2caaee6bf9ba27b7b5d308f6464242d41f Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Mon, 30 Sep 2024 07:49:43 +0300
Subject: [PATCH] make zoom out check a dependency of the memoization, improve
 code readability

---
 .../src/components/block-popover/index.js     | 23 ++++++++++++++-----
 1 file changed, 17 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 9a38a5b0ae35d5..9b8e991583239f 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -77,7 +77,8 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
+	const { isZoomOut: isZoomOutFn } = unlock( useSelect( blockEditorStore ) );
+	const isZoomOut = isZoomOutFn();
 
 	const popoverAnchor = useMemo( () => {
 		if (
@@ -93,17 +94,26 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
-				if ( isZoomOut() ) {
+				// The zoom out view has a verical block toolbar that should always
+				// be on the edge of the canvas. This condition chnages the anchor
+				// of the toolbar to the section instead of the block to cover for blocks
+				// that are not full width.
+				if ( isZoomOut ) {
 					const selectedBlockRect =
 						getVisibleElementBounds( selectedElement );
 					const sectionRootElementRect = getVisibleElementBounds(
 						selectedElement.parentElement
 					);
+					const selectedBlockRectHeight =
+						selectedBlockRect.bottom - selectedBlockRect.top;
+					const sectionRootElementRectWidth =
+						sectionRootElementRect.right -
+						sectionRootElementRect.left;
 					return new window.DOMRectReadOnly(
-						parentRect.left,
-						selectedRect.top,
-						parentRect.right - parentRect.left,
-						selectedRect.bottom - selectedRect.top
+						sectionRootElementRect.left,
+						selectedBlockRect.top,
+						sectionRootElementRectWidth,
+						selectedBlockRectHeight
 					);
 				}
 
@@ -121,6 +131,7 @@ function BlockPopover(
 		lastSelectedElement,
 		selectedElement,
 		popoverDimensionsRecomputeCounter,
+		isZoomOut,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {