diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7e031fa525e1ff..c6088a512107b2 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index 0c2cfc4a14995a..56aca99df87b76 100644 --- a/packages/block-library/src/media-text/block.json +++ b/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" ], diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index a946a499b26f21..9d99e02a5d07a1 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/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' &&
} diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index b65137b150ba53..9a0e5a3568a5d8 100644 --- a/packages/block-library/src/media-text/index.php +++ b/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 = ''; + $caption = get_the_post_thumbnail_caption(); + $image_tag .= sprintf( + '
%1$s
', + $caption + ); $content = preg_replace( '/()/', '$1' . $image_tag, diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js index 735aaf73b88aae..fae0a17d708da0 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/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 /> ) } + ); } diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js index 3e660d94e789ee..c6bfe614bc8164 100644 --- a/packages/block-library/src/media-text/save.js +++ b/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 ? ( - { + <> + { + { ! RichText.isEmpty( caption ) && ( + + ) } + ) : null; if ( href ) { diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index 727380a3759c6e..6dbca6d9c48ec8 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/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, , 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 { diff --git a/packages/block-library/src/media-text/transforms.js b/packages/block-library/src/media-text/transforms.js index b4a3328d4508bf..a7b3e39860f30a 100644 --- a/packages/block-library/src/media-text/transforms.js +++ b/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, } ); }, diff --git a/test/integration/fixtures/blocks/core__media-text.json b/test/integration/fixtures/blocks/core__media-text.json index dd86e7d9dd8dd0..fb48096db5d278 100644 --- a/test/integration/fixtures/blocks/core__media-text.json +++ b/test/integration/fixtures/blocks/core__media-text.json @@ -10,7 +10,8 @@ "mediaType": "image", "mediaWidth": 50, "isStackedOnMobile": true, - "useFeaturedImage": false + "useFeaturedImage": false, + "caption": "" }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json b/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json index e8a9ad70ae0132..239abb4888009d 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json +++ b/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": [ { diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json index bb57f08ad5cfa7..0c58ce8f7d4107 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json +++ b/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": [ { diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json index 0de71c867457ef..ccf18ceb8da55a 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json +++ b/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": [ {