KSES: Allow calc() and var() values to be used in inline CSS.

Props aristath, displaynone, joyously, olafklejnstrupjensen, sabernhardt, jamesbonham, poena.
Fixes #46197, #46498.

git-svn-id: https://develop.svn.wordpress.org/trunk@50923 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/kses.php

@@ -2172,6 +2172,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
 	 *              Extend `background-*` support of individual properties.
 	 * @since 5.3.1 Added support for gradient backgrounds.
 	 * @since 5.7.1 Added support for `object-position`.
+	 * @since 5.8.0 Added support for `calc()` and `var()` values.
 	 *
 	 * @param string[] $attr Array of allowed CSS attributes.
 	 */
@@ -2381,7 +2382,13 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
 		}
 
 		if ( $found ) {
-			// Check for any CSS containing \ ( & } = or comments, except for url() usage checked above.
+			// Allow CSS calc().
+			$css_test_string = preg_replace( '/calc\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
+			// Allow CSS var().
+			$css_test_string = preg_replace( '/\(?var\(--[a-zA-Z0-9_-]*\)/', '', $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 );
 
 			/**

tests/phpunit/tests/kses.php

@@ -1212,6 +1212,8 @@ function data_wildcard_attribute_prefixes() {
 	 * @dataProvider data_kses_style_attr_with_url
 	 *
 	 * @ticket 45067
+	 * @ticket 46197
+	 * @ticket 46498
 	 *
 	 * @param $input string The style attribute saved in the editor.
 	 * @param $expected string The sanitized style attribute.
@@ -1287,6 +1289,24 @@ function data_kses_style_attr_with_url() {
 				'background: red',
 			),
 
+			// CSS calc().
+			array(
+				'width: calc(2em + 3px)',
+				'width: calc(2em + 3px)',
+			),
+
+			// CSS variable.
+			array(
+				'padding: var(--wp-var1) var(--wp-var2)',
+				'padding: var(--wp-var1) var(--wp-var2)',
+			),
+
+			// CSS calc() with var().
+			array(
+				'margin-top: calc(var(--wp-var1) * 3 + 2em)',
+				'margin-top: calc(var(--wp-var1) * 3 + 2em)',
+			),
+
 			/*
 			 * Invalid use cases.
 			 */
@@ -1350,6 +1370,18 @@ function data_kses_style_attr_with_url() {
 				'background-image: url( "http://example.com );',
 				'',
 			),
+
+			// Malformed calc, no closing `)`.
+			array(
+				'width: calc(3em + 10px',
+				'',
+			),
+
+			// Malformed var, no closing `)`.
+			array(
+				'width: var(--wp-var1',
+				'',
+			),
 		);
 	}