Make WordPress Core

Opened 10 months ago

Last modified 9 months ago

#57322 new defect (bug)

Twenty Twenty-Three: Gradients clear upon saving when KSES filters are active

Reported by: mmtr86's profile mmtr86 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: Cc:


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

(*) 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

Attachments (1)

57322.diff (3.5 KB) - added by david.binda 9 months ago.

Download all attachments as: .zip

Change History (2)

#1 @david.binda
9 months ago

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.

9 months ago

Note: See TracTickets for help on using tickets.