[wp-trac] [WordPress Trac] #62353: KSES filters: Add support for background: color-mix

[WordPress Trac]

#62353: KSES filters: Add support for background: color-mix
-----------------------------+-----------------------------
 Reporter:  BogdanUngureanu  |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Editor           |    Version:
 Severity:  normal           |   Keywords:
  Focuses:  css, template    |
-----------------------------+-----------------------------
 Gutenberg added limited support for color-mix property value with this
 [PR]https://github.com/WordPress/gutenberg/pull/64224 . However, when KSES
 filter is enabled on a site, these properties are filtered out.

 **Steps to reproduce it**
 - Activate "Assembler" theme
 - Enable KSES filtering with `add_action( 'init', 'kses_init_filters' );`
 - Open the Site Editor
 - Insert this
 [pattern]https://gist.github.com/richtabor/e25d9e316e51f39495425c86b425a49e
 - Apply a Global Styles Variation (e.g. Noir)
 - Notice that, on hover, the button's background is gray (expected
 behavior)
 - Click Save
 - Notice that, on hover, the button's background is white instead of gray
 - Select the Style variation
 - Notice that some elements haven't been persisted


 This can be fixed by extending the filter with something like this

 {{{#!php
 <?php
 function color_mix_validate_css_rule( $allow, $css_to_test ) {
         if ( $allow ) {
                 return $allow;
         }
         $allowed_selectors = [ 'color', 'background-color', 'background'
 ];

         $parts        = explode( ':', $css_to_test, 2 );
         if ( count( $parts ) < 2 ) {
                 return $allow;
         }

         $css_selector = trim( $parts[0] );
         $css_value    = trim( $parts[1] );

         if ( ! in_array( $css_selector, $allowed_selectors, true ) ) {
                 return $allow;
         }

         if ( ! str_starts_with( $css_value, 'color-mix(' ) ) {
                 return $allow;
         }

         $regex = '/color-mix\(in\s+srgb,\s*(\d{1,3}%)|(currentColor
 (\d{1,3}%)),\s*(transparent|#[0-9a-
 fA-F]{3,8}|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*(0|1|0?\.\d+|1?\.\d+)?)?\s*\))\)$/';

         return preg_match( $regex, $css_value ) === 1;
 }

 add_filter( 'safecss_filter_attr_allow_css',
 'color_mix_validate_css_rule', 10, 2 );
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62353>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform