Core backport for Global Styles: Allow arbitrary CSS, protect from KSES mangling

[ramonjd]

What?

A PR to backport WordPress/wordpress-develop#10641, which fixes https://core.trac.wordpress.org/ticket/64418

• Add JSON encoding flags to WP_REST_Global_Styles_Controller_Gutenberg (JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP) to prevent HTML filter issues
• Refactor validate_custom_css(): replace regex with targeted validation that only blocks </style> tags

All props go to @sirreal and @dmsnell and other folks working on that PR.

Why?

So that folks running the latest Gutenberg on top of any version of WordPress (even after WordPress/wordpress-develop#10641 lands in 7.0) can benefit from the fix.

Gutenberg overwrites the controller for the wp_global_styles post type via WP_REST_Global_Styles_Controller_Gutenberg.

Quoting WordPress/wordpress-develop#10641:

Under some circumstances KSES would run post content filters and change the resulting content like this:

 @property --animate {
-  syntax: "<custom-ident>";
+  syntax: "";
   inherits: true;
   initial-value: false;
 }

The Custom CSS is stored as JSON-encoded data in post content. KSES filters this content as HTML.

Testing

Head over the to site editor, open Global styles, then "Additional CSS" from the ellipsis dropdown.

Add some CSS rules that contain CSS properties, e.g.,

.component {
  @supports (display: grid) {
    display: grid;
    
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      
      @container (min-width: 600px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
}

You should be able to save this content (on trunk you can't)

Now try to add a closing </style> tag to the content.

You should be blocked by the server with a rest_custom_css_illegal_markup 400 error.

Screenshots or screencast

Input	Output	Trying to save CSS with closing style tags

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: Global Styles, Backport from WordPress Core.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: dmsnell <dmsnell@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[sirreal]

These are issues related to the error message. It may not be displayed or the actual message is ignored:

• Site editor: add details to "Saving failed" error message #57245
• Global Styles: Additional CSS may not display any error on failure to save #74447

[sirreal]

Thanks for preparing this. I would like to wait until WordPress/wordpress-develop#10641 lands before merging this so that the final implementations match.

[ramonjd]

I would like to wait until WordPress/wordpress-develop#10641 lands before merging this so that the final implementations match.

Good plan!

[github-actions]

Flaky tests detected in 3b2ca0d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20979791382
📝 Reported issues:

• [Flaky Test] User Mention: should insert two subsequent mentions #48569 in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js

[sirreal]

This seems to be a correct sync of the global styles REST controller in https://core.trac.wordpress.org/changeset/61486.

[sirreal]

This broke an multisite unit test against the previous major WordPress version:

1) WP_REST_Global_Styles_Controller_Gutenberg_Test::test_update_allows_valid_css_with_more_syntax
Failed asserting that two strings are identical.
--- Expected
+++ Actual
@@ @@
 '@property --animate {
-	syntax: "<custom-ident>";
+	syntax: "";
 	inherits: true;
 	initial-value: false;
 }
-h1::before { content: "fun & games"; }'
+h1::before { content: "fun &amp; games"; }'

The test result depends on the KSES global styles filter being fixed like was done in [61486]. The failure demonstrates that this problem cannot be fixed in Gutenberg alone.

I'm tempted to revert this change until Gutenberg drops support for WordPress 6.9.

I'm exploring options in #74731