Use __unstableContentRef for zoomed out toolbar positioning instead…

… of dom classname
WordPress · Oct 14, 2024 · f5a632e · f5a632e
1 parent 0afb084
commit f5a632e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git 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
@@ -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', {