Style engine: permit wp custom CSS properties (#43071)

* Allow a single custom properties with which we can test incoming `--wp--*` custom properties * Whoa horsey! Let's simplify this and check for explicit Gutenberg CSS custom properties. * Using a CSS property to run the value of a CSS custom property through safecss_filter_attr * Updated tests * Updated comment and function name to reflect contents of test.
WordPress · Oct 14, 2022 · 388e5d2 · 388e5d2
1 parent 21e0d85
commit 388e5d2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 13 deletions.
diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -17,6 +17,21 @@
  * @access private
  */
 class WP_Style_Engine_CSS_Declarations {
+	/**
+	 * An array of valid CSS custom properties.
+	 * CSS custom properties are permitted by safecss_filter_attr()
+	 * since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
+	 *
+	 * This whitelist exists so that the Gutenberg plugin maintains
+	 * backwards compatibility with versions of WordPress < 6.1.
+	 *
+	 * It does not need to be backported to future versions of WordPress.
+	 *
+	 * @var array
+	 */
+	protected static $valid_custom_declarations = array(
+		'--wp--style--unstable-gallery-gap' => 'gap',
+	);
 
 	/**
 	 * An array of CSS declarations (property => value pairs).
@@ -125,6 +140,23 @@ public function get_declarations() {
 	 */
 	protected static function filter_declaration( $property, $value, $spacer = '' ) {
 		$filtered_value = wp_strip_all_tags( $value, true );
+
+		/**
+		 * Allows a specific list of CSS custom properties starting with `--wp--`.
+		 *
+		 * CSS custom properties are permitted by safecss_filter_attr()
+		 * since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
+		 *
+		 * This condition exists so that the Gutenberg plugin maintains
+		 * backwards compatibility with versions of WordPress < 6.1.
+		 *
+		 * It does not need to be backported to future versions of WordPress.
+		 */
+		if ( '' !== $filtered_value && isset( static::$valid_custom_declarations[ $property ] ) ) {
+			return safecss_filter_attr( static::$valid_custom_declarations[ $property ] . ":{$spacer}{$value}" ) ?
+				"{$property}:{$spacer}{$value}" : '';
+		}
+
 		if ( '' !== $filtered_value ) {
 			return safecss_filter_attr( "{$property}:{$spacer}{$filtered_value}" );
 		}

diff --git a/phpunit/style-engine/class-wp-style-engine-css-declarations-test.php b/phpunit/style-engine/class-wp-style-engine-css-declarations-test.php
@@ -121,22 +121,24 @@ public function test_should_strip_html_tags_and_remove_unsafe_css_properties() {
 
 
 	/**
-	 * Tests that calc, clamp, min, max, and minmax CSS functions are allowed.
+	 * Tests that calc, clamp, min, max, minmax CSS functions and CSS custom properties are allowed.
 	 *
 	 * @covers ::get_declarations_string
 	 * @covers ::filter_declaration
 	 */
-	public function test_should_allow_css_functions_and_strip_unsafe_css_values() {
+	public function test_should_allow_css_functions_and_custom_properties_and_strip_unsafe_css_values() {
 		$input_declarations                        = array(
-			'background'       => 'var(--wp--preset--color--primary, 10px)', // Simple var().
-			'font-size'        => 'clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)', // Nested clamp().
-			'width'            => 'min(150vw, 100px)',
-			'min-width'        => 'max(150vw, 100px)',
-			'max-width'        => 'minmax(400px, 50%)',
-			'padding'          => 'calc(80px * -1)',
-			'background-image' => 'url("https://wordpress.org")',
-			'line-height'      => 'url("https://wordpress.org")',
-			'margin'           => 'illegalfunction(30px)',
+			'background'                        => 'var(--wp--preset--color--primary, 10px)', // Simple var().
+			'font-size'                         => 'clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)', // Nested clamp().
+			'width'                             => 'min(150vw, 100px)',
+			'min-width'                         => 'max(150vw, 100px)',
+			'max-width'                         => 'minmax(400px, 50%)',
+			'padding'                           => 'calc(80px * -1)',
+			'background-image'                  => 'url("https://wordpress.org")',
+			'line-height'                       => 'url("https://wordpress.org")',
+			'margin'                            => 'illegalfunction(30px)',
+			'--wp--style--unstable-gallery-gap' => '12em',
+			'/::border-[<width>]'               => '2000.75em',
 		);
 		$css_declarations                          = new WP_Style_Engine_CSS_Declarations_Gutenberg( $input_declarations );
 		$safecss_filter_attr_allow_css_mock_action = new MockAction();
@@ -146,13 +148,13 @@ public function test_should_allow_css_functions_and_strip_unsafe_css_values() {
 		$css_declarations_string = $css_declarations->get_declarations_string();
 
 		$this->assertSame(
-			9,
+			11,
 			$safecss_filter_attr_allow_css_mock_action->get_call_count(),
 			'"safecss_filter_attr_allow_css" filters were not applied to CSS declaration values.'
 		);
 
 		$this->assertSame(
-			'background:var(--wp--preset--color--primary, 10px);font-size:clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem);width:min(150vw, 100px);min-width:max(150vw, 100px);max-width:minmax(400px, 50%);padding:calc(80px * -1);background-image:url("https://wordpress.org");',
+			'background:var(--wp--preset--color--primary, 10px);font-size:clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem);width:min(150vw, 100px);min-width:max(150vw, 100px);max-width:minmax(400px, 50%);padding:calc(80px * -1);background-image:url("https://wordpress.org");--wp--style--unstable-gallery-gap:12em;border-width:2000.75em;',
 			$css_declarations_string,
 			'Unsafe values were not removed'
 		);