[Bug]: Editor: gradient presets cleared on save

[mikachan]

Quick summary

Custom gradients set in theme.json at settings.color.gradients seem to be cleared when a style variation is applied and then saved in the editor. The gradient appears correctly when the variation is chosen but then disappears when the editor is saved.

This does not happen on self-hosted sites.

Steps to reproduce

1. Activate a theme with style variations that include a background gradient, e.g. Twenty Twenty-Three
2. Go to the Editor > Browse styles > choose the Pilgrimage or Sherbet variation
3. See the background gradient applied in the preview (dotted background for Pilgrimage, rainbow gradient for Sherbet)
4. Save the changes
5. The gradient will disappear

What you expected to happen

The custom gradients should remain after saving the editor.

What actually happened

The custom gradients disappear after saving.

It looks like the CSS variables (e.g. --wp--preset--gradient--dots in Pilgrimage) are lost/cleared/deleted on save from looking at the page source, as the definitions exist when the variation is applied, and then are deleted when the variation is saved.

Browser

No response

Context

No response

Platform (Simple, Atomic, or both?)

Simple, Atomic

Other notes

No console errors

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

None

Workaround details

No response

[Copons]

I'm investigating this, but I'm fairly certain that those gradients are removed by the ever-overzealous Dotcom KSES.

[Copons]

cc @fullofcaffeine and @david-binda

[mmtr]

Looks like this is a Core issue, so I created a ticket there: https://core.trac.wordpress.org/ticket/57322

[mmtr]

While this is solved in Core, we can definitely add a temporary fix to WPCOM to prevent the issue in the meantime.

This can be done in a similar fashion to D94491-code by hooking into safecss_filter_attr_allow_css to properly catch the gradients missed by this incomplete regex.

Examples of such missed gradients are the ones defined by the Sherbet or the Pilgrimage style variations of the Twenty Twenty-Three theme.

However, my regex skills are not that advanced and I have no idea about what is the pattern we should use to catch all the possible valid values.

cc @david-binda in case you can lend a hand here.

[david-binda]

Yup, makes sense. I'll see if I can come up with something.

[david-binda]

I have followed in the core ticket with a proposed fix for the issue. If we were about to patch WPCOM, then it should be something similar to what WordPress.org is going to implement.

[mmtr]

Thanks @david-binda! I created D97501-code based on your patch to implement a temporary fix for WPCOM.

[mmtr]

Fixed by D97501-code.