KSES: Add support for rgb(a) color by t-hamano · Pull Request #10923 · WordPress/wordpress-develop

t-hamano · 2026-02-13T11:02:00Z

Note

This PR is the same as #3097. I submitted this new PR because I accidentally closed #3097 and it can no longer be reopened.

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

Related gutenberg issue: WordPress/gutenberg#39402
Related gutenberg PR: WordPress/gutenberg#39488

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2026-02-13T11:02:11Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props wildworks, westonruter.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-02-13T11:15:55Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Co-authored-by: Weston Ruter <westonruter@gmail.com>

westonruter · 2026-04-27T19:10:29Z

+			array(
+				'css'      => 'color: rgb(255, 50%, 0)',
+				'expected' => 'color: rgb(255, 50%, 0)',
+			),


Mixing integers with a percentage here isn't valid:

body { background: rgb(255, 50%, 0); }

Thanks for noticing, I have corrected the invalid values in 129c006

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.

When I try validating:

body { color: rgb(255 50% 0); }

I get:

Is the CSS Validator out of date?

Chrome seems fine with it.

Yeah, and PhpStorm is fine with the comma-less version:

This format is the Modern Syntax defined in CSS Color Module Level 4.

https://www.w3.org/TR/css-color-4/#rgb-functions

It should be supported by all browsers.

https://codepen.io/editor/Tetsuaki-Hamno/pen/019df1b7-20f5-77a8-b2f1-27811658e5bc

Yeah, specifically the legacy format uses the commas and which doesn't allow mixing percentage and non-percentage values:

The modern syntax without the commas allows mixing, and 129c006 looks right.

Drop the `^`/`$` anchors on the rgb()/rgba() match in `safecss_filter_attr()` and switch to `preg_match_all`, mirroring how `url()` is handled. This lets shorthand values like `border: 1px solid rgb(0, 0, 0)` and `background: rgb(0, 0, 0) center` pass sanitization, while malformed colors still fail because the leftover `(` is rejected downstream. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

`rgb(255, 50%, 0)` mixes numbers and percentages within the legacy comma-separated syntax, which is invalid per CSS Color Level 4 — only the modern space-separated syntax permits mixing. Switch the case to `rgb(255 50% 0)`. Also bring `rgba(100, 200, 300, 0.8)` into the 0–255 range (`250`) so the fixtures reflect realistic, valid colors rather than relying on browser clamping. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-authored-by: Weston Ruter <westonruter@gmail.com>

CSS Color Level 4 introduced the `none` keyword to represent missing color components, but it is only valid in the modern (space-separated) syntax — the legacy comma-separated form does not accept it. Update the regex to permit `none` in space-separated `rgb()`/`rgba()` while still rejecting it in the comma-separated form, and factor out the shared component term to avoid duplication. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

… comment. Fixes a `Squiz.WhiteSpace.SuperfluousWhitespace.EndLine` PHPCS violation introduced by an earlier comment edit on this branch. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

