From 333e24658efa2f0ac48bcf09616f2721c023592e Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 2 Dec 2024 19:16:18 +0530 Subject: [PATCH 1/5] Add caption support to media-text block --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/media-text/block.json | 6 ++++ packages/block-library/src/media-text/edit.js | 10 +++++++ .../block-library/src/media-text/index.php | 7 +++++ .../src/media-text/media-container.js | 11 +++++++ packages/block-library/src/media-text/save.js | 29 ++++++++++++++----- 6 files changed, 57 insertions(+), 8 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 34db859f71d1de..4c414b84021adc 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..f5d2403cda610f 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -79,6 +79,13 @@ 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 ) { From 140c07a604b48b4e75a30675d760472fcd9a25c3 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 2 Dec 2024 19:26:43 +0530 Subject: [PATCH 2/5] Fix liniting errors --- packages/block-library/src/media-text/index.php | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index f5d2403cda610f..9a0e5a3568a5d8 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -79,13 +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( + $caption = get_the_post_thumbnail_caption(); + $image_tag .= sprintf( '
%1$s
', $caption ); - $content = preg_replace( '/()/', '$1' . $image_tag, From 10517c3a19727e1240c45b4462b2880c8992b575 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 3 Dec 2024 12:14:40 +0530 Subject: [PATCH 3/5] Regenerate fitxures for media-text block --- test/integration/fixtures/blocks/core__media-text.json | 3 ++- .../fixtures/blocks/core__media-text__image-alt-no-align.json | 3 ++- .../core__media-text__image-fill-no-focal-point-selected.json | 3 ++- ...core__media-text__image-fill-with-focal-point-selected.json | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) 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": [ { From b1dc92a2ae79dd0014bf0b41e44f95fb144b6403 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 3 Dec 2024 14:21:36 +0530 Subject: [PATCH 4/5] Add caption styles --- packages/block-library/src/media-text/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) 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 { From 73f525d9ca5f1e8291395776b062f15b73ee8a77 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 13 Dec 2024 16:47:50 +0530 Subject: [PATCH 5/5] Add caption to migrated with block transformations --- packages/block-library/src/media-text/transforms.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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, } ); },