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

t-hamano · 2022-08-16T15:19:40Z

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 · 2022-08-16T15:20:02Z

Hi @t-hamano! 👋

Thank you for your contribution to WordPress! 💖

It looks like this is your first pull request to wordpress-develop. Here are a few things to be aware of that may help you out!

No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description.

Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making.

More information about how GitHub pull requests can be used to contribute to WordPress can be found in this blog post.

Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook.

If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook.

The Developer Hub also documents the various coding standards that are followed:

Thank you,
The WordPress Project

peterwilsoncc

I've added a few notes inline.

src/wp-includes/kses.php

peterwilsoncc · 2022-08-16T23:59:18Z

src/wp-includes/kses.php


+		if ( $found && $rgba_attr ) {
+			$css_value = trim( $parts[1] );
+			if ( preg_match( '/^rgba\((\d{1,3}%?),\s*(\d{1,3}%?),\s*(\d{1,3}%?),\s*(\d*(?:\.\d+)?)\)$/', $css_value ) ) {


Is it possible to accept both rgb and rgba? It will be super confusing to people as to why one is accepted but not the other. rgb now accepts a forth argument for transparency so they're essentially the same function. See the MDN color docs.

This will require some changes to the test_safecss_filter_attr_filtered data provider to promote rgb to be always allowed.

peterwilsoncc · 2022-08-17T00:04:02Z

tests/phpunit/tests/kses.php

+			array(
+				'css'      => 'background-color: rgba(0, 0, 0, .1)',
+				'expected' => 'background-color: rgba(0, 0, 0, .1)',
+			),


There's an test below under the comment "RGBA color values are not allowed." that will now fail.

It would be good to test for some malformed values too.

I am thinking about regular expression and test cases, am I correct in this perception?

✅ color: rgba(0, 0, 0 / 0.1)
❌ color: rgba(0, 0, 0/ 0.1) (don't allow no space before slash)
❌ color: rgba(0, 0, 0 /0.1) (don't allow no space after slash)

✅ color: rgba(0, 0, 0, 0)
✅ color: rgba(0,0,0,0) (allow no space after comma)
❌ color: rgba(0 , 0, 0, 0) (don't allow space before comma)
❌ color: rgba(0, 0, 0, 0) (don't allow multiple spaces after comma *it would appear as single space on the comments)

✅ color: rgba(100%, 0, 0, 0)
❌ color: rgba(100px, 0, 0, 0) (don't allow units other than %)
❌ color: rgba(red, 0, 0, 0) (don't allow string value)

According to MDN, I believe the same rules can be applied to both rgb() and rgba().

I am thinking about regular expression and test cases, am I correct in this perception?

Yes, you are. These are the sort of tests I was suggesting.

You may also wish to include something containing either a " or a ' as an attempt to close the style tag. The expectation is that kses would return an empty string.

Thanks so much.

t-hamano · 2022-08-18T01:58:12Z

I have added support for RGB and allowed some properties, and updated regular expressions.
And I have tried to cover as many variations of the test as possible. Is this enough?

peterwilsoncc

I've added a few more notes inline.

There's a few cases in tests in which the value is valid but poorly formatted that are getting dropped. These ought to be allowed.

I've made a suggestion for much simpler regex too.

peterwilsoncc · 2022-08-18T03:23:45Z

src/wp-includes/kses.php

+		'border-left-color',
+		'border-top-color',
+
+		'background-color',


Also don't forget the shorthand

background

border

border-(left|right|top|bottom)

That's assuming support :)

peterwilsoncc · 2022-08-18T03:27:32Z

tests/phpunit/tests/kses.php

+				'expected' => '',
+			),
+			array(
+				'css'      => 'border-right-color: rgba(0,  0, 0, 0)',


I'd expect this to pass and be retained. The format is a bit ugly but it's valid https://jsbin.com/viripuz/1/edit?css,output

peterwilsoncc · 2022-08-18T04:03:35Z

src/wp-includes/kses.php


+		if ( $found && $color_attr ) {
+			$css_value = trim( $parts[1] );
+			if ( preg_match( '/^rgb[a]?\((\d{1,3}%?),\s?(\d{1,3}%?),\s?(\d{1,3}%?)(,\s?|\s\/\s)(\d*(?:\.\d+)?)\)$/', $css_value ) ) {


It might be possible to simplify the regex a lot here.

The goal of kses is to make the HTML (and CSS it contains) safe rather than valid. It's nice if it's valid but that's a problem for other parts of the code base.

You might be able to use /^rgba?$[\s\d%\/.,]+$$/ to limit the user to the allowed characters

t-hamano · 2022-08-18T15:08:45Z

I have relaxed the regex rules and updated the existing tests.
With the relaxed rules, should we reduce the number of test cases a little more?

t-hamano · 2022-11-30T13:41:56Z

The problem this PR is trying to solve appears to have been fixed by Changeset 54117.
Therefore, I would like to close this PR.

t-hamano · 2025-07-31T08:45:31Z

The problem this PR is trying to solve appears to have been fixed by Changeset 54117.

I realized this wasn't correct. This changeset only allowed CSS variables, so RGB(A) colors are still not allowed. We will reopen this PR and resume work on it.

github-actions · 2025-07-31T08:45:42Z

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, peterwilsoncc.

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

github-actions · 2025-07-31T08:45:42Z

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, peterwilsoncc.

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

github-actions · 2025-07-31T09:06:19Z

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

The Plugin and Theme Directories cannot be accessed within Playground.
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.

t-hamano · 2025-07-31T09:37:38Z

I started by using the equivalent regular expression from the colored_parse_rgba_string() function. This logic should work well for both comma and space value separators. I also overhauled the tests to test as many patterns as possible without overdoing it.

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

Oh, I re-forked the wordpress-develop repo and it seems all my submitted open PRs were closed 😂 I submitted a new PR that is equivalent to this one. #10923

KSES: Add support for rgba background-color.

5d2801f

Fix lint error

692f37a

peterwilsoncc requested changes Aug 17, 2022

View reviewed changes

t-hamano changed the title ~~KSES: Add support for rgba background-color.~~ KSES: Add support for rgb(a) color. Aug 17, 2022

support rgb color

c9b2fb5

peterwilsoncc reviewed Aug 18, 2022

View reviewed changes

t-hamano added 3 commits August 19, 2022 00:05

Add missing supports

08e1e31

Relaxed rules for regular expression

8d49e8f

Update tests

af88ca5

t-hamano closed this Nov 30, 2022

t-hamano reopened this Jul 31, 2025

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

b1dc05a

Refactoring regular expressions and tests

97fe09e

t-hamano requested a review from peterwilsoncc August 5, 2025 12:21

t-hamano closed this by deleting the head repository Feb 13, 2026

t-hamano mentioned this pull request Feb 13, 2026

KSES: Add support for rgb(a) color #10923

Open

Conversation

t-hamano commented Aug 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 16, 2022

Uh oh!

peterwilsoncc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

peterwilsoncc Aug 16, 2022

Choose a reason for hiding this comment

Uh oh!

peterwilsoncc Aug 17, 2022

Choose a reason for hiding this comment

Uh oh!

t-hamano Aug 17, 2022

Choose a reason for hiding this comment

Uh oh!

peterwilsoncc Aug 17, 2022

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Aug 18, 2022

Uh oh!

peterwilsoncc left a comment

Choose a reason for hiding this comment

Uh oh!

peterwilsoncc Aug 18, 2022

Choose a reason for hiding this comment

Uh oh!

peterwilsoncc Aug 18, 2022

Choose a reason for hiding this comment

Uh oh!

peterwilsoncc Aug 18, 2022

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Aug 18, 2022

Uh oh!

t-hamano commented Nov 30, 2022

Uh oh!

t-hamano commented Jul 31, 2025

Uh oh!

github-actions bot commented Jul 31, 2025

Uh oh!

github-actions bot commented Jul 31, 2025

Uh oh!

github-actions bot commented Jul 31, 2025

Test using WordPress Playground

Some things to be aware of

Uh oh!

t-hamano commented Jul 31, 2025

Uh oh!

t-hamano commented Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

t-hamano commented Aug 16, 2022 •

edited

Loading