Fontaine: Default Header template plate is applying reversed colors

[tanjoymor]

Quick summary

When you edit the default header template part, the text color is different than it displays in the template. And if you change the text and background colors they display as reversed in the template and are opposite when directly editing the Template Part.

Steps to reproduce

1. Activate Fontaine on a Dotcom Simple site with any paid plan
2. Edit the Front Page template
3. Note the color of the text in the default header
4. Select the Header Template Part and click edit
5. Note that the color of the text is different
6. Change the color of the text and the background on the Group block
7. Go back to the template
8. Note that the colors are reversed

A clear and concise description of what you expected to happen.

I expected the colors in the template and the template part to match the colors assigned to the pieces.

What actually happened

The colors match the settings in the template part editor, but are reversed and/or different in the template.

CleanShot.2024-11-09.at.14.30.31.mp4

Impact

Some (< 50%)

Available workarounds?

Yes, difficult to implement

If the above answer is "Yes...", outline the workaround.

If you set up the colors to be the opposite of what you want, it can work. This is not easy to explain in a way users will understand and not many users are going to figure this out on their own.

Platform (Simple and/or Atomic)

Simple

Logs or notes

I have only tested this on Dotcom Simple sites.

[sudeepbaral]

This issue was discovered here:

• 9016335-zen

[github-actions]

Support References

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

• 9016335-zen

[Robertght]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I managed to replicate this on self-hosted sites too.

📌 ACTIONS

• Triaged
• Updated the title
• Leaving priority to Normal

[alaczek]

This has to do with the special treatment of the header elements (they change color when they overlap other elements). There's a special class add to achieve this effect - https://github.com/Automattic/themes/blob/trunk/fontaine/style.css#L75

The problem is this class is added to the parent group block that wraps the header in the homepage template. I think the issue could be solved by moving the class to the parent group block in the header template part.

I expected the colors in the template and the template part to match the colors assigned to the pieces.

This won't be possible because of the special effect added via CSS class. While unintuitive, this is expected:

If having this effect isn't important to the customer we could advise them to remove the CSS class from the header and that should fix it.