Group block's generated CSS are redundant. #41434
Description
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:
<style>.wp-container-1 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: center;}.wp-container-1 > * { margin: 0; }</style>
<style>.wp-container-3 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;justify-content: flex-end;align-items: center;}.wp-container-3 > * { margin: 0; }</style>
<style>.wp-container-4 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;justify-content: space-between;align-items: center;}.wp-container-4 > * { margin: 0; }</style>
<style>.wp-container-5 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-5 > .alignwide { max-width: 1000px;}.wp-container-5 .alignfull { max-width: none; }.wp-container-5 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-5 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-5 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-5 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-5 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-6 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-6 > .alignwide { max-width: 1000px;}.wp-container-6 .alignfull { max-width: none; }.wp-container-6 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-6 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-6 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-6 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-6 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-7 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-7 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-7 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-7 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-7 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-8 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-8 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-8 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-8 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-8 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-9 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: nowrap;align-items: center;}.wp-container-9 > * { margin: 0; }</style>
<style>.wp-container-10 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-10 > .alignwide { max-width: 1000px;}.wp-container-10 .alignfull { max-width: none; }.wp-container-10 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-10 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-10 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-10 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-10 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-11 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-11 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-11 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-11 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-11 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-12 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-12 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-12 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-12 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-12 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-13 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-13 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-13 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-13 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-13 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-14 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: nowrap;align-items: center;}.wp-container-14 > * { margin: 0; }</style>
<style>.wp-container-15 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-15 > .alignwide { max-width: 1000px;}.wp-container-15 .alignfull { max-width: none; }.wp-container-15 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-15 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-15 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-15 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-15 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-16 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-16 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-16 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-16 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-16 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-17 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-17 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-17 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-17 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-17 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-18 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-18 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-18 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-18 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-18 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-19 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: nowrap;align-items: center;}.wp-container-19 > * { margin: 0; }</style>
<style>.wp-container-20 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-20 > .alignwide { max-width: 1000px;}.wp-container-20 .alignfull { max-width: none; }.wp-container-20 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-20 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-20 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-20 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-20 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-21 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-21 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-21 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-21 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-21 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-22 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-22 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-22 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-22 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-22 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-23 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;justify-content: space-between;align-items: center;}.wp-container-23 > * { margin: 0; }</style>
<style>.wp-container-24 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-24 > .alignwide { max-width: 1000px;}.wp-container-24 .alignfull { max-width: none; }.wp-container-24 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-24 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-24 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-24 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-24 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-25 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;justify-content: space-between;align-items: center;}.wp-container-25 > * { margin: 0; }</style>
<style>.wp-container-26 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-26 > .alignwide { max-width: 1000px;}.wp-container-26 .alignfull { max-width: none; }.wp-container-26 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-26 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-26 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-26 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-26 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
<style>.wp-container-27 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-27 > .alignwide { max-width: 1000px;}.wp-container-27 .alignfull { max-width: none; }.wp-container-27 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-27 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-27 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-27 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-27 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>
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 different wp-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 mode
We 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:
.wp-block-group--row {
display: flex;
}
.wp-block-group--wrap {
flex-wrap: wrap;
}
.wp-block-group--justify-center {
justify-content: center;
}
...
<div class="wp-block-group wp-block-group--row wp-block-group--wrap wp-block-group--justify-center">...</div>
Styles for alignleft, alignright, aligncenter
If we look at the generated CSS:
.wp-container-11 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-11 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-11 > .aligncenter { margin-left: auto !important; margin-right: auto !important; } ...
.wp-container-12 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-12 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-12 > .aligncenter { margin-left: auto !important; margin-right: auto !important; } ...
.wp-container-13 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-13 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-13 > .aligncenter { margin-left: auto !important; margin-right: auto !important; } ...
Each generated CSS for alignleft, alignright, and aligncenter are 100% identic. And it seems there is no way to customize the styles (e.g. the 2em margin) using theme.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 width
We can define a global CSS in the default wp-block-library CSS file. For example:
.wp-block-group > * {
max-width: var(--content-size);
margin-left: auto !important;
margin-right: auto !important;
}
.wp-block-group > .alignwide {
max-width: var(--wide-size);
}
.wp-block-group > * + * {
margin-top: var(--block-gap);
}
<div class="wp-block-group" style="--content-size:1000px;--wide-size:1200px;--block-gap:1.5em;">...</div>
Using custom properties, we don't need to generate new CSS on each group block.