KSES filters: Add support for background: color-mix

[BogdanUngureanu]

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
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 );

[desrosj]

Hi @BogdanUngureanu,

Thanks for this ticket and welcome to Trac!

I'm adding this to the 6.8 to take a look.

Added unit tests to verify the issue and so far cannot reproduce.

Trac ticket: https://core.trac.wordpress.org/ticket/62353

[michaelwp85]

Hi,

I wrote tests to be able to reproduce the issue and fix it. So far, the tests have all passed. I might be missing a specific syntax. My tests run color-mix with all 3 of the selectors in your example code.

I've also tried to manually reproduce the issue, and using the default theme everything is working as expected. I don't have the assembler theme. Could this be a theme related issue rather than a WP issue?

Could you provide the css that is failing for you?