Image block: try caption as inner block

packages/block-editor/src/components/default-block-appender/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
-import { getDefaultBlockName } from '@wordpress/blocks';
+import { getDefaultBlockName, createBlock } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
 
@@ -26,6 +26,8 @@ export function DefaultBlockAppender( {
 	showPrompt,
 	placeholder,
 	rootClientId,
+	tagName: TagName = 'p',
+	withInserter = true,
 } ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
@@ -34,30 +36,38 @@ export function DefaultBlockAppender( {
 	const value =
 		decodeEntities( placeholder ) || __( 'Type / to choose a block' );
 
+	const tagName = (
+		<TagName
+			tabIndex="0"
+			// Only necessary for `useCanvasClickRedirect` to consider it
+			// as a target. Ideally it should consider any tabbable target,
+			// but the inserter is rendered in place while it should be
+			// rendered in a popover, just like it does for an empty
+			// paragraph block.
+			contentEditable
+			suppressContentEditableWarning
+			// We want this element to be styled as a paragraph by themes.
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+			role="button"
+			aria-label={ __( 'Add block' ) }
+			// The wp-block className is important for editor styles.
+			className="wp-block block-editor-default-block-appender__content"
+			onFocus={ onAppend }
+		>
+			{ showPrompt ? value : ZWNBSP }
+		</TagName>
+	);
+
+	if ( ! withInserter ) {
+		return tagName;
+	}
+
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
 			className="block-editor-default-block-appender"
 		>
-			<p
-				tabIndex="0"
-				// Only necessary for `useCanvasClickRedirect` to consider it
-				// as a target. Ideally it should consider any tabbable target,
-				// but the inserter is rendered in place while it should be
-				// rendered in a popover, just like it does for an empty
-				// paragraph block.
-				contentEditable
-				suppressContentEditableWarning
-				// We want this element to be styled as a paragraph by themes.
-				// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-				role="button"
-				aria-label={ __( 'Add block' ) }
-				// The wp-block className is important for editor styles.
-				className="wp-block block-editor-default-block-appender__content"
-				onFocus={ onAppend }
-			>
-				{ showPrompt ? value : ZWNBSP }
-			</p>
+			{ tagName }
 			<Inserter
 				rootClientId={ rootClientId }
 				position="bottom right"
@@ -89,19 +99,24 @@ export default compose(
 			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
 			showPrompt: isEmpty,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
-			placeholder: bodyPlaceholder,
+			placeholder: ownProps.placeholder || bodyPlaceholder,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } = dispatch(
-			blockEditorStore
-		);
+		const { insertBlock, startTyping } = dispatch( blockEditorStore );
 
 		return {
 			onAppend() {
-				const { rootClientId } = ownProps;
+				const { rootClientId, blockName } = ownProps;
+
+				const defaultBlockName = blockName || getDefaultBlockName();
+				if ( ! defaultBlockName ) {
+					return;
+				}
+
+				const block = createBlock( defaultBlockName );
 
-				insertDefaultBlock( undefined, rootClientId );
+				insertBlock( block, undefined, rootClientId );
 				startTyping();
 			},
 		};

packages/block-editor/src/components/default-block-appender/style.scss

@@ -12,17 +12,17 @@
 		outline: 1px solid transparent;
 	}
 
-	.block-editor-default-block-appender__content {
-		// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
-		opacity: 0.62;
-	}
-
 	// Dropzone.
 	.components-drop-zone__content-icon {
 		display: none;
 	}
 }
 
+.block-editor-default-block-appender__content {
+	// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
+	opacity: 0.62;
+}
+
 // Empty / default block side inserter.
 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles.
 .block-editor-default-block-appender .block-editor-inserter { // Empty appender.

packages/block-editor/src/components/inner-blocks/default-block-appender.js

@@ -16,13 +16,8 @@ import BaseDefaultBlockAppender from '../default-block-appender';
 import withClientId from './with-client-id';
 import { store as blockEditorStore } from '../../store';
 
-export const DefaultBlockAppender = ( { clientId, lastBlockClientId } ) => {
-	return (
-		<BaseDefaultBlockAppender
-			rootClientId={ clientId }
-			lastBlockClientId={ lastBlockClientId }
-		/>
-	);
+export const DefaultBlockAppender = ( props ) => {
+	return <BaseDefaultBlockAppender { ...props } />;
 };
 
 export default compose( [

packages/block-library/src/caption/block.json

@@ -0,0 +1,23 @@
+{
+	"apiVersion": 2,
+	"name": "core/caption",
+	"title": "Caption",
+	"category": "design",
+	"parent": [
+		"core/image"
+	],
+	"description": "A caption for a figure.",
+	"textdomain": "default",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html",
+			"selector": "figcaption",
+			"default": ""
+		}
+	},
+	"supports": {
+		"reusable": false,
+		"html": false
+	}
+}

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichText, useBlockProps, store } from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+
+export default function CaptionEdit( {
+	attributes,
+	setAttributes,
+	onRemove,
+	clientId,
+} ) {
+	const { content } = attributes;
+	const blockProps = useBlockProps();
+	const { getBlockRootClientId, getBlockIndex } = useSelect( store );
+	const { insertBlocks } = useDispatch( store );
+
+	return (
+		<RichText
+			{ ...blockProps }
+			identifier="content"
+			tagName="figcaption"
+			value={ content }
+			onChange={ ( newContent ) =>
+				setAttributes( { content: newContent } )
+			}
+			placeholder={ __( 'Caption text' ) }
+			onRemove={ onRemove }
+			__unstableOnSplitAtEnd={ () => {
+				const parentClientId = getBlockRootClientId( clientId );
+				const rootClientId = getBlockRootClientId( parentClientId );
+				const index = getBlockIndex( parentClientId, rootClientId );
+				insertBlocks(
+					createBlock( 'core/paragraph' ),
+					index + 1,
+					rootClientId
+				);
+			} }
+		/>
+	);
+}

packages/block-library/src/caption/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { comment as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};

packages/block-library/src/caption/save.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	return (
+		<figcaption { ...useBlockProps.save() }>
+			<RichText.Content value={ attributes.content } />
+		</figcaption>
+	);
+}

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

@@ -2,11 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isEmpty, omit } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
 
 const blockAttributes = {
 	align: {
@@ -69,6 +71,93 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: blockAttributes,
+		migrate( attributes ) {
+			return [
+				omit( attributes, 'caption' ),
+				[
+					createBlock( 'core/caption', {
+						content: attributes.caption,
+						fontSize: 'large',
+					} ),
+				],
+			];
+		},
+		save( { attributes } ) {
+			const {
+				url,
+				alt,
+				caption,
+				align,
+				href,
+				rel,
+				linkClass,
+				width,
+				height,
+				id,
+				linkTarget,
+				sizeSlug,
+				title,
+			} = attributes;
+
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const classes = classnames( {
+				[ `align${ align }` ]: align,
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'is-resized': width || height,
+			} );
+
+			const image = (
+				<img
+					src={ url }
+					alt={ alt }
+					className={ id ? `wp-image-${ id }` : null }
+					width={ width }
+					height={ height }
+					title={ title }
+				/>
+			);
+
+			const figure = (
+				<>
+					{ href ? (
+						<a
+							className={ linkClass }
+							href={ href }
+							target={ linkTarget }
+							rel={ newRel }
+						>
+							{ image }
+						</a>
+					) : (
+						image
+					) }
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							value={ caption }
+						/>
+					) }
+				</>
+			);
+
+			if ( 'left' === align || 'right' === align || 'center' === align ) {
+				return (
+					<div { ...useBlockProps.save() }>
+						<figure className={ classes }>{ figure }</figure>
+					</div>
+				);
+			}
+
+			return (
+				<figure { ...useBlockProps.save( { className: classes } ) }>
+					{ figure }
+				</figure>
+			);
+		},
+	},
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {