From 687c2ea948a40d7d6f5edb886934ca78e59401f0 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 17 Mar 2021 07:03:26 +0400
Subject: [PATCH] Image: Manually update resizable box state when we don't have
 width/height

When changing to a different image, we reset dimension attributes, including size props for the resizable box. But this doesn't automatically reset dimensions in the resizable box state, which is used for inline styles. So we have to do it manually.

See #23985.
---
 packages/block-library/src/image/image.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 995993f33a060c..8d7ff6c028b76f 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -89,6 +89,7 @@ export default function Image( {
 	containerRef,
 } ) {
 	const captionRef = useRef();
+	const resizableBoxRef = useRef();
 	const prevUrl = usePrevious( url );
 	const { block, currentId, image, multiImageSelection } = useSelect(
 		( select ) => {
@@ -177,6 +178,17 @@ export default function Image( {
 		}
 	}, [ url, prevUrl ] );
 
+	// Set resizable box dimensions to "auto" when we don't have width/height.
+	// This is done to reset inline styles after changing to a different image.
+	useEffect( () => {
+		if ( url && resizableBoxRef.current && ! width && ! height ) {
+			resizableBoxRef.current.updateSize( {
+				width: 'auto',
+				height: 'auto',
+			} );
+		}
+	}, [ url, width, height ] );
+
 	function onResizeStart() {
 		toggleSelection( false );
 	}
@@ -510,6 +522,7 @@ export default function Image( {
 
 		img = (
 			<ResizableBox
+				ref={ resizableBoxRef }
 				size={ { width, height } }
 				showHandle={ isSelected }
 				minWidth={ minWidth }