Style Engine: Include 6.1 CSS filter, ensure style engine can output …

…CSS functions like clamp (#43004)

* Style Engine: Include 6.1 CSS filter, ensure style engine can output CSS functions like clamp

* Remove display handling

* Remove esc_html call

* Remove spacer check

lib/compat/wordpress-6.1/blocks.php

@@ -25,6 +25,33 @@ function gutenberg_safe_style_attrs_6_1( $attrs ) {
 }
 add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_1' );
 
+/**
+ * Update allowed CSS values to match WordPress 6.1.
+ *
+ * Note: This should be removed when the minimum required WP version is >= 6.1.
+ *
+ * The logic in this function follows that provided in: https://core.trac.wordpress.org/ticket/55966.
+ *
+ * @param boolean $allow_css       Whether or not the current test string is allowed.
+ * @param string  $css_test_string The CSS string to be tested.
+ * @return boolean
+ */
+function gutenberg_safecss_filter_attr_allow_css_6_1( $allow_css, $css_test_string ) {
+	if ( false === $allow_css ) {
+		// Allow some CSS functions.
+		$css_test_string = preg_replace( '/\b(?:calc|min|max|minmax|clamp)\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
+
+		// Allow CSS var.
+		$css_test_string = preg_replace( '/\(?var\(--[\w\-\()[\]\,\s]*\)/', '', $css_test_string );
+
+		// Check for any CSS containing \ ( & } = or comments,
+		// except for url(), calc(), or var() usage checked above.
+		$allow_css = ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string );
+	}
+	return $allow_css;
+}
+add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_safecss_filter_attr_allow_css_6_1', 10, 2 );
+
 /**
  * Registers view scripts for core blocks if handling is missing in WordPress core.
  *

packages/style-engine/class-wp-style-engine-css-declarations.php

@@ -113,6 +113,22 @@ public function get_declarations() {
 		return $this->declarations;
 	}
 
+	/**
+	 * Filters a CSS property + value pair.
+	 *
+	 * @param string $property The CSS property.
+	 * @param string $value    The value to be filtered.
+	 * @param string $spacer   The spacer between the colon and the value. Defaults to an empty string.
+	 *
+	 * @return string The filtered declaration as a single string.
+	 */
+	protected static function filter_declaration( $property, $value, $spacer = '' ) {
+		if ( isset( $property ) && isset( $value ) ) {
+			return safecss_filter_attr( "{$property}:{$spacer}{$value}" );
+		}
+		return '';
+	}
+
 	/**
 	 * Filters and compiles the CSS declarations.
 	 *
@@ -130,7 +146,7 @@ public function get_declarations_string( $should_prettify = false, $indent_count
 
 		foreach ( $declarations_array as $property => $value ) {
 			$spacer               = $should_prettify ? ' ' : '';
-			$filtered_declaration = esc_html( safecss_filter_attr( "{$property}:{$spacer}{$value}" ) );
+			$filtered_declaration = static::filter_declaration( $property, $value, $spacer );
 			if ( $filtered_declaration ) {
 				$declarations_output .= "{$indent}{$filtered_declaration};$suffix";
 			}

packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php

@@ -149,14 +149,37 @@ public function test_generate_prettified_with_more_indents_css_declarations_stri
 	 */
 	public function test_remove_unsafe_properties_and_values() {
 		$input_declarations = array(
-			'color'        => '<red/>',
+			'color'        => 'url("https://wordpress.org")',
 			'margin-right' => '10em',
 			'potato'       => 'uppercase',
 		);
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color:&lt;red/&gt;;margin-right:10em;',
+			'margin-right:10em;',
+			$css_declarations->get_declarations_string()
+		);
+	}
+
+	/**
+	 * Should allow calc, clamp, min, max, and minmax CSS functions.
+	 */
+	public function test_allow_particular_css_functions() {
+		$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)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$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");',
 			$css_declarations->get_declarations_string()
 		);
 	}

packages/style-engine/phpunit/class-wp-style-engine-test.php

@@ -209,7 +209,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
+					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
 					'declarations' => array(
 						'font-size'       => 'clamp(2em, 2vw, 4em)',
 						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',