Theme Layover: Title Block Invisible In Editor

[mxhassani]

Quick summary

When creating a post or a page, the title (and its placeholder) in the title block isn't visible.

When selecting it:

This is caused by the fact it's using the same color as the background color as the editor.

Steps to reproduce

1. Activate Layover
2. Create a new post
   The usual location of the title is clickable and editable, but not visible.
   Also replicable on the demo site.

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Minor

What other impact(s) does this issue have?

No revenue impact

If a workaround is available, please outline it here.

Enabling Show template addresses it.

The source of the issue is this CSS code:
color: var(--wp--preset--color--foreground); that's inline on the editor.
It can be changed to color: var(--wp--preset--color--secondary); for a quick fix.

Platform (Simple and/or Atomic)

Simple, Atomic

[mxhassani]

9353054-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9353054-zen

[fushar]

@iamtakashi / @henriqueiamarino could you look into this issue? I see this is a recently launched theme. Thanks!

[iamtakashi]

@henriqueiamarino I think all the headings and the links should use background and override the colour of them to foreground where we need in the templates. Are you happy to make a PR?

[henriqueiamarino]

Thanks @fushar and @iamtakashi. This one is tricky because it has a dark Home and a light Single template. Anyway, I'll think about it and find a solution.

[supernovia]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

📌 ACTIONS

• Triaged

@henriqueiamarino since only the post/page editor are affected and the template editor doesn't have the same problem, would it make sense to default to dark titles that are overridden on dark layouts?