Gallery: register styles with style engine #43070

ramonjd · 2022-08-09T00:11:48Z

Depends on:

What?

Update gallery to use style engine enqueuing, and also WP_HTML_Tag_Processor to add the unique class.

Why?

To batch styles in one style tag.
Also, gutenberg_enqueue_block_support_styles() will soon be deprecated.

Testing Instructions

Since https://core.trac.wordpress.org/ticket/56353 WordPress supports CSS custom vars. It will be shipped with 6.1.

For sites running < 6.1 Gutenberg allows specific CSS properties only. See: #43071

Create a new gallery, add your favourite holiday pics.
Apply a block gap value to your gallery and publish!
Check that your gallery appears as you'd expect it to on the frontend, and that it has the following styles (with your block gap value):

<style id='block-supports-inline-css'>
/* ...some styles */
.wp-block-gallery.wp-block-gallery-1 {
	--wp--style--unstable-gallery-gap: 107px;
	gap: 107px;
}
/* ...some styles */
</style>

Test in classic and block themes.

ramonjd · 2022-08-11T02:50:00Z

packages/block-library/src/gallery/index.php

+		),
+	);
+
+	gutenberg_style_engine_get_stylesheet_from_css_rules(


I think we might have to come up with a way to ensure these styles are printed after the layout styles:

See:

Lower the priority of the gallery gap css so it loads after the block layout css #41423

cc @glendaviesnz

Following the testing in #41423, it looks like the fallback styling rules aren't being output on a classic theme for me (TwentyTwentyOne), so if I add the following to my theme's css, it doesn't affect the gallery gap:

html { --wp--style--gallery-gap-default: 37px; }

From a bit of introspection, it appears that the fallback rules in $fallback_gap are being stripped in WP 6.0, as it's a pretty complex value, and the gutenberg_safecss_filter_attr_allow_css_6_1 function here hasn't been updated to reflect the final version in 6.1 on these lines: https://github.com/WordPress/wordpress-develop/blob/2b4d385298504d412e9f0dea2e7019d53463c705/src/wp-includes/kses.php#L2508-L2512

If I copy over that preg_replace line to the Gutenberg function, it appears that the style output works correctly, so we might need to land another backport of a backport before we can go with this PR?

I'll put up a PR to backport that line.

ramonjd · 2022-09-27T05:50:27Z

Interesting...

Seeing duplicate comments in the block supports inline CSS

<style id='core-block-supports-inline-css'>
/**
 * Core styles: block-supports
 */

/**
 * Core styles: block-supports
 */

Might mean that the hook callback is running twice

👀

andrewserong

Thanks for keeping this one current @ramonjd! It's mostly working, but I ran into an issue with fallback gap on classic themes. I think it's uncovered a missing backport of allowed css functions in Gutenberg, but I've left a comment where we'll likely need to follow-up there.

andrewserong · 2022-10-14T03:08:44Z

lib/compat/wordpress-6.1/script-loader.php

 * @param string $style String containing the CSS styles to be added.
 * @param int    $priority To set the priority for the add_action.
 */
 function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) {
+	_deprecated_function( __FUNCTION__, '6.1' );


Should we remove this deprecation notice since it didn't make it into 6.1, and instead add it back in once we're ready to start adding in 6.2 versions of these functions?

Oh yeah 🤦 This PR is old.

Will do, thank you!

Looks like there's a wordpress-6.2/script-loader.php file now. I could move it there and keep the notice, and bump it to 6.2

andrewserong · 2022-10-14T03:46:25Z

packages/block-library/src/gallery/index.php

+		),
+	);
+
+	gutenberg_style_engine_get_stylesheet_from_css_rules(


Following the testing in #41423, it looks like the fallback styling rules aren't being output on a classic theme for me (TwentyTwentyOne), so if I add the following to my theme's css, it doesn't affect the gallery gap:

html { --wp--style--gallery-gap-default: 37px; }

From a bit of introspection, it appears that the fallback rules in $fallback_gap are being stripped in WP 6.0, as it's a pretty complex value, and the gutenberg_safecss_filter_attr_allow_css_6_1 function here hasn't been updated to reflect the final version in 6.1 on these lines: https://github.com/WordPress/wordpress-develop/blob/2b4d385298504d412e9f0dea2e7019d53463c705/src/wp-includes/kses.php#L2508-L2512

If I copy over that preg_replace line to the Gutenberg function, it appears that the style output works correctly, so we might need to land another backport of a backport before we can go with this PR?

ramonjd · 2022-10-14T04:03:20Z

If I copy over that preg_replace line to the Gutenberg function, it appears that the style output works correctly, so we might need to land another backport of a backport before we can go with this PR?

Great sleuthing, thanks @andrewserong

I'll do the backport in another PR since it's bit separate and come back and test the scenario.

I appreciate the test! 🙇

andrewserong · 2022-10-14T04:24:29Z

I'll do the backport in another PR since it's bit separate and come back and test the scenario.

Oh, thanks! I've opened up a backport PR already in #44962 — I mightn't get a chance to test it properly today (I just copy + pasted and hoped for the best for the moment), so might leave it until next week to try to get it merged, if it isn't too urgent

ramonjd · 2022-10-14T07:07:20Z

Oh, thanks! I've opened up a backport PR already in #44962 — I mightn't get a chance to test it properly today (I just copy + pasted and hoped for the best for the moment), so might leave it until next week to try to get it merged, if it isn't too urgent

Merged!

Thanks a lot for the quick PR

Registering gallery styles with style engine

…ainer

…er.php, so we can formally deprecate the function in 6.2

glendaviesnz · 2022-10-25T23:15:35Z

I think we might have to come up with a way to ensure these styles are printed after the layout styles

The styles seemed to work ok for me on Classic themes. I think #41015 removed the need to worry about the priority.

This tested pretty well for me. The only thing I noticed is that setting the gap via either the deprecated --gallery-block--gutter-size or --wp--style--gallery-gap-default in a classic theme applied the gap in the frontend but not in the editor, but it does that for me on trunk as well, so don't think it is related to this PR. Do you also see this on trunk?

ramonjd · 2022-10-26T22:23:18Z

The only thing I noticed is that setting the gap via either the deprecated --gallery-block--gutter-size or --wp--style--gallery-gap-default in a classic theme applied the gap in the frontend but not in the editor, but it does that for me on trunk as well, so don't think it is related to this PR. Do you also see this on trunk?

Thanks for testing @glendaviesnz

I activated 2021 theme, then added the following to ./style.css

:root {
--wp--style--gallery-gap-default: 22px;
--gallery-block--gutter-size:11px;
}

This indeed worked for the frontend, but not the editor.

I had to add the CSS to ./assets/css/style-editor.css to get it to work everywhere:

Is that expected. Which classic theme did you test with?

glendaviesnz · 2022-10-26T22:38:08Z

This indeed worked for the frontend, but not the editor.

I had to add the CSS to ./assets/css/style-editor.css to get it to work everywhere
Is that expected. Which classic theme did you test with?

Given that the likes of TwentyTwentyOne have lots of CSS vars in ./assets/css/style-editor.css I am picking we can assume it is normal to have to do that to get any extra vars to work in the editor, so let's leave it as that for now.

glendaviesnz

This tested well for me with block-based and classic themes.

Mamaduka · 2023-02-06T16:38:20Z

@ramonjd, is there a separate core ticket for deprecating wp_enqueue_block_support_styles?

andrewserong · 2023-02-06T21:52:19Z

@Mamaduka, I don't think there is a separate core ticket as far as I'm aware. @ramonjd isn't around at the moment, but I can open a trac ticket, I think I've got enough context to describe the intention here.

andrewserong · 2023-02-06T23:35:37Z

@Mamaduka @glendaviesnz I've opened up a trac ticket to flag the deprecation of the function: https://core.trac.wordpress.org/ticket/57647

The short version is: as of 6.2 all usage of wp_enqueue_block_support_styles will have been replaced with calls to the style engine, where styles are grouped together and output in a single style tag. Prior to using the style engine, the calls to wp_enqueue_block_support_styles resulted in excess style tags being output to the site frontend, along with redundant CSS rules.

As far as I can tell, we can't deprecate the function until after the JS packages update has happened, as that change will include the switch in the gallery block's index.php file reflected in this PR. That appears to be the last usage of wp_enqueue_block_support_styles, so once this change is backported, we should then be right to add in the _deprecated_function() call to deprecate the function. I'll open up a wordpress-develop PR so that the deprecation is ready for review once the JS packages are updated.

andrewserong · 2023-02-07T00:53:27Z

Update: I've opened up a PR to deprecate wp_enqueue_block_support_styles over in WordPress/wordpress-develop#4015 — I believe that one should only land after the JS packages update, if I'm following correctly 🙂

ramonjd added [Status] In Progress Tracking issues with work in progress [Block] Gallery Affects the Gallery Block - used to display groups of images [Package] Style Engine /packages/style-engine labels Aug 9, 2022

ramonjd self-assigned this Aug 9, 2022

ramonjd mentioned this pull request Aug 9, 2022

Style engine: permit wp custom CSS properties #43071

Merged

ramonjd added the [Status] Blocked Used to indicate that a current effort isn't able to move forward label Aug 9, 2022

ramonjd commented Aug 11, 2022

View reviewed changes

ramonjd force-pushed the update/gallery-register-styles-with-style-engine branch from 1fafece to 6ae3ebe Compare September 27, 2022 04:26

ramonjd marked this pull request as ready for review September 27, 2022 05:39

ramonjd requested review from spacedmonkey and geriux as code owners September 27, 2022 05:39

ramonjd requested a review from glendaviesnz September 27, 2022 05:40

ramonjd force-pushed the update/gallery-register-styles-with-style-engine branch 2 times, most recently from 4beea4f to 4a47f9e Compare October 14, 2022 02:29

andrewserong reviewed Oct 14, 2022

View reviewed changes

andrewserong mentioned this pull request Oct 14, 2022

Update 6.1 CSS filter to match core #44962

Merged

ramonjd mentioned this pull request Oct 14, 2022

CSS: backport the 6.1 Core kses regex changes to Gutenberg for safecss_filter_attr_allow_css #44961

Closed

ramonjd force-pushed the update/gallery-register-styles-with-style-engine branch from 90f577b to f5e9f2a Compare October 14, 2022 07:06

ramonjd added 5 commits October 26, 2022 08:04

Removing gutenberg_enqueue_block_support_styles

5eaf738

Registering gallery styles with style engine

Deprecate gutenberg_enqueue_block_support_styles

4f4c5b3

Remove enqueue option (deprecated)

a79f2e7

Use the WP_HTML_Tag_Processor to add the unique classname to the cont…

8f08972

…ainer

Move gutenberg_enqueue_block_support_styles wordpress-6.2/script-load…

84d1e7b

…er.php, so we can formally deprecate the function in 6.2

ramonjd force-pushed the update/gallery-register-styles-with-style-engine branch from f5e9f2a to 84d1e7b Compare October 25, 2022 21:04

glendaviesnz approved these changes Oct 26, 2022

View reviewed changes

ramonjd merged commit b54b0eb into trunk Oct 27, 2022

ramonjd deleted the update/gallery-register-styles-with-style-engine branch October 27, 2022 00:37

github-actions bot added this to the Gutenberg 14.5 milestone Oct 27, 2022

ramonjd mentioned this pull request Nov 18, 2022

Tracking: Add a Style Engine to manage rendering block styles #38167

Closed

25 tasks

priethor removed the [Status] In Progress Tracking issues with work in progress label Jan 11, 2023

Mamaduka mentioned this pull request Jan 17, 2023

Plugin: Backport PHP changes for WordPress 6.2 release #47187

Closed

85 tasks

andrewserong mentioned this pull request Feb 7, 2023

Deprecate wp_enqueue_block_support_styles WordPress/wordpress-develop#4015

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gallery: register styles with style engine #43070

Gallery: register styles with style engine #43070

ramonjd commented Aug 9, 2022 •

edited

Loading

ramonjd Aug 11, 2022 •

edited

Loading

andrewserong Oct 14, 2022 •

edited

Loading

andrewserong Oct 14, 2022

ramonjd commented Sep 27, 2022

andrewserong left a comment

andrewserong Oct 14, 2022

ramonjd Oct 14, 2022

ramonjd Oct 14, 2022

andrewserong Oct 14, 2022 •

edited

Loading

ramonjd commented Oct 14, 2022

andrewserong commented Oct 14, 2022

ramonjd commented Oct 14, 2022

glendaviesnz commented Oct 25, 2022

ramonjd commented Oct 26, 2022

glendaviesnz commented Oct 26, 2022 •

edited

Loading

glendaviesnz left a comment

Mamaduka commented Feb 6, 2023

andrewserong commented Feb 6, 2023

andrewserong commented Feb 6, 2023

andrewserong commented Feb 7, 2023

Gallery: register styles with style engine #43070

Gallery: register styles with style engine #43070

Conversation

ramonjd commented Aug 9, 2022 • edited Loading

What?

Why?

Testing Instructions

ramonjd Aug 11, 2022 • edited Loading

Choose a reason for hiding this comment

andrewserong Oct 14, 2022 • edited Loading

Choose a reason for hiding this comment

andrewserong Oct 14, 2022

Choose a reason for hiding this comment

ramonjd commented Sep 27, 2022

andrewserong left a comment

Choose a reason for hiding this comment

andrewserong Oct 14, 2022

Choose a reason for hiding this comment

ramonjd Oct 14, 2022

Choose a reason for hiding this comment

ramonjd Oct 14, 2022

Choose a reason for hiding this comment

andrewserong Oct 14, 2022 • edited Loading

Choose a reason for hiding this comment

ramonjd commented Oct 14, 2022

andrewserong commented Oct 14, 2022

ramonjd commented Oct 14, 2022

glendaviesnz commented Oct 25, 2022

ramonjd commented Oct 26, 2022

glendaviesnz commented Oct 26, 2022 • edited Loading

glendaviesnz left a comment

Choose a reason for hiding this comment

Mamaduka commented Feb 6, 2023

andrewserong commented Feb 6, 2023

andrewserong commented Feb 6, 2023

andrewserong commented Feb 7, 2023

ramonjd commented Aug 9, 2022 •

edited

Loading

ramonjd Aug 11, 2022 •

edited

Loading

andrewserong Oct 14, 2022 •

edited

Loading

andrewserong Oct 14, 2022 •

edited

Loading

glendaviesnz commented Oct 26, 2022 •

edited

Loading