Duotone: Use the style engine to generate CSS for Duotone #48281

scruffian · 2023-02-21T12:34:14Z

What?

This changes the custom approach for block supports to use the style engine. This means that the CSS is output as part of the block supports CSS block rather than in its own inline style.

Why?

It's better to use the same code to generate CSS as its more efficient. It also will be slightly more performant as the output on the client is a little smaller.

How?

Using gutenberg_style_engine_get_stylesheet_from_css_rules

Testing Instructions

Apply this core patch: wp_kses: Add filter to the list of css_url_data_types wordpress-develop#4108
Add an image block to a post
Add a duotone filter to the image block
Open the post in the frontend and confirm that the image block has the correct filter applied.

Testing Instructions for Keyboard

Check that the image has CSS applied to it in the form:
filter: url('#wp-duotone-*') !important;

Note

Requires this core patch: WordPress/wordpress-develop#4108. I don't see a way to get this fix in to Gutenberg before its in core...

github-actions · 2023-02-21T13:07:44Z

Flaky tests detected in e1ab155.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4240273800
📝 Reported issues:

[Flaky Test] results in two remaining blocks and positions the caret at the end of the second block #39805 in specs/editor/various/block-deletion.test.js

getdave · 2023-02-21T13:08:56Z

I don't see a way to get this fix in to Gutenberg before its in core...

Agreed. This allow urls declaration isn't filterable.

lib/block-supports/duotone.php

…tone format

getdave · 2023-02-21T13:44:54Z

lib/experimental/kses.php

