Missing text-align for image caption

[strarsis]

Describe the bug
Image captions have no text-alignment option in Gutenberg editor.

To reproduce
Steps to reproduce the behavior:

1. Insert image block.
2. Add some image block caption.
   Notice that the image block caption has no text-alignment options.
   Only the image block itself has alignment options.

Expected behavior
A text-align option for the image block caption.

Additional context
Maybe use image block caption field a fuller editor with more text-related options?
Or extend from a paragraph block/field?

[phpbits]

@strarsis You can use EditorsKit plugin which has text alignment option for captions. Here's the preview on how the Caption Alignment works :

[paaljoachim]

Hi

This issue can be broader then only the image caption. I am thinking of creating a new issue, but since we have this issue I can instead add to it.

Various blocks that use captions:

Image Block:

Embed Block:

Gallery Block (individual gallery image captions):

Gallery Block - gallery caption:

The above linked PR @epiqueras worked on was closed. See the discussion in the closed PR.

Bottom line: RichText needs to support alignment caption.

We basically need the caption alignment added to the caption toolbar.
@ellatrix could you give some advice on this? Thank you.

[ellatrix]

The issues with the toolbar has always been there (maybe there's even an issue for it). We've always forced it to centre. I think for these inline toolbars we'll have to detect text alignment and position the popover based on that.

[paaljoachim]

I came across this issue:
"Introduce explicit caption positioning "
#12997

[joyously]

My opinion: there should not be options to align or italic or color or anything the captions on various blocks, because the theme is styling them universally. There is some color style on some captions already, which should be removed, because they override the theme styles.

[strarsis]

@joyously: What if the theme designer wants to have two different kinds of caption alignments, left and center? In that case multiple block styles per block should be supported, so not only the general style of image (and its caption) but also its additional caption alignment context is selectable for the user.

[joyously]

What if the theme designer wants to have two different kinds of caption alignments, left and center? In that case multiple block styles per block should be supported,

I don't agree that the user should select it per block or even per page. If the theme designer wants to provide choices, the theme designer should put a theme option in the Customizer. Giving the user too many options as a low level means that they can so easily make their site an inconsistent mess, and changing their mind involves re-editing each page. I say let the theme do its job of keeping things consistent and don't put too many options into the editor. (and that goes for Full Site Editing times 2)

[strarsis]

@joyously: I agree. I always cringe when I see a page builder with padding/margin options for each individual element. Not only does this mean that the user has to set it up, it also means that these settings have to be consistently applied among all the pages.

[rogercoathup]

+1 for having this control at the caption level.

Our client uses two alignments for captions -- left if it describes the photo, right if it's accreditation for the photographer. They need to be able to choose this on a per image basis.

[strarsis]

@rogercoathup: Using image block styles wouldn't be a solution because only the caption text is aligned differently, having two separate block styles for each text alignment unnecessarily overcomplicates.

[rogercoathup]

@strarsis -- you are mis-reading my comment.

I don't want them at the block level. I want the controls at the caption level.

[strarsis]

@rogercoathup: Misunderstanding, I meant the same :).
The caption alignment shouldn't be controllable only by block styles, but separately from the block style.

[sarahannnicholson]

+1 for adding alignment to the caption toolbar

[nonobio]

Hello,

I added this css code found somewhere else, it works for me:

.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.is-resized>figcaption { text-align: center; }

I miss also style since gutenberg.
With classic editor, caption text was centered, with a smaller font and a grey background, so it was well differentiable from the normal text.

Now, with the new gutenberg wordpress editor, caption text is the same font than normal text, not aligned and with no background (i only succeeded to align the text with the CSS custom above).

Just to be sure: is it the same for everybody (miss caption alignement and style) or does it depend of the theme used ?

[paaljoachim]

Hi @nonobio

I just tested with the Theme Twenty Twenty One. Which can be downloaded from here. https://github.com/WordPress/twentytwentyone

I added an image with a caption to see where the caption is located by default.
On Large or Full Size it aligned to the bottom center.

Upon Medium or Thumbnail it did not. I added an issue for it on the Github repo for the theme.
WordPress/twentytwentyone#890

[nonobio]

Hi :)

Thanks for the test, i decovered that i could also test myself with "preview" theme ! :)

So i did : you're right : caption is aligned to the center without custom CSS with Twenty Twenty theme.

And the font is also a little different compared to the body text.

But no grey background but it is'nt a big deal.

I will contact my theme support or try to find css custom to apply a different font to caption text.

If you have css code or plugin about customizing captions text it will help.

Thanks a lot :)

[nonobio]

Hi :)

I found a solution to align and styling my captions with gutenberg editor like it was on classic editor (on my theme).
I analyzed font and color of my old captions (with chrome add-on Font Finder) then i applied this CSS code:

.wp-block-image figcaption { color: #888888; background-color: #f4f4f4; font-size: 13px; text-align: start; font-weight: 600; margin: 0px; padding: 10px }

I don't know anything in coding, i just tried and checked with Customizer\CSS to find the good solution.

In fact, i was wrong : my old captions with classic editor wasn't aligned to center.

All seems to work but tell me if you see something wrong with my code.

Thanks :)

[ellatrix]

IMO there should not be an option for this for individual captions. Maybe a global style option?

[paaljoachim]

I do think some images one might want the Image caption on the right, most in the center and others to the left. To create some design. But one could perhaps also have a default global style option.

[paaljoachim]

Associated:
Image caption styles global styles support
#27480