-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Group block's generated CSS are redundant. #41434
Comments
Thanks for creating this issue and for the example code. 🙇 Using CSS vars is definitely something to look into. Folks are aware that the way layouts styles are expressed is a key area for improvement. In my view it's related to the following:
Deduplication is a big part of the effort. There have been some experiments, e.g., #38974 The most illuminating and recent update on work in this area is from @andrewserong over here |
Related #36135 |
As of #40875 much of the redundant The two next steps for this issue from my perspective (and following on from Ramon's earlier comment (#41434 (comment)) are:
|
Now that the layout refactor (#40875) and style engine optimisations (e.g. #42452) have been backported for WP 6.1, I'll close out this issue now. The main points that have been addressed:
While I'm sure there'll be additional optimisations to make for WP 6.2, as the large pain point has now been addressed, I think this is now in a good state to be closed. |
What problem does this address?
Each time we added a
core/group
block, WordPress will add a new<style>
tag for the block's CSS. If we added a lot of group blocks into the page, we can see that the generated CSS are actually very redundant.This is the generated CSS of a very basic layout page (header, blog posts loop, footer) taken from the TwentyTwentyTwo demo page:
There are a lot of similarities of each block CSS. If we have a more complex layout, this will become even worse.
If we have a loop block, for example the
Comments Query Loop
block, each comment item will have differentwp-container-#
class and have its own generated CSS, even though the styles of all comments are always same. If we have 30 comments in a page, there will be 30 identic generated CSS.What is your proposed solution?
Styles for
group
,row
,stack
modeWe can define the basic layout CSS in the default
wp-block-library
CSS file and use CSS class to represent the group block's layout mode. For example:Styles for
alignleft
,alignright
,aligncenter
If we look at the generated CSS:
Each generated CSS for
alignleft
,alignright
, andaligncenter
are 100% identic. And it seems there is no way to customize the styles (e.g. the2em
margin) usingtheme.json
or via filters or the block settings.So, there is no need to generate the same CSS every time a group block is added. We can define these CSS as global in the default
wp-block-library
CSS file.Styles for
alignwide
,alignfull
, inner blocks gap, and inner blocks widthWe can define a global CSS in the default
wp-block-library
CSS file. For example:Using custom properties, we don't need to generate new CSS on each group block.
The text was updated successfully, but these errors were encountered: