Broken Block after saving page without capability "unfiltered_html"

[tlindig]

Short: kses.php do not allow valid css color value in style attribute like 'rgba(...)'

Details:
I have a role "customer" without the capability "unfiltered_html".

If account with that role save a page with a reusable block containing a cover and then reload the page into the editor, the reusable block is broken afterwards.

In the browser console is the following error message:

Block validation: Block validation failed for `core/cover`

Content generated by `save` function:

<div class="wp-block-cover alignfull has-background-dim" style="min-height:600px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:rgba(0,0, 0, 1)"></span><img class="wp-block-cover__image-background" alt="" src="/wp-content/themes/trinity-core/reusable-blocks/images/content_0002_david-gavi-Ijx8OxvKrgM-unsplash.jpg" style="object-position:54% 85%" data-object-fit="cover" data-object-position="54% 85%"/><div class="wp-block-cover__inner-container"></div></div>

Content retrieved from post body:

<div class="wp-block-cover alignfull has-background-dim" style="min-height:600px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="/wp-content/themes/trinity-core/reusable-blocks/images/content_0002_david-gavi-Ijx8OxvKrgM-unsplash.jpg" style="object-position:54% 85%" data-object-fit="cover" data-object-position="54% 85%" /><div class="wp-block-cover__inner-container"></div></div>

In the second element (span) the style attribute are missing.

 style="background-color:rgba(0,0, 0, 1)

I debugged this until this line in wp-includes/kses.php
​https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/kses.php#L2477

// Check for any CSS containing \ ( & } = or comments,
// except for url(), calc(), or var() usage checked above.
$allow_css = ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string );

This rule prevent '(' in value for style attribute value but 'rgba(', 'rgb(', 'hsl(' would also be valid and safe css color values.
see here: ​https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Some other css functions will be forbidden too:
​https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#functional_notation

But is the necessary? increases this the safety?

I would suggest to omit the round bracket in the regex.

[markparnell]

Thanks for the report @tlindig. Looks like there is already an open ticket (#24157) looking at this issue, so I'm going to close this as a duplicate. Feel free to add your thoughts there though - it's always helpful to hear of additional use cases.

FYI #37134 added the safecss_filter_attr_allow_css filter, which would allow working around this in the meantime via custom code (indeed allowing rgb() was the specific use-case suggested in that ticket).