Media & Text: Add caption support

docs/reference-guides/core-blocks.md

@@ -445,7 +445,7 @@ Set media and words side-by-side for a richer layout. ([Source](https://github.c
 -	**Name:** core/media-text
 -	**Category:** media
 -	**Supports:** align (full, wide), anchor, color (background, gradients, heading, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** align, allowedBlocks, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, useFeaturedImage, verticalAlignment
+-	**Attributes:** align, allowedBlocks, caption, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, useFeaturedImage, verticalAlignment
 
 ## Unsupported
 

packages/block-library/src/media-text/block.json

@@ -96,6 +96,12 @@
 		"useFeaturedImage": {
 			"type": "boolean",
 			"default": false
+		},
+		"caption": {
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "figcaption",
+			"role": "content"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

packages/block-library/src/media-text/edit.js

@@ -76,6 +76,7 @@ function attributesFromMedia( {
 				mediaLink: undefined,
 				href: undefined,
 				focalPoint: undefined,
+				caption: undefined,
 			} );
 			return;
 		}
@@ -128,6 +129,7 @@ function attributesFromMedia( {
 			mediaLink: media.link || undefined,
 			href: newHref,
 			focalPoint: undefined,
+			caption: media.caption,
 		} );
 	};
 }
@@ -156,6 +158,7 @@ function MediaTextEdit( {
 		verticalAlignment,
 		allowedBlocks,
 		useFeaturedImage,
+		caption,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
@@ -179,6 +182,9 @@ function MediaTextEdit( {
 	const featuredImageAlt = useFeaturedImage
 		? featuredImageMedia?.alt_text
 		: '';
+	const featuredImageCaption = useFeaturedImage
+		? featuredImageMedia?.caption?.rendered
+		: '';
 
 	const toggleUseFeaturedImage = () => {
 		setAttributes( {
@@ -483,6 +489,7 @@ function MediaTextEdit( {
 					refMedia={ refMedia }
 					enableResize={ blockEditingMode === 'default' }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
+					setAttributes={ setAttributes }
 					{ ...{
 						focalPoint,
 						imageFill,
@@ -497,6 +504,9 @@ function MediaTextEdit( {
 						useFeaturedImage,
 						featuredImageURL,
 						featuredImageAlt,
+						caption: useFeaturedImage
+							? featuredImageCaption
+							: caption,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }

packages/block-library/src/media-text/index.php

@@ -79,6 +79,11 @@ function render_block_core_media_text( $attributes, $content ) {
 	// in order to display the featured image.
 	$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
 	$image_tag       = '<img class="wp-block-media-text__featured_image">';
+	$caption         = get_the_post_thumbnail_caption();
+	$image_tag      .= sprintf(
+		'<figcaption class="wp-element-caption">%1$s</figcaption>',
+		$caption
+	);
 	$content         = preg_replace(
 		'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
 		'$1' . $image_tag,

packages/block-library/src/media-text/media-container.js

@@ -26,6 +26,7 @@ import { media as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import { imageFillStyles } from './image-fill';
+import { Caption } from '../utils/caption';
 
 /**
  * Constants
@@ -122,6 +123,8 @@ function MediaContainer( props, ref ) {
 		featuredImageURL,
 		featuredImageAlt,
 		refMedia,
+		caption,
+		setAttributes,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -211,6 +214,14 @@ function MediaContainer( props, ref ) {
 						withIllustration
 					/>
 				) }
+				<Caption
+					attributes={ { caption } }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					label={ __( 'Audio caption text' ) }
+					showToolbarButton={ isSelected }
+					readOnly={ useFeaturedImage }
+				/>
 			</ResizableBoxContainer>
 		);
 	}

packages/block-library/src/media-text/save.js

@@ -6,7 +6,12 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useInnerBlocksProps,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -33,6 +38,7 @@ export default function save( { attributes } ) {
 		href,
 		linkTarget,
 		rel,
+		caption,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 	const newRel = ! rel ? undefined : rel;
@@ -47,12 +53,21 @@ export default function save( { attributes } ) {
 		: {};
 
 	let image = mediaUrl ? (
-		<img
-			src={ mediaUrl }
-			alt={ mediaAlt }
-			className={ imageClasses || null }
-			style={ positionStyles }
-		/>
+		<>
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+				style={ positionStyles }
+			/>
+			{ ! RichText.isEmpty( caption ) && (
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
+			) }
+		</>
 	) : null;
 
 	if ( href ) {

packages/block-library/src/media-text/style.scss

@@ -12,6 +12,13 @@
 	&.has-media-on-the-right {
 		grid-template-columns: 1fr 50%;
 	}
+
+	// Supply caption styles to Media-Text blocks, even if the theme hasn't opted in.
+	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
+	:where(figcaption) {
+		@include caption-style();
+	}
 }
 
 .wp-block-media-text.is-vertically-aligned-top {

packages/block-library/src/media-text/transforms.js

@@ -8,13 +8,14 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
-			transform: ( { alt, url, id, anchor } ) =>
+			transform: ( { alt, url, id, anchor, caption } ) =>
 				createBlock( 'core/media-text', {
 					mediaAlt: alt,
 					mediaId: id,
 					mediaUrl: url,
 					mediaType: 'image',
 					anchor,
+					caption,
 				} ),
 		},
 		{
@@ -104,11 +105,12 @@ const transforms = {
 			isMatch: ( { mediaType, mediaUrl } ) => {
 				return ! mediaUrl || mediaType === 'image';
 			},
-			transform: ( { mediaAlt, mediaId, mediaUrl, anchor } ) => {
+			transform: ( { mediaAlt, mediaId, mediaUrl, caption, anchor } ) => {
 				return createBlock( 'core/image', {
 					alt: mediaAlt,
 					id: mediaId,
 					url: mediaUrl,
+					caption,
 					anchor,
 				} );
 			},

test/integration/fixtures/blocks/core__media-text.json

@@ -10,7 +10,8 @@
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
-			"useFeaturedImage": false
+			"useFeaturedImage": false,
+			"caption": ""
 		},
 		"innerBlocks": [
 			{

test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json

@@ -10,7 +10,8 @@
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
-			"useFeaturedImage": false
+			"useFeaturedImage": false,
+			"caption": ""
 		},
 		"innerBlocks": [
 			{

test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json

@@ -11,7 +11,8 @@
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
 			"imageFill": true,
-			"useFeaturedImage": false
+			"useFeaturedImage": false,
+			"caption": ""
 		},
 		"innerBlocks": [
 			{

test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json

@@ -15,7 +15,8 @@
 				"x": 0.84,
 				"y": 0.84
 			},
-			"useFeaturedImage": false
+			"useFeaturedImage": false,
+			"caption": ""
 		},
 		"innerBlocks": [
 			{