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

Styling for captions in images #534

Closed
mtias opened this issue Apr 28, 2017 · 3 comments · Fixed by #580
Closed

Styling for captions in images #534

mtias opened this issue Apr 28, 2017 · 3 comments · Fixed by #580
Assignees
Labels
[Feature] Blocks Overall functionality of blocks

Comments

@mtias
Copy link
Member

mtias commented Apr 28, 2017

The design shows them centered and with better padding.

@mtias mtias added [Feature] Blocks Overall functionality of blocks Design labels Apr 28, 2017
@mtias mtias added this to the Prototype Parity milestone Apr 28, 2017
@paaljoachim
Copy link
Contributor

paaljoachim commented Apr 22, 2019

Can we please reopen this issue?
As the following is about caption styling.

There is now a styling drop down option in the image captions.
Screen Shot 2019-04-22 at 10 29 42

It would be nice to also see: alignment, underline, color options and font size added to the drop down list.
@ellatrix

@benlk
Copy link
Contributor

benlk commented May 10, 2019

This is kind of an issue about selector specificity: Why does the default block-styles stylesheet make figcaptions centered? In 5.1RC2 the selector for this is more opinionated than I expected it to be:

.wp-block-image figcaption {
    margin-top: .5em;
    margin-bottom: 1em;
    color: #555d66;
    text-align: center;
    font-size: 13px;
}

I get that the layout styles need a certain specificity:

.wp-block-image .aligncenter>figcaption,
.wp-block-image .alignleft>figcaption,
.wp-block-image .alignright>figcaption,
.wp-block-image.is-resized>figcaption {
    display: table-caption;
    caption-side: bottom;

But why does Gutenberg's default stylesheet ship with rules that:

  • center text
  • set the color to a light tone that doesn't meet WCAG AA or AAA for contrast on a white background (#7d8185 on white is 3.92, AA requests 4.5 and AAA 7.0)
  • muck with line-height
  • change the font size?

Can these opinionated styles be removed?

Or can Gutenberg separate for-appearances styles from for-layout styles?

@benlk
Copy link
Contributor

benlk commented May 10, 2019

nevermind, gonna make that an separate issue rather than reopening this one: #15574

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants