Wp-calypso: Default Gutenberg In-Editor Styling Overridden by Older Theme Stylings in CSS (Theme styling given higher priority)

[scosgro]

Steps to reproduce

1. Starting at URL: Any WordPress.com site - Tested on multiple themes - Original report was Independent Publisher 2 - Site - Pages - Add Page
2. Add a Cover Block with an image for the background. Light image preferred
3. Add a paragraph of text on top of that.
4. Select a font color for the text from the predetermined boxes of colors
5. Preview/Publish the page. The chosen font color gets overridden, and appears white.

What I expected

The chosen font color to stay.

What happened instead

The predetermined colors are applied by adding a CSS selector to the paragraph. This selector is not in the correct cascading order though, so a different selector determining the font color is prioritized, overriding the chosen font color with something different.

Adding a Custom Color instead of choosing a predetermined one applies the HEX# to the paragraph inline, giving it priority over other CSS applied on the page.

Browser / OS version

All.

Screenshot / Video

A bit of a long .gif, but this shows the issue in detail:

https://cloudup.com/cxPymfC2MqO

Context / Source

#anecdote #reallife #user-report if applicable.

[zdenys]

Another case in 2336838-zen. User set a custom color for the Paragraph Block within Cover Block and that color is ignored and appears as white no matter what. By inspecting the CSS in Chrome this code is applied:

.wp-block-cover-image .wp-block-subhead, .wp-block-cover-image h1, .wp-block-cover-image h2, .wp-block-cover-image h3, .wp-block-cover-image h4, .wp-block-cover-image h5, .wp-block-cover-image h6, .wp-block-cover-image p, .wp-block-cover .wp-block-subhead, .wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover h4, .wp-block-cover h5, .wp-block-cover h6, .wp-block-cover p {
    color: inherit;
}

If removed, it fixes the issue. Confirmed and reproduced on different Themes.

_Link: https://cld.wthms.co/RCsvz8_

In addition to the above, the issue seems to be only when one of the default colors is picked. When a custom color is chosen, there is no issue since it gets added inline (thanks @mrfoxtalbot ). So I let the user know this workaround.

[scosgro]

Another case in 15379886-hc. User chose the light grey color in the editor, it was showing in the editor, but on the page itself, another color was taking over. Screenshot of CSS order:

[scosgro]

Another report in #17246190-hc with the theme Rosalie, but this was for font size.

User chose the "Large" option with 36px (default) in the Paragraph Block editor.

This one was in just a Paragraph Block. No Cover Block was required.

.gif here shows the lines overriding the styling created in Gutenberg (WordPress.com Block Editor):

Workaround is to change the option from Large to Custom, and add 37px as the font size instead (since Custom designs are styled inline).

[scosgro]

Also reported in #17088204-hc with the theme Christopher. This was also font size in a Paragraph Block (exact same issue as the comment directly above this one). No Cover Block required.

[noahtallen]

Is this an issue for newer themes (e.g. Maywood)? A lot of older themes don't include very robust support for Gutenberg :/

[scosgro]

Is this an issue for newer themes (e.g. Maywood)? A lot of older themes don't include very robust support for Gutenberg :/

It doesn't appear so. It only applies to older themes that I've seen in practice/in testing.