![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 4 years ago
Last modified 4 months ago
#57322 new defect (bug)
Gradients clear upon saving when KSES filters are active
| Reported by: | mmtr86 | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | Awaiting Review |
| Component: | Themes | Version: | |
| Severity: | normal | Keywords: | dev-feedback |
| Cc: | Focuses: |
Description
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
Attachments (1)
Change History (5)
#2
@
2 years ago
- Keywords dev-feedback added
Unless I am mistaken this doesn't seem like it is specific to the theme within the patch. Can this be confirmed @davidbinda?
#4
@
4 months ago
- Component Bundled Theme → Themes
- Summary Twenty Twenty-Three: Gradients clear upon saving when KSES filters are active → Gradients clear upon saving when KSES filters are active
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.
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_attrfunction prior the grandients handling, and which makes the regex to match stacked gradients as well.