westonruter · 2026-05-04T23:58:02Z

 			if ( $is_custom_var ) {
 				$css_value     = trim( $parts[1] );
 				$url_attr      = str_starts_with( $css_value, 'url(' );
 				$gradient_attr = str_contains( $css_value, '-gradient(' );


Claude pointed out that rgb() isn't working for CSS variables. It suggests adding something like this:

Suggested change

$gradient_attr = str_contains( $css_value, '-gradient(' );

$color_attr = (bool) preg_match( '/\brgba?\(/i', $css_value );

Fixed in 15b92c3

westonruter · 2026-05-04T23:59:40Z

+		'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',


Another to add to the list: box-shadow. With some sorting:

Suggested change

'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',

'background',

'background-color',

'box-shadow',

'border',

'border-color',

'border-right',

'border-right-color',

'border-bottom',

'border-bottom-color',

'border-left',

'border-left-color',

'border-top',

'border-top-color',

'color',

Fixed in c814d87

westonruter · 2026-05-05T00:01:52Z

+			// Simplified: matches the sequence `rgb(*)` or `rgba(*)`.
+			$term         = '(?:[+-]?\d*\.?\d+)%?';
+			$comma_syntax = '/rgba?\(\s*' . join( '\s*,\s*', array_fill( 0, 3, $term ) ) . '\s*(?:,\s*' . $term . '\s*)?\)/i';
+			// The `none` keyword is only allowed in modern (space-separated) syntax.
+			$term         = '(?:(?:[+-]?\d*\.?\d+)%?|none)';
+			$space_syntax = '/rgba?\(\s*' . join( '\s+', array_fill( 0, 3, $term ) ) . '\s*(?:\/\s*' . $term . '\s*)?\)/i';


Claude pointed out confusing reuse of $term variable, and that implode() is used more than join():

Suggested change

// Simplified: matches the sequence `rgb(*)` or `rgba(*)`.

$term = '(?:[+-]?\d*\.?\d+)%?';

$comma_syntax = '/rgba?$\s*' . join( '\s*,\s*', array_fill( 0, 3, $term ) ) . '\s*(?:,\s*' . $term . '\s*)?$/i';

// The `none` keyword is only allowed in modern (space-separated) syntax.

$term = '(?:(?:[+-]?\d*\.?\d+)%?|none)';

$space_syntax = '/rgba?$\s*' . join( '\s+', array_fill( 0, 3, $term ) ) . '\s*(?:\/\s*' . $term . '\s*)?$/i';

// Simplified: matches the sequence `rgb(*)` or `rgba(*)`.

$number_term = '(?:[+-]?\d*\.?\d+)%?';

$comma_syntax = '/rgba?$\s*' . implode( '\s*,\s*', array_fill( 0, 3, $number_term1 ) ) . '\s*(?:,\s*' . $number_term . '\s*)?$/i';

// The `none` keyword is only allowed in modern (space-separated) syntax.

$number_or_none_term = '(?:(?:[+-]?\d*\.?\d+)%?|none)';

$space_syntax = '/rgba?$\s*' . implode( '\s+', array_fill( 0, 3, $number_or_none_term ) ) . '\s*(?:\/\s*' . $number_or_none_term . '\s*)?$/i';

Fixed in 71e9916

Without this, assigning an `rgb()` or `rgba()` value to a CSS variable (e.g. `--my-color: rgb(255, 0, 0)`) was rejected because `$color_attr` was never set in the custom-property branch, leaving the open paren in the test string and tripping the disallowed-character check. Detect `rgb(`/`rgba(` in custom property values so the existing strict validation runs and structurally invalid colors continue to be rejected. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-authored-by: Weston Ruter <westonruter@gmail.com>

The `box-shadow` property accepts a color component, but it was missing from `$css_color_data_types` so values like `box-shadow: 0 0 5px rgb(0, 0, 0)` were stripped while equivalent hex/named colors were allowed. Add `box-shadow` to the list (with the existing entries grouped/reordered for readability) so RGB(A) colors are preserved alongside the structural validation that already rejects malformed values. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…lter_attr`. The single `$term` variable was reassigned with two different meanings — first a numeric term, then a numeric-or-`none` term — making the intent of each regex harder to follow. Rename to `$number_term` and `$number_or_none_term` so the legacy vs. modern syntax distinction is explicit at the point of use. Also switch the surrounding `join()` calls to `implode()` to match the prevailing convention in WordPress core PHP. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

t-hamano mentioned this pull request Feb 13, 2026

KSES: Add support for rgb(a) color. #3097

Closed

KSES: Add support for rgb(a) color

797ab0e

t-hamano force-pushed the fix/kses-allow-background-color branch from 3e19b4e to 797ab0e Compare February 13, 2026 11:33

westonruter reviewed Feb 14, 2026

View reviewed changes

Comment thread src/wp-includes/kses.php

Comment thread src/wp-includes/kses.php Outdated

t-hamano and others added 4 commits April 27, 2026 14:59

Remove unnecessary PHPDoc lines

c3b8ff0

Co-authored-by: Weston Ruter <westonruter@gmail.com>

Fix PHPCS Error

409cf7f

Co-authored-by: Weston Ruter <westonruter@gmail.com>

Merge branch 'trunk' into fix/kses-allow-background-color

555c705

Remove obsolete test cases for disallowed RGB(A) colors

e8eff13

westonruter reviewed Apr 27, 2026

View reviewed changes

Comment thread src/wp-includes/kses.php

westonruter reviewed Apr 27, 2026

View reviewed changes

t-hamano and others added 3 commits April 30, 2026 16:33

Merge branch 'trunk' into fix/kses-allow-background-color

4c87206

westonruter reviewed May 1, 2026

View reviewed changes

Comment thread tests/phpunit/tests/kses.php Outdated

Comment thread src/wp-includes/kses.php

Comment thread src/wp-includes/kses.php Outdated

t-hamano and others added 4 commits May 4, 2026 15:29

Update comment

b5e0dc0

Co-authored-by: Weston Ruter <westonruter@gmail.com>

Update comment

cdca55f

Co-authored-by: Weston Ruter <westonruter@gmail.com>

Coding Standards: Remove trailing whitespace in safecss_filter_attr…

f1b1d2e

… comment. Fixes a `Squiz.WhiteSpace.SuperfluousWhitespace.EndLine` PHPCS violation introduced by an earlier comment edit on this branch. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

westonruter reviewed May 5, 2026

View reviewed changes

t-hamano and others added 4 commits May 5, 2026 17:38

Update PHPDoc

0c6d2d3

Co-authored-by: Weston Ruter <westonruter@gmail.com>


	$gradient_attr = str_contains( $css_value, '-gradient(' );
	$color_attr = (bool) preg_match( '/\brgba?\(/i', $css_value );

Conversation

t-hamano commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Feb 13, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

t-hamano commented Feb 13, 2026 •

edited

Loading

github-actions Bot commented Feb 13, 2026 •

edited

Loading