diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 54246499701a9c..f74530c9d54856 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -272,14 +272,10 @@ export function ImageEdit( {
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 	} );
 
-	// Focussing the image caption after inserting an image relies on the
-	// component remounting. This needs to be fixed.
-	const key = !! url;
-
 	return (
 		<>
 			{ controls }
-			<Block.figure ref={ ref } className={ classes } key={ key }>
+			<Block.figure ref={ ref } className={ classes }>
 				{ url && (
 					<Image
 						attributes={ attributes }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 18c06e5c9ebc76..d60fc8d21c9441 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -17,7 +17,7 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch, usePrevious } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockControls,
@@ -28,7 +28,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { getPath } from '@wordpress/url';
 import { createBlock } from '@wordpress/blocks';
@@ -80,6 +80,8 @@ export default function Image( {
 	onUploadError,
 	containerRef,
 } ) {
+	const captionRef = useRef();
+	const prevUrl = usePrevious( url );
 	const image = useSelect(
 		( select ) => {
 			const { getMedia } = select( 'core' );
@@ -142,6 +144,16 @@ export default function Image( {
 			.then( ( blob ) => setExternalBlob( blob ) );
 	}, [ id, url, isSelected, externalBlob ] );
 
+	// Focus the caption after inserting an image from the placeholder. This is
+	// done to preserve the behaviour of focussing the first tabbable element
+	// when a block is mounted. Previously, the image block would remount when
+	// the placeholder is removed. Maybe this behaviour could be removed.
+	useEffect( () => {
+		if ( url && ! prevUrl && isSelected ) {
+			captionRef.current.focus();
+		}
+	}, [ url, prevUrl ] );
+
 	function onResizeStart() {
 		toggleSelection( false );
 	}
@@ -486,6 +498,7 @@ export default function Image( {
 			{ img }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
+					ref={ captionRef }
 					tagName="figcaption"
 					placeholder={ __( 'Write caption…' ) }
 					value={ caption }