Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce explicit caption positioning #12997

Open
melchoyce opened this issue Dec 18, 2018 · 19 comments
Open

Introduce explicit caption positioning #12997

melchoyce opened this issue Dec 18, 2018 · 19 comments
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Block] Image Affects the Image Block Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Task Issues or PRs that have been broken down into an individual action to take
Milestone

Comments

@melchoyce
Copy link
Contributor

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

@swissspidy swissspidy added [Block] Image Affects the Image Block [Block] Gallery Affects the Gallery Block - used to display groups of images Needs Design Needs design efforts. labels Dec 19, 2018
@noisysocks noisysocks added this to the WordPress 5.x milestone Jan 21, 2019
@paaljoachim
Copy link
Contributor

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
Copy link

joyously commented Jul 2, 2019

Captions on images are shown centered in Gutenberg,

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

@richtabor
Copy link
Member

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

captions

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

@paaljoachim
Copy link
Contributor

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
Copy link
Contributor Author

Yeah, exactly that @richtabor.

@melchoyce
Copy link
Contributor Author

Fun caption position from Snow Fall:
image

@mapk mapk added Needs Dev Ready for, and needs developer efforts and removed Needs Design Needs design efforts. labels Jul 19, 2019
@RogueSMG
Copy link

Facing similar issues!

@plittlefield
Copy link

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

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

Paully

@mark2090
Copy link

mark2090 commented Aug 19, 2020

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
Copy link
Member

mtias commented Feb 23, 2021

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

@paaljoachim
Copy link
Contributor

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

@kellychoffman
Copy link
Contributor

kellychoffman commented Mar 17, 2021

In the meantime, an updated design that includes an alignment option:
Screen Shot 2021-03-16 at 7 11 26 PM

@plittlefield
Copy link

plittlefield commented Mar 17, 2021 via email

@melchoyce
Copy link
Contributor Author

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
Copy link
Member

mtias commented Mar 17, 2021

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
Copy link
Contributor

kellychoffman commented Mar 17, 2021

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

Screen Shot 2021-03-17 at 5 03 49 PM

@paaljoachim
Copy link
Contributor

paaljoachim commented Mar 17, 2021

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.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label May 14, 2021
@paaljoachim
Copy link
Contributor

@Mamaduka George has made a PR here:
#31814

Yahhh!

@kraftner
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Block] Image Affects the Image Block Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

Successfully merging a pull request may close this issue.