Duotone: Output duotone presets per block #48374

scruffian · 2023-02-23T17:56:02Z

What?

This is another angle on #48291.

If we remove the code that outputs the presets, how can we still use presets? This PR suggests saving the presets to an array and then outputting them in the footer. We do this for both block supports, and filters that are defined in the theme.json.

Why?

Outputting unused presets creates extra output that we don't need.

How?

Create a new array called $duotone_presets.
When we render a block we check if the block has a duotone filter applied - if it does we save it to the new array.
We also check if the block has any filter settings in the theme.json - if it does then we also save this setting to the new array.
We then run an action on wp_footer which outputs all the used preset duotones.

Testing Instructions

Switch to a theme that has a duotone setting in its theme.json. (eg. Skatepark)
Check that the images all have a duotone applied in the front end.
Add an image to a post and select a preset duotone filter that is different to the main one for the theme.
Check that this image also has a preset duotone filter applied in the frontend.
Check that only the used SVGs are output in the frontend

Notes

Still to do:

Find a way to cache the theme json settings so we dont recalculate on every render
Combine the two wp_footer actions into one but saving custom duotones in the WP_Duotone class.

github-actions · 2023-02-23T18:27:12Z

Flaky tests detected in 50a9763fe0b5a7ec1bea88dd3950cd2d6c6c3dd8.
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/4284866549
📝 Reported issues:

[Flaky Test] default to the only existing classic menu if there are no block menus #48033 in /test/e2e/specs/editor/blocks/navigation.spec.js

jeryj · 2023-02-23T19:47:14Z

lib/block-supports/duotone.php

+			 */
+			printf(
+				'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
+				wp_json_encode( $selector )


$selector isn't defined in this function. Not sure what it's needed for, but it appears to already run through the footer action above even if it's a global style, so maybe this Safari stuff isn't needed here?

jeryj · 2023-02-23T20:25:11Z

I've tested this on TT3 with the Sherbert theme on a single post template with these images:

Featured image with duotone from global styles
gutenberg default duotone
custom selected duotone
Theme default duotone
Plain image
Unset duotone image

It's working in all these cases and only the duotones used on that post are being output in the <svg> footer definitions.

scruffian · 2023-02-24T10:02:40Z

It's working in all these cases and only the duotones used on that post are being output in the footer definitions.

I think there must be something wrong with your testing setup - it shouldn't be working for all these cases yet!

scruffian · 2023-02-24T11:32:20Z

lib/block-supports/duotone.php

+	}
+);
+
+function gutenberg_save_duotone_preset_svgs( $block_content, $block ) {


This runs for every block we render. That might be inefficient...

scruffian · 2023-02-24T15:09:37Z

lib/compat/wordpress-6.2/get-global-styles-and-settings.php

-	$styles_variables = '';
-	if ( in_array( 'variables', $types, true ) ) {
+
+	// We need to do this first for duotone.


Elucidate this!

jeryj · 2023-02-24T22:25:27Z

@scruffian - I branched off of this since I was doing one gigantic refactor and couldn't split it into smaller commits. It is working though (I think)! 🎉 #48436

If you think it's a good approach, feel free to merge it into this branch and keep going with it.

'unset' is a valid attribute to pass, but we don't want to output any svg definition for it. Checking for unset makes sure we're dealing with a valid slug that should output a corresponding svg definition.

…ally rendered

…red blocks I'm sorry this is in one giant commit. The general idea is: - On wp_loaded - save all duotone presets defined in merged global styles - save all block names and their corresponding duotone slug info - on block render, check if the block: - is one of the blocks using duotone via global styles - has any defined duotone styles - if so, add it to the duotone_output array to have its duotone info output

jeryj · 2023-03-10T15:54:04Z

Duotone received a large refactor and has changed too much. Closing in favor of #48995

scruffian · 2023-03-10T22:03:47Z

Closing in favor of #48374

Do you mean #48995?

jeryj · 2023-03-10T22:24:52Z

haha - yes! Good catch!

scruffian self-assigned this Feb 23, 2023

jeryj reviewed Feb 23, 2023

View reviewed changes

scruffian commented Feb 24, 2023

View reviewed changes

scruffian and others added 13 commits February 27, 2023 15:20

Duotone: Output presets in block supports

b93775c

remove filters

5d16d5c

Check if duotone is unset before adding to duotone presets global

8517e27

'unset' is a valid attribute to pass, but we don't want to output any svg definition for it. Checking for unset makes sure we're dealing with a valid slug that should output a corresponding svg definition.

save the presets that are used in theme.json for blocks that are actu…

9c29e6a

…ally rendered

rename function

859ee9b

reability

f42f769

only output the duotone presets that are used

f2d9165

remove unused code

05f1fd4

output custom duotones still

3b0511b

reset changes to theme json class

5bb17b8

rename action to filter

8262c82

fixes for classic themes

4b10ea2

jeryj force-pushed the update/output-duotone-presets-per-block branch from 50a9763 to 00d3dac Compare February 27, 2023 21:21

scruffian mentioned this pull request Mar 8, 2023

Duotone: Only output Duotone filters that are used #48291

Closed

jeryj mentioned this pull request Mar 10, 2023

Duotone: Limit SVG filter output to used filters #48995

Merged

jeryj closed this Mar 10, 2023

scruffian deleted the update/output-duotone-presets-per-block branch March 10, 2023 22:03

jeryj mentioned this pull request Mar 15, 2023

Duotone: Limit SVG filter output to used filters #49103

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Duotone: Output duotone presets per block #48374

Duotone: Output duotone presets per block #48374

scruffian commented Feb 23, 2023 •

edited

Loading

github-actions bot commented Feb 23, 2023 •

edited

Loading

jeryj Feb 23, 2023

jeryj commented Feb 23, 2023

scruffian commented Feb 24, 2023

scruffian Feb 24, 2023

scruffian Feb 24, 2023

jeryj commented Feb 24, 2023

jeryj commented Mar 10, 2023 •

edited

Loading

scruffian commented Mar 10, 2023

jeryj commented Mar 10, 2023

Duotone: Output duotone presets per block #48374

Duotone: Output duotone presets per block #48374

Conversation

scruffian commented Feb 23, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Notes

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

jeryj Feb 23, 2023

Choose a reason for hiding this comment

jeryj commented Feb 23, 2023

scruffian commented Feb 24, 2023

scruffian Feb 24, 2023

Choose a reason for hiding this comment

scruffian Feb 24, 2023

Choose a reason for hiding this comment

jeryj commented Feb 24, 2023

jeryj commented Mar 10, 2023 • edited Loading

scruffian commented Mar 10, 2023

jeryj commented Mar 10, 2023

scruffian commented Feb 23, 2023 •

edited

Loading

github-actions bot commented Feb 23, 2023 •

edited

Loading

jeryj commented Mar 10, 2023 •

edited

Loading