Gallery: Add a deprecation for captions in the gallery block

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

@@ -127,6 +127,174 @@ export function getImageBlock( image, sizeSlug, linkTo ) {
 	} );
 }
 
+const v7 = {
+	attributes: {
+		images: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: '.blocks-gallery-item',
+			query: {
+				url: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'src',
+				},
+				fullUrl: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-full-url',
+				},
+				link: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-link',
+				},
+				alt: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'alt',
+					default: '',
+				},
+				id: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-id',
+				},
+				caption: {
+					type: 'string',
+					source: 'html',
+					selector: '.blocks-gallery-item__caption',
+				},
+			},
+		},
+		ids: {
+			type: 'array',
+			items: {
+				type: 'number',
+			},
+			default: [],
+		},
+		shortCodeTransforms: {
+			type: 'array',
+			default: [],
+			items: {
+				type: 'object',
+			},
+		},
+		columns: {
+			type: 'number',
+			minimum: 1,
+			maximum: 8,
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: '.blocks-gallery-caption',
+		},
+		imageCrop: {
+			type: 'boolean',
+			default: true,
+		},
+		fixedHeight: {
+			type: 'boolean',
+			default: true,
+		},
+		linkTarget: {
+			type: 'string',
+		},
+		linkTo: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+			default: 'large',
+		},
+		allowResize: {
+			type: 'boolean',
+			default: false,
+		},
+	},
+	save( { attributes } ) {
+		const {
+			images,
+			columns = defaultColumnsNumberV1( attributes ),
+			imageCrop,
+			caption,
+			linkTo,
+		} = attributes;
+		const className = `columns-${ columns } ${
+			imageCrop ? 'is-cropped' : ''
+		}`;
+
+		return (
+			<figure { ...useBlockProps.save( { className } ) }>
+				<ul className="blocks-gallery-grid">
+					{ images.map( ( image ) => {
+						let href;
+
+						switch ( linkTo ) {
+							case LINK_DESTINATION_MEDIA:
+								href = image.fullUrl || image.url;
+								break;
+							case LINK_DESTINATION_ATTACHMENT:
+								href = image.link;
+								break;
+						}
+
+						const img = (
+							<img
+								src={ image.url }
+								alt={ image.alt }
+								data-id={ image.id }
+								data-full-url={ image.fullUrl }
+								data-link={ image.link }
+								className={
+									image.id ? `wp-image-${ image.id }` : null
+								}
+							/>
+						);
+
+						return (
+							<li
+								key={ image.id || image.url }
+								className="blocks-gallery-item"
+							>
+								<figure>
+									{ href ? (
+										<a href={ href }>{ img }</a>
+									) : (
+										img
+									) }
+									{ ! RichText.isEmpty( image.caption ) && (
+										<RichText.Content
+											tagName="figcaption"
+											className="blocks-gallery-item"
+											value={ image.caption }
+										/>
+									) }
+								</figure>
+							</li>
+						);
+					} ) }
+				</ul>
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						tagName="figcaption"
+						className="blocks-gallery-caption"
+						value={ caption }
+					/>
+				) }
+			</figure>
+		);
+	},
+};
+
 const v6 = {
 	attributes: {
 		images: {
@@ -984,4 +1152,4 @@ const v1 = {
 	},
 };
 
-export default [ v6, v5, v4, v3, v2, v1 ];
+export default [ v7, v6, v5, v4, v3, v2, v1 ];