From f5a632e15757710a2ec2343cfc28befcc885e2ff Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 14 Oct 2024 18:23:31 +0200
Subject: [PATCH] Use `__unstableContentRef` for zoomed out toolbar positioning
 instead of dom classname

---
 .../src/components/block-popover/index.js            | 12 ++++--------
 .../src/components/block-tools/zoom-out-popover.js   |  3 ++-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 3740e396af52f8..637ab1cb8a53e0 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -117,12 +117,6 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
-				// The popover should be positioned relative to the root element of the canvas. The canvas is the container of
-				// content in zoom out mode.
-				// FIXME: This should not be accessed by classname.
-				const canvasElement = selectedElement.closest(
-					'.block-editor-iframe__body'
-				);
 				// The zoom out view has a vertical block toolbar that should always
 				// be on the edge of the canvas, aligned to the top of the currently
 				// selected section. This condition changes the anchor of the toolbar
@@ -132,8 +126,9 @@ function BlockPopover(
 					// Compute the height based on the parent section of the
 					// selected block, because the selected block may be
 					// shorter than the section.
-					const canvasElementRect =
-						getVisibleElementBounds( canvasElement );
+					const canvasElementRect = getVisibleElementBounds(
+						__unstableContentRef.current
+					);
 					const parentSectionElementRect =
 						getVisibleElementBounds( parentSectionElement );
 					const anchorHeight =
@@ -168,6 +163,7 @@ function BlockPopover(
 		bottomClientId,
 		lastSelectedElement,
 		isSectionSelected,
+		__unstableContentRef,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
index a1f2990a5cc1ef..7a5c2243cf0540 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
@@ -5,7 +5,7 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import { PrivateBlockPopover as BlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 import ZoomOutToolbar from './zoom-out-toolbar';
@@ -29,6 +29,7 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 
 	return (
 		<BlockPopover
+			__unstableContentRef={ __unstableContentRef }
 			clientId={ capturingClientId || clientId }
 			bottomClientId={ lastClientId }
 			className={ clsx( 'zoom-out-toolbar-popover', {