Introduce explicit caption positioning

[melchoyce]

Is your feature request related to a problem? Please describe.
Captions on images are shown centered in Gutenberg, but theme styles can override this. There's no way to explicitly set an alignment onto the caption, without writing additional CSS to override your theme.

Describe the solution you'd like
Introduce a text alignment setting to captions, and have any explicit change in alignment you make override theme styles.

Describe alternatives you've considered
More specific center styles on the Gutenberg block itself.

See also

• https://wordpress.org/support/topic/image-caption-not-centering/
• https://wordpress.org/support/topic/image-caption-poorly-placed-on-page-gutenberg-annoyance/

[paaljoachim]

Hey Mel

I added on to this (closed) issue: #534
As I believe that additional options could be added to the styling caption dropdown.

[joyously]

Captions on images are shown centered in Gutenberg,

That style should be in the styles that are optional, not default.

[richtabor]

@melchoyce What do you think of adding the AlignmentToolbar to the InlineToolbar, like this exploration in #15554?

Or this, with the AlignmentToolbar on the left, as it is in the toolbar of the Paragraph block?

[paaljoachim]

It would be great to add alignment directly to the captions area, as I have noticed that the caption can be off center on various images that I add. Adding the alignment inside the captions area would let the user decide where the caption should be seen.

[melchoyce]

Yeah, exactly that @richtabor.

[melchoyce]

Fun caption position from Snow Fall:

[RogueSMG]

Facing similar issues!

[plittlefield]

Yeah, still not fixed. I've got around it with some CSS...

.wp-block-image figcaption {
	text-align: center;
}

Paully

[mark2090]

Yeah, still not fixed. I've got around it with some CSS...

.wp-block-image figcaption {
	text-align: center;
}

Paully

The CSS you gave will cause all figcaptions of images to center. If the image is always centered on the website, then that is fine, but if you want to be specific to the page and not make it global, use the "Advanced" settings in the right column of the block editor for that image block and add a specific CSS class name (at the bottom of the column). This way, you can use that class name only when you want the caption to be centered, leaving the rest per the default of left align.

For the Custom CSS, you do not need to add the tag name (figcaption) as part of the selector. It works fine with just the class name you assign it.

Example:

_Right Column Image Block settings_
"Additional CSS class(es)" >   captionAlign

_Custom CSS (or Additional CSS)_
.captionAlign { text-align: center; }

Still not Fixed??
With no disrespect, I say the following with "best interests of the community" in mind including all users of WordPress.

This figcaption text centering issue, is the kind of thing that is fundamental, basic and not something that is extra in any sense of the term.
I got to this bug report from a WordPress.org Support post that is 18 months old, which makes that about January 2019. There have been several WordPress updates since and this bug is still not fixed. I am currently working a website using the block editor and had to use Custom CSS to temporarily fix this issue.

I am sure, if money depended on this, the bug would have been fixed within a month after it was first reported, that is what plugin and theme developers do.

[mtias]

This could use an updated design with the latest set of tools for clarity :) cc @kellychoffman

[paaljoachim]

I am wondering if we should initially at Image Caption alignment into the Global Styles panel as suggested in this issue:
#27480

[kellychoffman]

In the meantime, an updated design that includes an alignment option:

[plittlefield]

That, is superb.

[melchoyce]

I wonder if we should be using the text alignment icons instead of the block alignment ones? Since the block alignments would have wide/full instead of left/right.

[mtias]

Yes, I think it should be text alignment. I'm unsure if it should go on the right or the left, but if on the right it should be after the chevron (which indicates extra rich text formatting tools so it's tied to bold, italics, link).

[kellychoffman]

Ha! I feel dumb. Yes, 100% we should use text alignment.

[paaljoachim]

Just thought I would mention it....
A change we need to make is having the caption align to the image, and not the boundary box surrounding the image.

[paaljoachim]

@Mamaduka George has made a PR here:
#31814

Yahhh!

[kraftner]

#31814 from the previous comment has been closed in favor of #31823