+ * @param string $css_test_string The CSS to test.
+ */
+function allow_filter_in_styles( $allow_css, $css_test_string ) {
+	if ( strpos( $css_test_string, "filter: url('#wp-duotone" ) !== false ) {


Question: does this mean I could create a CSS string that included "filter: url('#wp-duotone" in order to allow any CSS rule to bypass the filtering rules.

Assume we'll want to ditch this asap in order to get the Core patch landed?

Yeah we should

yes, but it's not in order to get the core patch landed. the core patch should land for the reasons described by @scruffian in the ticket. This is here so we can work on this without core trunk

In core, when a url attribute is used, the value is parsed with some more complex regex (here: https://github.com/WordPress/wordpress-develop/blob/365efb13c2f2f9de572e53a4c115a0d59232e54f/src/wp-includes/kses.php#L2525). Would it be safer to copy + paste the regexes from there so that we can ensure the same level of parsing occurs for the the filter: rule?

Suggested change

if ( strpos( $css_test_string, "filter: url('#wp-duotone" ) !== false ) {

if ( preg_match( "^filter: url$'#wp-[-a-zA-Z0-9]+'$;$", $css_test_string ) ) {

Might be a bit safer to use a a regex and only allow 100% correct urls rather than just a strpos check

That sounds like an elegant way to do it 👍

I didn't test that regex, so it might need some tweaks if it isn't processing line by line or newlines have already been stripped.

Ah, good point. I think the string in preg_match will need a/ delimiter at the beginning and end, too, to flag that it's a pattern, but overall I think that's a better and simpler way to do it than copying the more complex regex from core.

Hm with a good preg match we could in theory even live with this in the plugin for a while.

Added in e1ab155

lib/block-supports/duotone.php

…er in css string

lib/block-supports/duotone.php

scruffian · 2023-02-22T09:05:05Z

Thanks for the fixes @draganescu, I'm happy for this to merge if you are :)

draganescu

Let's merge this and see where it gets us!

…()`. CSS filters can accept `url()` as a reference to an SVG filter element: {{{ filter: url( file.svg#filter-element-id ); }}} This commit allows for that syntax to be used in inline CSS. Original PR from Gutenberg repository: * [WordPress/gutenberg#48281 #48281 Duotone: Use the style engine to generate CSS for Duotone] References: * [https://developer.mozilla.org/en-US/docs/Web/CSS/filter MDN Web Docs: filter()] * [https://developer.mozilla.org/en-US/docs/Web/CSS/url MDN Web Docs: url()] Follow-up to [44136], [52049]. Props scruffian, jeryj, ironprogrammer, azaozz, hellofromTonya, SergeyBiryukov. Fixes #57780. Built from https://develop.svn.wordpress.org/trunk@55564 git-svn-id: http://core.svn.wordpress.org/trunk@55076 1a063a9b-81f0-0310-95a4-ce76da25c4cd

…()`. CSS filters can accept `url()` as a reference to an SVG filter element: {{{ filter: url( file.svg#filter-element-id ); }}} This commit allows for that syntax to be used in inline CSS. Original PR from Gutenberg repository: * [WordPress/gutenberg#48281 #48281 Duotone: Use the style engine to generate CSS for Duotone] References: * [https://developer.mozilla.org/en-US/docs/Web/CSS/filter MDN Web Docs: filter()] * [https://developer.mozilla.org/en-US/docs/Web/CSS/url MDN Web Docs: url()] Follow-up to [44136], [52049]. Props scruffian, jeryj, ironprogrammer, azaozz, hellofromTonya, SergeyBiryukov. Fixes #57780. Built from https://develop.svn.wordpress.org/trunk@55564 git-svn-id: https://core.svn.wordpress.org/trunk@55076 1a063a9b-81f0-0310-95a4-ce76da25c4cd

ironprogrammer · 2023-03-27T22:42:07Z

For visibility: Core support for URLs in CSS filter has been added to 6.3 trunk (also see WordPress/wordpress-develop#4108 (comment)).

scruffian · 2023-03-30T15:20:24Z

I created a follow to remove the filter but I think we'll need it for a while yet: #49488

Duotone: Use the style engine to generate CSS for Duotone

08d51b9

scruffian added the [Package] Style Engine /packages/style-engine label Feb 21, 2023

scruffian requested review from ajlende and andrewserong February 21, 2023 12:34

scruffian self-assigned this Feb 21, 2023

scruffian requested a review from spacedmonkey as a code owner February 21, 2023 12:34

getdave reviewed Feb 21, 2023

View reviewed changes

lib/block-supports/duotone.php Outdated Show resolved Hide resolved

filter for kses to allow filter css rule with url if url is of wp-duo…

8dddbd2

…tone format

getdave reviewed Feb 21, 2023

View reviewed changes

andrewserong reviewed Feb 21, 2023

View reviewed changes

lib/block-supports/duotone.php Outdated Show resolved Hide resolved

comment for how style engine call works and match expression for filt…

e1ab155

…er in css string

scruffian commented Feb 22, 2023

View reviewed changes

lib/block-supports/duotone.php Outdated Show resolved Hide resolved

Update lib/block-supports/duotone.php

c58213c

draganescu approved these changes Feb 22, 2023

View reviewed changes

draganescu merged commit 2fbe9a0 into trunk Feb 22, 2023

draganescu deleted the update/use-style-engine-for-duotone-block-supports branch February 22, 2023 12:56

github-actions bot added this to the Gutenberg 15.3 milestone Feb 22, 2023

DaisyOlsen added the [Type] Enhancement A suggestion for improvement. label Feb 22, 2023

scruffian mentioned this pull request Mar 30, 2023

KSES: Remove the filter that makes filter a safe attribute #49488

Open

This was referenced Jul 5, 2023

Use Duotone Filters to Change Color Effects - Lesson Plan WordPress/Learn#715

Closed

Applying Duotone Filters to Change Color Effects - Workshop WordPress/Learn#513

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Duotone: Use the style engine to generate CSS for Duotone #48281

Duotone: Use the style engine to generate CSS for Duotone #48281

scruffian commented Feb 21, 2023 •

edited

Loading

github-actions bot commented Feb 21, 2023 •

edited

Loading

getdave commented Feb 21, 2023

getdave Feb 21, 2023

scruffian Feb 21, 2023

draganescu Feb 21, 2023

andrewserong Feb 21, 2023

ajlende Feb 21, 2023

andrewserong Feb 21, 2023

ajlende Feb 21, 2023

andrewserong Feb 21, 2023

draganescu Feb 22, 2023

draganescu Feb 22, 2023

scruffian commented Feb 22, 2023

draganescu left a comment

ironprogrammer commented Mar 27, 2023

scruffian commented Mar 30, 2023

	if ( strpos( $css_test_string, "filter: url('#wp-duotone" ) !== false ) {
	if ( preg_match( "^filter: url\('#wp-[-a-zA-Z0-9]+'\);$", $css_test_string ) ) {

Duotone: Use the style engine to generate CSS for Duotone #48281

Duotone: Use the style engine to generate CSS for Duotone #48281

Conversation

scruffian commented Feb 21, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Note

github-actions bot commented Feb 21, 2023 • edited Loading

getdave commented Feb 21, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scruffian commented Feb 22, 2023

draganescu left a comment

Choose a reason for hiding this comment

ironprogrammer commented Mar 27, 2023

scruffian commented Mar 30, 2023

scruffian commented Feb 21, 2023 •

edited

Loading

github-actions bot commented Feb 21, 2023 •

edited

Loading