Changeset 50923

Timestamp:

05/17/2021 09:03:56 PM (3 years ago)

Author:

SergeyBiryukov

Message:

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

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

Location:

trunk

Files:

• src/wp-includes/kses.php (modified) (2 diffs)
• tests/phpunit/tests/kses.php (modified) (3 diffs)

trunk/src/wp-includes/kses.php

@@ -2173 +2173 @@
      * @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.
@@ -2382 +2383 @@
 
         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 );
 

trunk/tests/phpunit/tests/kses.php

@@ -1213 +1213 @@
      *
      * @ticket 45067
+     * @ticket 46197
+     * @ticket 46498
      *
      * @param $input string The style attribute saved in the editor.
@@ -1288 +1290 @@
             ),
 
+            // 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.
@@ -1349 +1369 @@
             array(
                 'background-image: url( "http://example.com );',
+                '',
+            ),
+
+            // Malformed calc, no closing `)`.
+            array(
+                'width: calc(3em + 10px',
+                '',
+            ),
+
+            // Malformed var, no closing `)`.
+            array(
+                'width: var(--wp-var1',
                 '',
             ),