Gutenberg: Image caption in Media & Text block

[Fturttle]

I have not been able to find a way to add an image caption in the ‘Media & Text’ block.
I looked at it through the code editor and there’s no <figcaption></figcaption> tags.
Yes, my image has a caption set in the media library.
If I add

tag manually it returns an “HTML Error” and messes up everything.
Can anyone explain this?

[youknowriad]

I think this block was not meant to be used with a captioned image, if you'd like to do so, you can use the columns block and have an image in one column and text in the other.

Resizing columns is tracked separately.

Thanks.

[Fturttle]

I understand. Still think it's a shame to not have at least the option available. I will try the column block.
Thank you for your help, @youknowriad

[youknowriad]

Noted @Fturttle thanks for the feedback. I'll keep it in my mind and if we noticed that it's something people are asking for we'll reconsider.

[bwoester]

I'd like to have the option as well. :)

[fosterTerence]

I would like the option to show image caption as well

[Taruks]

Hi, because of copyright laws in Europe, especially Germany it is necessary to mention the creator e.g. of a picture directly at the picture. So it's not the question if people ask for it, it's necessary by law and would greatly facilitate the work of the webdesigner having it in all Gutenberg image-blocks.

And generally - thanks for your great development work!

[cr0ybot]

I'd like to add my support for this request.

I would expect anywhere that an image can be embedded that it would act similarly to the standard image block, which is to say that it would include an optional caption.

WordPress core blocks should be as flexible as possible, and also act predictably. If there's an option to add an image, I assume the image interface would be similar to, if not actually, the core image block. Are there several different yet similar image components in use under the hood?

[AlternNO]

I need this too.

[woodz-]

Required! Why are you closing this?
It's not only the image caption. It's also the percentual resizing which is missing. The image gets cropped instead. On lower resolutions this will cut heads and feet.
I would expect full responsive images like the bootstrap's .img-fluid class.

[jennsuzhoy]

I would like to see captions added to the Media & Text block as well. As stated above, images should have the same options anywhere they are embedded for consistency.

[youknowriad]

I'm reopening this issue for potential consideration. It's still unclear to me how this would work... HTML wise it might not make sense because of the nesting... But let's see.

[clarklab]

Another vote for this option. I've got a client that very specifically needs in-page photo credits for every photograph. They've got a bunch of the Media & Text blocks and now I need to figure out a way to get a little text caption underneath.

Would love if it worked a bit more like a regular image object.

[clo123]

I'd like this feature as well :)

[timnolte]

I was unpleasantly informed my our theme developer and QA that this doesn't exist. The solution to use columns is a workaround yes, but it seems to me it pretty much makes this block value questionable altogether.

[SkipperPit]

I would like the option to show image caption as well

[alinekeller]

I would like this option as well. As it was previously mentioned, this feature is highly needed in order to add copyright information to the pictures.

[ToniSHernandez]

We are having this very issue right now where we need a caption below an image. We have specific styles applied to the block so when attempting to change the block type, it creates a style issue there. Adding a caption directly below the image would allow a clickable link to open the image in a new tab.

[danwpc]

Noted @Fturttle thanks for the feedback. I'll keep it in my mind and if we noticed that it's something people are asking for we'll reconsider.

There are a few things that make mimicking media + text by using columns clunky:

1. Once columns are set, resizing the image by dragging does not resize the adjacent column as it does in Media + Text
2. Vertical alignment is easy in Media + Text, whereas it has to be done by adding a class and manipulating css when using column + text
3. Same with text sizing within columns. Text sizing is unpredictable when selecting a block and using the Gutenberg text resize controls inside columns.

Altogether, this adds up to a very time-consuming process. All this could be avoided by adding captioning to Media + Text blocks.

[samrhein]

Hi folks, you can just filter the output of the media & text block to add an image caption. The following snippet displays the image's caption text which is editable in the Media Library. I haven't tested the following code extensively, but it's working for me in Wordpress version 5.5.1. Add this code to your theme's functions.php file:

//filter Media & Text block output to add image caption
function media_block_caption( $block_content, $block ) {
    if ( $block['blockName'] === 'core/media-text' ) {
        $mediaId = $block['attrs']['mediaId'];
        if($mediaId){
            $image = get_post($mediaId);
            $image_caption = $image->post_excerpt;
            if($image_caption){
                $content = str_replace('</figure>', '<figcaption>' . $image_caption . '</figcaption></figure>', $block_content);
                return $content;
            }
        }
    }
    return $block_content;
}

add_filter( 'render_block', 'media_block_caption', 10, 2 );

[fosterTerence]

Hi Samrhein
I tested your solution and it works well. It will show the caption from the image caption field in the front-end and not in the admin.
Still I suggest Wordpress to provide the admin with an option to show the caption per image-text block and to display it in the admin also.

[Taruks]

Thank you samrhein! It works.
I will use it until this handsome function finds its way to Gutenberg Core.