Image: Manually update resizable box state when we don't have width/h…

…eight

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 WordPress#23985.

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 }