Numerous style tags in the body for wp:group.

[StevenDufresne]

I'm not sure if this is the best place to log this, we can close this since it's an upstream problem, but, Gutenberg is adding a lot of redundant <style> tags for wp:group blocks.

This issue is logged in Gutenberg:
WordPress/gutenberg#38127

Reference
https://github.com/WordPress/gutenberg/blob/efafb0a561c8ef2e171e6cb6430c3dbc00709bc0/lib/block-supports/layout.php#L133

The current solution is just to disable the flags via:

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );

However, that breaks our layout.

[ryelle]

IMO I don't think this is an issue for our repo — it would be nice if GB figured out a more concise way of outputting styles, but right now that's how the CSS is applied. Like you mentioned, it breaks the layout to remove them. I would vote to close this, since even if/when GB does fix it upstream, we'll inherit the fix - there shouldn't be any action needed on our part.

You might also want to keep an eye on the Style Engine work if you're interested in this: WordPress/gutenberg#38167

[fwazeter]

If you need a more immediate fix, I wrote up a little plugin here that replaces the the duplicate CSS with a singular piece of css code and keeps the layout not broken (it's basically a rewrite of the render layout support flags) - I have a few opinionated block styles loaded in that plugin, but you could just copy and require the 'block-supports' folder.

You'd probably want to change the name of the styles - they're located in the generate css styles file. Replace the $selector variables with whatever selector you want them to render as.

The only other required file is the array-get file, which loads wf_wp_array_get() function (which is just a duplicate of the intended to be private function _wp_array_get() function. Either include that file, or simply search / replace 'wf_wp_array_get()' with '_wp_array_get()'

[StevenDufresne]

@ryelle I'm ok with closing this issue for now.

@fwazeter Nice! I think in the short term we can probably live with the style tags instead of adding additional dependencies. If this were to roll on for much longer we could revisit. Thoughts?

[fwazeter]

Yeah, for something like this you'd only want to use it in a very removable context (e.g. copying the little code functions themselves and doing some version of that implementation) in a temporary utils folder or just as a debugger if you needed to look at the inheritance tree a bit cleaned up and not sort through all the <style> tags.

There's not really any performance affect the <style> tags have from the duplication (we've had production sites with load times under 300 ms with a hundred or so of those duplicates), biggest thing is if there's a reason you need to overwrite or change the CSS that is generated (e.g. change margin-left / right to margin-inline-start/end). Obviously it drives ye ole' OCD up a wall, but that's livable.

[StevenDufresne]

Yep. Agreed.

Closing for now. Thanks, ya'll.

[ddryo]

@StevenDufresne
Thanks for the following good tips.

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );

But, I tried adding this code but did not see any change on the editor.

I don't think removing the gutenberg_render_layout_support_flag has any effect.

I also got an undefined error when I tried the code 38127 in another issue.

Is there any other way to do this?

[StevenDufresne]

@ddryo Since Gutenberg's style engine is in active development, these fixes may no longer work. You may want to search for an existing issue or open up a new one in the Gutenberg repository. Best of luck!