Quadrat and its child themes: Header triangle image looks different in the editor vs frontend

[zdenys]

Quick summary

The header triangle image of the Quadrat theme looks different in the editor vs frontend. It's confusing and not clear how to customize it.

Steps to reproduce

1. Activate a Quadrat (or any of its child themes like Quadrat Green etc.)
2. Open the Site Editor
3. Look at the header and notice the cut-off trapezoid
4. Visit the site frontend and look at the header to see a much bigger triangle (not cut-off)

What you expected to happen

See the same view in the editor and in the frontend.

What actually happened

Editor view of the header hard-coded triangle is inaccurate and confusing compared to the frontend.

Context

Team testing

Simple, Atomic or both?

Simple

Theme-specific issue?

Quadrat and its child themes

Browser, operating system and other notes

macOS Monterrey 12.1 with Chrome 97

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[edwinho89]

I experienced the same thing in editor, as well as not able to remove the triangle background other than switching to different themes.

[mrfoxtalbot]

Another case in 8212860-zd-a8c

[github-actions[bot]]

Support References

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

• [ ] 8212860-zen
• [ ] 8535709-zen

[mrfoxtalbot]

I have dropped a ping in p1716205982755669-slack-C029FM1EH

[alaczek]

I looked into this issue briefly, and I no longer can see the full shape in either editor or on the front end (see the theme demo). This is quite an old theme at this point and editor has changed a lot since then. After some digging I was able to fix the front end view. To fix it, you need to:

1. Go to Appearance > Editor > Patterns > Header and pick the header pattern that's being used on the site (there are a few header patterns to choose from)
2. Open list view and click on the parent group block.
3. Uncheck the constrained layout in the settings on the right.
4. Save and check the front end.

To fix the same issue in the default footer follow the same steps. The changes won't be visible in the editor, but should be reflected on the front end.

This did not fix the editor view (the original issue), and given the age of the theme we won't be fixing that.

[syhussaini]

I tried the workaround mentioned in this thread, and it worked well on the user's site.

[syhussaini]

Here is a video walkthrough I prepared for resolution: https://d.pr/v/nsEWF9

[Neha93517]

Another report here: Zen - 8226476 Shared workaround video by @syhussaini

[rickmgithub]

Another report 8535709-zd-a8c Shared the workaround in the earlier comment.

[mrfoxtalbot]

Hey, @dsas, I am not sure if we can prioritize fixing this but could we at least update the them showcase thumbnail so it reflects what the theme looks like now (i.e no triangle in the background?)

[dsas]

Hey, @dsas, I am not sure if we can prioritize fixing this but could we at least update the them showcase thumbnail so it reflects what the theme looks like now (i.e no triangle in the background?)

If we're not fixing the editor view then it's arguably better that the editor and front-end view match.

The thumbnail you mean is a manually generated image that is part of the theme description.

@alaczek how much work is it to make a new one of those images? All of the quadrats are delisted now, except for the original. If we're not fixing the images, we could just delete them...

[jordesign]

Just updating the thumbnail to match sounds like a good quick win.

[MaggieCabrera]

Opened a PR for this https://github.com/Automattic/themes/pull/8579