Gradients clear upon saving when KSES filters are active

[mmtr86]

The Twenty Twenty-Three theme has some style variations that include a background gradient such as Pilgrimage or Sherbet.

When the KSES filters (*) are active, the background gradient gets cleared because the CSS value doesn't match this regex (see ​https://regex101.com/r/awcZif/1).

(*) These filters are only registered when a user doesn't have the unfiltered_html capability (which is the case for multisite regular admins), but can be manually enabled with add_action( 'init', 'kses_init_filters' ).

---

Steps to reproduce

• Enable the KSES filters with add_action( 'init', 'kses_init_filters' );
• Activate the Twenty Twenty-Three theme
• Go to Appearance > Editor
• Open the Styles sidebar
• Click on "Browse styles"
• Choose the Pilgrimage or Sherbet variation
• See the background gradient applied in the preview (dotted background for Pilgrimage, rainbow gradient for Sherbet)
• Save the changes
• ⚠️ Note how the gradient disappears

[david.binda]

My reading of the regex is that it's meant to match just a single non-stacked gradient. The failing Gutenberg produced CSS rule uses a stacked gradient, and also references a CSS variable, which is another bit which throws the regex off.

Looking into the issue, I have prepared a patch which moves the CSS variables handling inside the safecss_filter_attr function prior the grandients handling, and which makes the regex to match stacked gradients as well.

[karmatosed]

Unless I am mistaken this doesn't seem like it is specific to the theme within the patch. Can this be confirmed @davidbinda?

[david.binda]

Yeah, my understanding is that the issue is theme specific.

[sabernhardt]

I did not experience a problem with gradients from Twenty Twenty-Two or Twenty Twenty-Four. However, the issue with Twenty Twenty-Three's gradients should be fixed for any theme.