From 0bf929683bc2e3ceaa5330f67b950b5b17035e7d Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 1 Mar 2025 20:10:46 -0800
Subject: [PATCH] =?UTF-8?q?Put=20the=20Image=20block=E2=80=99s=20resizable?=
 =?UTF-8?q?=20box=20in=20a=20popover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/block-library/src/image/image.js | 36 +++++++++++++----------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 1e3065f62b18c2..3dd2f4b969ff6d 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -38,7 +38,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	BlockSettingsMenuControls,
 } from '@wordpress/block-editor';
-import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
@@ -287,18 +287,12 @@ export default function Image( {
 	const [ imageElement, setImageElement ] = useState();
 	const [ resizeDelta, setResizeDelta ] = useState( null );
 	const [ pixelSize, setPixelSize ] = useState( {} );
-	const [ offsetTop, setOffsetTop ] = useState( 0 );
 	const setResizeObserved = useResizeObserver( ( [ entry ] ) => {
 		if ( ! resizeDelta ) {
 			const [ box ] = entry.borderBoxSize;
 			setPixelSize( { width: box.inlineSize, height: box.blockSize } );
 		}
-		// This is usually 0 unless the image height is less than the line-height.
-		setOffsetTop( entry.target.offsetTop );
 	} );
-	const effectResizeableBoxPlacement = useCallback( () => {
-		setOffsetTop( imageElement?.offsetTop ?? 0 );
-	}, [ imageElement ] );
 	const setRefs = useMergeRefs( [ setImageElement, setResizeObserved ] );
 	const { allowResize = true } = context;
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
@@ -1022,14 +1016,7 @@ export default function Image( {
 		/* eslint-enable no-lonely-if */
 		resizableBox = (
 			<ResizableBox
-				ref={ effectResizeableBoxPlacement }
-				style={ {
-					position: 'absolute',
-					// To match the vertical-align: bottom of the img (from style.scss)
-					// syncs the top with the img. This matters when the img height is
-					// less than the line-height.
-					inset: `${ offsetTop }px 0 0 0`,
-				} }
+				style={ { position: 'absolute' } }
 				size={ pixelSize }
 				minWidth={ minWidth }
 				maxWidth={ maxResizeWidth }
@@ -1042,6 +1029,10 @@ export default function Image( {
 					bottom: true,
 					left: showLeftHandle,
 				} }
+				// Ensures that resizing stops when the pointer is released.
+				onPointerDown={ ( { currentTarget, pointerId } ) => {
+					currentTarget.setPointerCapture( pointerId );
+				} }
 				onResizeStart={ () => {
 					toggleSelection( false );
 				} }
@@ -1131,7 +1122,20 @@ export default function Image( {
 			{ controls }
 			{ featuredImageControl }
 			{ img }
-			{ resizableBox }
+			{ resizableBox && (
+				<Popover
+					animate={ false }
+					focusOnMount={ false }
+					anchor={ imageElement }
+					__unstableSlotName="block-toolbar"
+					placement="top-start"
+					resize={ false }
+					flip={ false }
+					variant="unstyled"
+				>
+					{ resizableBox }
+				</Popover>
+			) }
 
 			<Caption
 				attributes={ attributes }