[Bug]: Using gutenberg-edge (14.8 rc1) new custom CSS feature doesn't work

[dsas]

Quick summary

The new Global styles custom CSS feature doesn't work

Steps to reproduce

1. Create a new site
2. Get a premium+ plan and use e.g. Twenty Twenty-three theme.
3. Open the site editor
4. Open the global styles sidebar
5. Click the new 'Custom CSS' feature at the bottom of the page
6. Paste some style rule in like h1.wp-block-heading { text-decoration:underline; color: orange; }
7. Notice that the editor to the left now makes headings orange and underlined ✅
8. Press Save and then Save again once the pre-save prompt has loaded

What you expected to happen

• The editor to the left to remain as it is - orange underlined headings
• To see orange, underlined headings when looking at the front-end of the site

What actually happened

• The headings are no longer orange or underlined in the editor or on the front-end of the site
• If I close the CSS panel and reopen it, the CSS is gone!

13x5Fk.mp4

Browser

Mozilla Firefox

Context

Testing if global styles gating works with new custom CSS feature

Platform (Simple, Atomic, or both?)

Simple

Other notes

There's an error in the browser console: Uncaught TypeError: t.target.classList is undefined

The HTTP PUT request does include the expected css string but the response doesn't.

There's nothing in my sandbox error log.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[dsas]

This doesn't happen in Core on the 14.8 RC tag.

[dsas]

Maybe it's not limited to the new custom CSS feature, it also happens when choosing a style variation for example. I choose a style variation, saved it and it half-disappeared. Many of the previews were off too

7eSC1A.mp4

[Copons]

cc @fullofcaffeine, as this might be an issue for the 14.8 Gutenberg merge if it happens before the holidays.

Wonder if this is the same (or related to) KSES issue that affects gradients (Core Trac): #71009

See also p1670602379106569-slack-CBTN58FTJ.

[dsas]

I'm a superadmin afaik and I was testing as my a8c-self 🤔

[dsas]

Global styles created via the newsletter onboarding flow do work!

[glendaviesnz]

I just tested with a local install of 14.8-RC-1 and the global styles custom CSS saves as expected.

With Calypso the correct style value is being sent to the API but not returned, so mostly likely being stripped before saving.

The place to start debugging why this is would be here.

In order to work the WP_Theme_JSON_6_2 version of the theme json class needs to be loaded as this includes the addition of css as a VALID_STYLE here - if not the styles.css will be stripped as being invalid.

[glendaviesnz]

This patch here needs to go into 14.8 to prevent a PHP warning being thrown if global styles are being updated but no custom CSS is included ... but it looks like this didn't get into RC1. I don't think this would affect this issue though as should just throw a warning and not affect the saving.

[mmtr]

I think this is another KSES issue in Core similar to WordPress/gutenberg#45520 and https://core.trac.wordpress.org/ticket/57322.

I can reproduce the issue in Core when I enable the KSES filters with add_action( 'init', 'kses_init_filters' );

[dsas]

Opened up a Core issue WordPress/gutenberg#46651

[simison]

FYI: revert of the custom CSS to an experiment

[dsas]

There's an open upstream PR that fixes the custom CSS issue that wfm on core. It uses the edit_css cap which we remap for the customizer custom css

[mmtr]

Gutenberg has re-enabled the Custom CSS feature in WordPress/gutenberg#46815 and WordPress/gutenberg#47062 after solving the issues with the KSES filters and the needed capabilities.

It'll be shipped in the next version (v15.1.0), so let's keep an eye on when it lands on WPCOM to see if it works as expected.

[mmtr]

Latest update in paYJgx-2WY-p2.

[mmtr]

We've confirmed that the feature remains hidden on Gutenberg v15.1.0 for Simple sites.

I also opened D101145-code to enable it in a safe way.