Why are Gutenberg's default styles so opinionated on appearance?

[benlk]

This is kind of an issue about selector specificity, and could be considered a sub-issue of #12299

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 /wp-includes/css/dist/block-library/style.min.css?ver=5.2-RC1 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?

Potential resolutions:

• Can Gutenberg remove the opinionated-design styles from the default block stylesheet?
• Can Gutenberg separate for-appearances styles from for-layout styles, so that themes can opt into them separately?
• Can alignment be removed from this stylesheet, and instead have Gutenberg implement explicit alignment controls a la Introduce explicit caption positioning #12997 ?

[talldan]

Hi @benlk, Thanks for the report. I've looked into the issues you mentioned.

Can Gutenberg separate for-appearances styles from for-layout styles, so that themes can opt into them separately?

That is currently the case. The more opinionated styles are defined in a separate theme.scss file for each block. To opt in to these styles, themes need to call the add_theme_support( 'wp-block-styles' ); function (as described here: https://developer.wordpress.org/block-editor/developers/themes/theme-support/#default-block-styles).

Unfortunately the caption styles for images were only recently moved over to the theme.scss file (#14366). WordPress 5.2 shipped with them as part of the default block styles. In a future release they should be part of the opt-in styles.

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)

In the code snippet #555d66 is mentioned, which meets AA standards. I did a search for #7d8185 but couldn't find it in the codebase, so it might be something that's already fixed. If you have any further info that'd be appreciated as it would be something we'd want to fix.

Can alignment be removed from this stylesheet, and instead have Gutenberg implement explicit alignment controls a la #12997 ?

That should be the case if that issue is solved, it doesn't look like there's anyone working on this at the moment. Volunteers are very welcome 😄.

I think I answered all the questions, and the issues seem to have been solved as far as I can tell, so I'll close the issue for now. It can always be reopened if on further discussion it turns out there is are outstanding tasks.

Also marking as a duplicate of #12299 which seems to have the same kind of discussion.

[benlk]

I was running just WordPress 5.2, so yeah, these have probably all been fixed in the latest version of the Gutenberg plugin by now.

[realstephenzhao]

I was running just WordPress 5.2, so yeah, these have probably all been fixed in the latest version of the Gutenberg plugin by now.

No, still not fixed in WordPress 5.4 till now.

[mahnunchik]

It may be related #21658

[cramdesign]

I am curious about the default styles as well. Several items use the root pseudo-selector for things like font sizes and a bunch of colors. This seems like an unnecessary level of specificity. I don't feel like I should need to try to outweigh default styles.

Also, at 48k or so, while not exactly a large file by today's standards, I think this stylesheet should be as light as possible. It bothers me that there is so many one-off classes like 200 lines of social logo colors included. Just make them all inherit the font color. If theme developers want specific colors, let them do that.

Then there is fixed pixel font sizing instead of relative. That could be better.

[skorasaurus]

@cramdesign

Then there is fixed pixel font sizing instead of relative. That could be better.

Agreed, there is a long standing issue for that at #11671