KSES: Add support for rgb(a) color #10923
+138
−6
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2756,6 +2756,28 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |
| 'list-style-image', | ||
| ); | ||
|
|
||
| /* | ||
| * CSS attributes that accept rgb(a) color data types. | ||
| * | ||
|
t-hamano marked this conversation as resolved.
Outdated
|
||
| */ | ||
| $css_color_data_types = array( | ||
| 'color', | ||
|
|
||
| 'border', | ||
| 'border-color', | ||
| 'border-right', | ||
| 'border-right-color', | ||
| 'border-bottom', | ||
| 'border-bottom-color', | ||
| 'border-left', | ||
| 'border-left-color', | ||
| 'border-top', | ||
| 'border-top-color', | ||
|
|
||
| 'background', | ||
| 'background-color', | ||
| ); | ||
|
|
||
| /* | ||
| * CSS attributes that accept gradient data types. | ||
| * | ||
|
|
@@ -2779,6 +2801,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |
| $css_test_string = $css_item; | ||
| $found = false; | ||
| $url_attr = false; | ||
| $color_attr = false; | ||
| $gradient_attr = false; | ||
| $is_custom_var = false; | ||
|
|
||
|
|
@@ -2798,6 +2821,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |
| $found = true; | ||
| $url_attr = in_array( $css_selector, $css_url_data_types, true ); | ||
| $gradient_attr = in_array( $css_selector, $css_gradient_data_types, true ); | ||
| $color_attr = in_array( $css_selector, $css_color_data_types, true ); | ||
| } | ||
|
|
||
| if ( $is_custom_var ) { | ||
|
|
@@ -2840,6 +2864,16 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |
| } | ||
| } | ||
|
|
||
| if ( $found && $color_attr ) { | ||
| $css_value = trim( $parts[1] ); | ||
|
t-hamano marked this conversation as resolved.
Outdated
|
||
| $comma_syntax = '/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i'; | ||
| $space_syntax = '/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i'; | ||
|
|
||
| if ( preg_match( $comma_syntax, $css_value ) || preg_match( $space_syntax, $css_value ) ) { | ||
| $css_test_string = str_replace( $css_value, '', $css_test_string ); | ||
| } | ||
| } | ||
|
|
||
| if ( $found ) { | ||
| /* | ||
| * Allow CSS functions like var(), calc(), etc. by removing them from the test string. | ||
|
Comment on lines
+2714
to
2882
Member
There was a problem hiding this comment. Note that
Because the regex has a below has These anchors could be removed to match wordpress-develop/src/wp-includes/kses.php Line 2835 in e8eff13 (Props Claude Code Opus 4.7 for insight.) |
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -1203,6 +1203,31 @@ public function data_safecss_filter_attr() { | |||||
| 'css' => 'height: expression( body.scrollTop + 50 + "px" )', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // RGBA background color are allowed. | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
|
||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0,0,0,0)', | ||||||
| 'expected' => 'background-color: rgba(0,0,0,0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0, 0, 0, 0)', | ||||||
| 'expected' => 'background-color: rgba(0, 0, 0, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(100, 100, 100, 0)', | ||||||
| 'expected' => 'background-color: rgba(100, 100, 100, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(10%, 10%, 10%, 0)', | ||||||
| 'expected' => 'background-color: rgba(10%, 10%, 10%, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0, 0, 0, 0.1)', | ||||||
| 'expected' => 'background-color: rgba(0, 0, 0, 0.1)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0, 0, 0, .1)', | ||||||
| 'expected' => 'background-color: rgba(0, 0, 0, .1)', | ||||||
| ), | ||||||
| // RGB color values are not allowed. | ||||||
| array( | ||||||
| 'css' => 'color: rgb( 100, 100, 100 )', | ||||||
|
|
@@ -1333,6 +1358,71 @@ public function data_safecss_filter_attr() { | |||||
| 'css' => 'gap: 10px;column-gap: 5px;row-gap: 20px', | ||||||
| 'expected' => 'gap: 10px;column-gap: 5px;row-gap: 20px', | ||||||
| ), | ||||||
| // RGB color. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 0, 0)', | ||||||
| 'expected' => 'color: rgb(255, 0, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255 0 0)', | ||||||
| 'expected' => 'color: rgb(255 0 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(100%, 0%, 50%)', | ||||||
| 'expected' => 'color: rgb(100%, 0%, 50%)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 50%, 0)', | ||||||
| 'expected' => 'color: rgb(255, 50%, 0)', | ||||||
| ), | ||||||
|
Comment on lines
+1364
to
+1367
Member
There was a problem hiding this comment. Mixing integers with a percentage here isn't valid: body {
background: rgb(255, 50%, 0);
}
Contributor
Author
There was a problem hiding this comment. Thanks for noticing, I have corrected the invalid values in 129c006
Member
There was a problem hiding this comment. I don't think it's fixed? The problem is the 50%. Apparently CSS doesn't like mixing percentages and non-percentages. The above is still marked as invalid CSS by the CSS Validator.
Member
There was a problem hiding this comment. When I try validating: body {
color: rgb(255 50% 0);
}I get: 
Is the CSS Validator out of date?
Member
There was a problem hiding this comment. Yeah, and PhpStorm is fine with the comma-less version: 
|
||||||
| // RGBA color. | ||||||
| array( | ||||||
| 'css' => 'color: rgba(255, 128, 0, 0.5)', | ||||||
| 'expected' => 'color: rgba(255, 128, 0, 0.5)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255 128 0 / 50%)', | ||||||
| 'expected' => 'color: rgb(255 128 0 / 50%)', | ||||||
| ), | ||||||
| // RGB color with extra whitespace. | ||||||
| array( | ||||||
| 'css' => 'color: rgb( 255 , 128 , 0 )', | ||||||
| 'expected' => 'color: rgb( 255 , 128 , 0 )', | ||||||
| ), | ||||||
| // RGB background color. | ||||||
| array( | ||||||
| 'css' => 'background-color: rgb(200, 100, 50)', | ||||||
| 'expected' => 'background-color: rgb(200, 100, 50)', | ||||||
| ), | ||||||
| // RGBA border color. | ||||||
| array( | ||||||
| 'css' => 'border-color: rgba(100, 200, 300, 0.8)', | ||||||
| 'expected' => 'border-color: rgba(100, 200, 300, 0.8)', | ||||||
| ), | ||||||
| // Malformed RGB color, invalid number of values. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 128, 0, 0.5, 100)', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 128)', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Malformed RGB color, non-numeric values. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(red, green, blue)', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Malformed RGB color, unmatched parentheses. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 128, 0', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Malformed RGB color, empty values. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(, , )', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Margin and padding logical properties introduced in 6.1. | ||||||
| array( | ||||||
| 'css' => 'margin-block-start: 1px;margin-block-end: 2px;margin-inline-start: 3px;margin-inline-end: 4px;', | ||||||
|
|
||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For consistency with the above: