[wp-trac] [WordPress Trac] #56196: Broken Block after saveing page without capability "unfiltert_html"

[WordPress Trac]

#56196: Broken Block after saveing page without capability "unfiltert_html"
--------------------------+-----------------------------
 Reporter:  tlindig       |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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

 {{{#!php
 // 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.

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