Multiple Themes: Cover Block with White Background defaults to White Font, text goes "missing"

[scosgro]

Steps to reproduce the behavior

1. Go to Site - Pages and create a page.
2. Add a Cover Block to it, and make the Cover Block have a white background.
3. Add some text on top of that Cover Block.

What I expected to happen

The font color to be black, or some other contrasting color that would be visible on the Cover Block.

What actually happened

The font color automatically defaults to white, and hidden/lost on the Cover Block, since it blends into the background.

Context

#user-report

Browser / OS version

All

Is this specific to the applied theme? Which one?

Multiple themes. Tested on Hever and Coutoire.

Could not replicate on Spearhead

Does this happen on simple or atomic sites or both?

Both

Is there any console output or error text?

Level of impact (Does it block purchases? Does it affect more than just one site?)

Affects all Cover Blocks on multiple themes.

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

[cathymcbride]

@ianstewart is this is theme issue? Since it doesn't repro on seedlet?

[ianstewart]

@jeffikus this one looks like a theme issue. Extends beyond the Varia child themes listed above to Twenty Twenty but not all themes, as noted with Seedlet above, or in Twenty Nineteen in my own test.

[alaczek]

I just encountered this in FSE with Blank Canvas Blocks and Myland Blocks.

This makes creating some of the Blank Canvas patterns as starter designs problematic because they use Cover block extensively (seems like this issue does not affect the Blank Canvas theme).

[andres-blanco]

On themes that work OK there are two guardrails for avoiding this behaviour.

1. By default the text color inside a block contrasts with the background
2. If you force the text color to be the same as the cover bg you get this message in the color settings for the paragraph:
   

On themes that don't work the default color of the fonts do not contrast.

Working:

• Blank Canvas
• Spearhead
• Seedlet

Not working:

• Twenty Twenty
• Hever
• Coutoire

[andres-blanco]

The themes that work have a css rule that applies directly to covers inner content, for example: seedlet. That rule makes the text color the same as the one set as foreground in Customizer > Color & Backgrounds.

For themes that don't work this rule does not exists, so it defaults to a rule that sets the color to #fff.

[sixhours]

@andres-blanco It sounds like the solution used for Blank Canvas, Seedlet, and Spearhead might work for other themes, too. I would test that solution with the themes that don't work and see if it breaks anything visually. If not, it may just be a matter of applying that solution to each theme.

For any of the Twenty- themes, we'd need to open a ticket in core, unless this problem is specific to WP.com (I don't think it is since the cover block is a core block, too).

[andres-blanco]

Great! I will check all themes in the showcase and apply fixes to each individually.

[andres-blanco]

Related issues:

• Cover Block in Zuki Overlay Color Theme Default Not Showing #3329
• Dyad 2: Contact Form text is white when placed inside Cover block. #1833

[andres-blanco]

This is a list of the current status of the "Recommended Themes" in the showcase.

THEME	Status
Blank Canvas	WORKING
Twenty Twenty-One	WORKING
Spearhead	WORKING
Seedlet	WORKING
Twenty Twenty	NOT WORKING
Barnsbury	NOT WORKING
Dalston	NOT WORKING
Mayland	NOT WORKING
Rivington	NOT WORKING
Maywood	NOT WORKING
Balasana	NOT WORKING
Shawburn	NOT WORKING
Alves	NOT WORKING
Exford	NOT WORKING
Rockfield	NOT WORKING
Stratford	NOT WORKING
Coutoire	NOT WORKING
Morden	NOT WORKING
Stow	NOT WORKING
Hever	NOT WORKING
Leven	NOT WORKING
Independent Publisher 2	NOT WORKING
Twenty Sixteen	NOT WORKING
Twenty Fifteen	NOT WORKING
Hemingway Rewritten	NOT WORKING
Ryu	NOT WORKING

[andres-blanco]

The PR #4086 (D63216-code) Fixes Varia and its child themes. The problem still persist in:

• Independent Publisher 2
• Twenty Twenty
• Twenty Sixteen
• Twenty Fifteen
• Hemingway Rewritten
• Ryu

I think all of these, except for Independent Publisher 2, are .org themes, so a different approach needs to be taken

[sixhours]

@andres-blanco Hemingway Rewritten, Independent Publisher 2, and Ryu are all Automattic themes as well. They might not be in the Github repository, though, so you'd only need to apply changes to the themes in SVN.

The Twenty-* themes are .org themes and probably need to be handled in core. :)

[kwight]

@andres-blanco Is anything else needed to close this out?

[andres-blanco]

There's still the .org fixes that I didn't get around to push forward since the process is more convoluted.

I will unassign myself since I don't think I will be able to tackle this in the current sprint.

[kwight]

The default themes have been left in the care of the Theme Team: pNEWy-e5R-p2

@andres-blanco will finish up Hemingway Rewritten, Independent Publisher 2, and Ryu to close out our pod work.

[alaczek]

This issue is also present in Baskerville 2 - maybe it could be squeezed in?
#3739

[andres-blanco]

Hemingway Rewritten, Ryu & Baskerville 2 fix: D63997-code

[kwight]

@andres-blanco I think you missed Independent Publisher 2 from the original list too. 👍

[andres-blanco]

@andres-blanco I think you missed Independent Publisher 2 from the original list too. 👍

@kwight I submitted a fix in this PR #4217. It's a separate PR/Changeset because the fix is different and IP2 is the only one that's also in the git repo

[andres-blanco]

This issue is also present in Baskerville 2 - maybe it could be squeezed in?
#3739

@alaczek I submitted a fix for Baskerville 2 because it was exhibiting the same bug as described in this issue. I don't know if this will fix the issue you referred to #3739

[andres-blanco]

The changes on Independent Publisher 2, Baskerville 2, Ryu and Hemingway Rewritten are now deployed. Now, all its left is to fix Twenty Twenty, Twenty Sixteen and Twenty Fifteen to cover our "Recommended" themes.

[scruffian]

This seems like a core issue

[scruffian]

Fix here: WordPress/gutenberg#33541

[scruffian]

This was closed by: WordPress/gutenberg#33541