Image Block: add caption field to placeholder

packages/block-library/src/image/edit.js

@@ -161,7 +161,6 @@ export function ImageEdit( {
 				alt: undefined,
 				id: undefined,
 				title: undefined,
-				caption: undefined,
 			} );
 			return;
 		}
@@ -176,9 +175,9 @@ export function ImageEdit( {
 			}
 		}
 
-		// If a caption text was meanwhile written by the user,
-		// make sure the text is not overwritten by empty captions.
-		if ( caption && ! get( mediaAttributes, [ 'caption' ] ) ) {
+		// If a caption text was meanwhile written by the user, make sure the
+		// text is not overwritten by another caption.
+		if ( caption ) {
 			mediaAttributes = omit( mediaAttributes, [ 'caption' ] );
 		}
 
@@ -404,11 +403,33 @@ export function ImageEdit( {
 		imageHeight,
 	} = useImageSize( ref, url, [ align ] );
 
+	let captionField;
+
+	if ( ! RichText.isEmpty( caption ) || isSelected ) {
+		captionField = (
+			<RichText
+				tagName="figcaption"
+				placeholder={ __( 'Write caption…' ) }
+				value={ caption }
+				unstableOnFocus={ onFocusCaption }
+				onChange={ ( value ) => setAttributes( { caption: value } ) }
+				isSelected={ captionFocused }
+				inlineToolbar
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+				}
+			/>
+		);
+	}
+
 	if ( ! url ) {
 		return (
 			<>
 				{ controls }
-				<Block.div>{ mediaPlaceholder }</Block.div>
+				<Block.figure>
+					{ mediaPlaceholder }
+					{ captionField }
+				</Block.figure>
 			</>
 		);
 	}
@@ -596,22 +617,7 @@ export function ImageEdit( {
 			{ controls }
 			<Block.figure ref={ ref } className={ classes }>
 				{ img }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						placeholder={ __( 'Write caption…' ) }
-						value={ caption }
-						unstableOnFocus={ onFocusCaption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						isSelected={ captionFocused }
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
-						}
-					/>
-				) }
+				{ captionField }
 				{ mediaPlaceholder }
 			</Block.figure>
 		</>

packages/e2e-tests/specs/editor/blocks/image.test.js

@@ -98,4 +98,15 @@ describe( 'Image', () => {
 			await page.evaluate( () => document.activeElement.innerHTML )
 		).toBe( '12' );
 	} );
+
+	it( 'should keep caption after upload', async () => {
+		await insertBlock( 'Image' );
+		await page.keyboard.type( '1' );
+		const filename1 = await upload( '.wp-block-image input[type="file"]' );
+
+		const regex = new RegExp(
+			`<!-- wp:image {"id":\\d+,"sizeSlug":"large"} -->\\s*<figure class="wp-block-image size-large"><img src="[^"]+\\/${ filename1 }\\.png" alt="" class="wp-image-\\d+"/><figcaption>1</figcaption></figure>\\s*<!-- \\/wp:image -->`
+		);
+		expect( await getEditedPostContent() ).toMatch( regex );
+	} );
 } );

packages/e2e-tests/specs/editor/plugins/templates.test.js

@@ -37,6 +37,7 @@ describe( 'templates', () => {
 			// re-added after saving and reloading the editor.
 			await page.click( '.editor-post-title__input' );
 			await page.keyboard.press( 'ArrowDown' );
+			await pressKeyWithModifier( 'shift', 'Tab' );
 			await page.keyboard.press( 'Backspace' );
 			await saveDraft();
 			await page.reload();
@@ -49,6 +50,7 @@ describe( 'templates', () => {
 			// re-added after saving and reloading the editor.
 			await page.type( '.editor-post-title__input', 'My Empty Book' );
 			await page.keyboard.press( 'ArrowDown' );
+			await pressKeyWithModifier( 'shift', 'Tab' );
 			await pressKeyWithModifier( 'primary', 'A' );
 			await page.keyboard.press( 'Backspace' );
 			await saveDraft();
@@ -100,6 +102,7 @@ describe( 'templates', () => {
 			await page.type( '.editor-post-title__input', 'My Image Format' );
 			await clickBlockAppender();
 			await page.keyboard.press( 'Backspace' );
+			await pressKeyWithModifier( 'shift', 'Tab' );
 			await page.keyboard.press( 'Backspace' );
 			await saveDraft();
 			await page.reload();

packages/e2e-tests/specs/editor/various/adding-blocks.test.js

@@ -8,6 +8,7 @@ import {
 	pressKeyTimes,
 	setBrowserViewport,
 	closeGlobalBlockInserter,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 /** @typedef {import('puppeteer').ElementHandle} ElementHandle */
@@ -66,6 +67,7 @@ describe( 'adding blocks', () => {
 		await page.keyboard.press( 'Enter' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 		await page.keyboard.press( 'Backspace' );
+		await pressKeyWithModifier( 'shift', 'Tab' );
 		await page.keyboard.press( 'Backspace' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 

packages/e2e-tests/specs/editor/various/block-deletion.test.js

@@ -118,6 +118,9 @@ describe( 'block deletion -', () => {
 			await page.click(
 				'.wp-block[data-type="core/image"] .components-placeholder__label'
 			);
+			await page.click(
+				'.wp-block[data-type="core/image"] .components-placeholder__label'
+			);
 			await page.keyboard.press( 'Backspace' );
 
 			expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -196,6 +199,7 @@ describe( 'deleting all blocks', () => {
 
 		// Add and remove a block.
 		await insertBlock( 'Image' );
+		await pressKeyWithModifier( 'shift', 'Tab' );
 		await page.keyboard.press( 'Backspace' );
 
 		// Verify there is no selected block.