Lativ theme: Unable to set a solid background color in global styles

[jp-imagines]

Quick summary

The Lativ theme uses a gradient background by default. You can change this to a different gradient, but selecting any solid background color does not work.

Steps to reproduce

1. Activate the Lativ theme.
2. Open global styles at Appearance > Editor > Styles > Edit.
3. Click Background and try to select a solid background color.

What you expected to happen

The selected background color should apply to the site.

What actually happened

Nothing happens. The site's CSS shows the background color is applied via a background-color CSS style at the same place as a background rule for the gradient, which overwrites the solid color.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Only tested on Atomic so far, and only on Lativ. Unsure if this affects other themes (including themes where a gradient background isn't the default).

Workaround: Create a custom gradient with two identical colors and set that as the background instead. (CSS also works.)

Initial report: 6696455-zd-a8c

[github-actions[bot]]

Support References

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

• [ ] 6696455-zen
• [ ] 6867014-zen
• [ ] 6898452-zen
• [ ] 6776945-zen
• [ ] 6960580-zen
• [ ] 7462451-zen
• [ ] 7462546-zen
• [ ] 7546597-zen
• [ ] 7622563-zen

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Tested on P2 (optional) – Replicated / Could Not Replicate / Uncertain
• Replicable outside of Dotcom – Yes/No

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated across simple and AT. On my AT site where I have a non-default style selected from activation, changing the background color just resets the bg color to the default style.
• Could not replicate on TT2 or Didone; these themes let me select any background color as expected.
• I couldn't find any other themes with a gradient default background to test, so unsure if this is Lativ-specific

Screenshots/Recordings

Atomic - Serif Mint style

https://github.com/Automattic/wp-calypso/assets/27249804/e21ee9e5-dcff-4d3c-b2a2-7c05a57853c6

Simple - Default Style

https://github.com/Automattic/wp-calypso/assets/27249804/086dce3e-a9cc-4176-a56a-9c688f76984f

📌 ACTIONS

• @Automattic/t-rex for your awareness

[dsas]

Looks like it is a Gutenberg bug: https://github.com/WordPress/gutenberg/issues/42105

[mgozdis]

Another user report here: 6867014-zd-a8c

Set all gradient control points to solid color as a workaround, however, if the user ever selects a solid background color again, it immediately reverts to the default gradient again.

[jp-imagines]

Another report in 6898452-zd-a8c

[cuemarie]

Noted this here: p1695047721869529-slack-C03EUR81G3V

[jordesign]

There's some discussion in https://github.com/WordPress/gutenberg/issues/47391 on how to approach this kind of problem - looks like it's a not-so-simple solution

[mdtanjid0]

• [ ] 6776945-zen, another one with the Lativ theme. ( needs to be followed up )

[devNigel]

Another report: 6960580-zd-a8c

[edequalsawesome]

Also reported in 7462451-zen, follow-up requested in 7462546-zen

[kspilarski]

Also cannot set a solid background color in Global Styles settings in the Lativ theme on 7546597-zen

[ckmccoy2]

another instance 7622563-zd. Was able to set an all while background (what user wanted), by creating a custom gradient and setting both to #ffffff