Custom CSS not saving

[dsas]

Description

Custom CSS is being reverted when pressing save.

Step-by-step reproduction instructions

1. Make DISALLOW_UNFILTERED_HTML defined and truthy, e.g. by adding config: { "DISALLOW_UNFILTERED_HTML": true }, to the top level in .wp-env.json and starting with wp-env
2. Open the site editor
3. Open the global styles sidebar
4. Click the new 'Custom CSS' feature at the bottom of the page
5. Paste some style rule in like h1.wp-block-heading { text-decoration:underline; color: orange; }
6. Notice that the editor to the left now makes headings orange and underlined ✅
7. Press Save and then Save again once the pre-save prompt has loaded

Screenshots, screen recording, code snippet

Screen.Capture.on.2022-12-19.at.13-09-07.mp4

The save HTTP request included the css values:

{
	"id": 6,
	"styles": {
		"blocks": {<CUT_FOR_BREVITY>},
		"color": {
			"gradient": "var(--wp--preset--gradient--base-secondary-base) no-repeat"
		},
		"css": "h1.wp-block-heading { text-decoration:underline; color: orange; }",
		
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--dm-sans)"
		}
	}
}

The response however did not include a "css" property.

Environment info

Using the wp-env from Gutenberg 14.8.01-rc.1, can also reproduce on current trunk (1b5994a)

With DISALLOW_UNFILTERED_HTML, or presumably admin on multisite install or using any role with edit_theme_options but w/o unfiltered_html

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[glendaviesnz]

Looking at putting custom css behind an experimental flag until this is resolved.

[glendaviesnz]

This feature has been moved behind an experimental flag for now.

At the moment a valid canUserUseUnfilteredHTML selector is not available in the site editor as the current selector is tied to the current post. To resolve this issue we need to add a way to reliably determine if the user has unfiltered HTML capabilities in the site editor context.

[mmtr]

To resolve this issue we need to add a way to reliably determine if the user has unfiltered HTML capabilities in the site editor context.

@glendaviesnz I think we need to consider the KSES filters as well.

Right now, the Custom CSS feature within Global Styles doesn't work when the KSES filters are active for users with the unfiltered_html capability, as opposed to the Custom CSS feature within the Customizer.

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 enabled manually as well.

You can follow these instructions to observe the differences:

1. Enable the KSES filters with add_action( 'init', 'kses_init_filters' );
2. Activate the Twenty Twenty-One theme
3. Go to Appearance > Customize > Additional CSS
4. Add some CSS code
5. Save the changes
6. ✅ Note how the CSS code is correctly saved
7. Now activate the Twenty Twenty-Three theme
8. Go to Appearance > Editor
9. Open the Styles sidebar
10. Select "Custom CSS"
11. Add some CSS code
12. Save the changes
13. ⚠️ Note how the changes are reverted

So I think the new Custom CSS feature within Global Styles should still work when the KSES filters are active.

[ndiego]

@mmtr @Mamaduka Just checking in on this issue. Can this be closed now that #46815 is merged?

[Mamaduka]

Yes, we can close this one. Also related PR #47062.