Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Group block's generated CSS are redundant. #41434

Closed
daviedR opened this issue May 30, 2022 · 4 comments
Closed

Group block's generated CSS are redundant. #41434

daviedR opened this issue May 30, 2022 · 4 comments
Assignees
@andrewserong
Labels
[Block] Group Affects the Group Block (and row, stack and grid variants) CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Layout Layout block support, its UI controls, and style output. [Type] Enhancement A suggestion for improvement.

Comments

@daviedR
Copy link
Contributor

daviedR commented May 30, 2022 •
edited
Loading

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.
@ramonjd ramonjd added [Type] Enhancement A suggestion for improvement. [Block] Group Affects the Group Block (and row, stack and grid variants) CSS Styling Related to editor and front end styles, CSS-specific issues. labels Jun 2, 2022
@ramonjd
Copy link
Member

ramonjd commented Jun 2, 2022 •
edited
Loading

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

@ramonjd ramonjd mentioned this issue Jun 2, 2022
Closed
25 tasks
@andrewserong andrewserong mentioned this issue Jun 8, 2022
Merged
@mrfoxtalbot
Copy link

Related #36135

@andrewserong andrewserong self-assigned this Jul 12, 2022
@andrewserong
Copy link
Contributor

As of #40875 much of the redundant style tags for Group blocks that use default settings are now removed.

The two next steps for this issue from my perspective (and following on from Ramon's earlier comment (#41434 (comment)) are:

  • Treat remaining layout properties that are of a controlled set as presets linked by semantic classes (in order to reduce duplication) — this will be updated on the layout tracking issue (Tracking: extend layout options in Gutenberg #39336)
  • For those styles that still need to be output in a style tag at the individual block level, in later phases of the style engine, style de-duplication / consolidation might help with the final styles that need to be grouped together — this will be tracked on the style engine tracking issue (Tracking: Add a Style Engine to manage rendering block styles #38167)

@andrewserong andrewserong mentioned this issue Jul 12, 2022
Closed
30 tasks
This was referenced Jul 22, 2022
Merged
Merged
@skorasaurus skorasaurus mentioned this issue Aug 22, 2022
Closed
@andrewserong andrewserong added the [Feature] Layout Layout block support, its UI controls, and style output. label Sep 29, 2022
@andrewserong
Copy link
Contributor

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:

  • Common base layout rules are attached to a layout-type based classname (e.g. is-layout-flex, is-layout-flow, is-layout-container) and are only output once.
  • .wp-container-$id rules are now only output for those blocks that have non-default layout settings.
  • The style engine is now used to group together, combine rules, and optimise output so that layout styles are all included in only a single style tag.

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.

@mrfoxtalbot mrfoxtalbot mentioned this issue Sep 29, 2022
Closed
@andrewserong andrewserong mentioned this issue Nov 16, 2022
Closed
@cbirdsong cbirdsong mentioned this issue Aug 29, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andrewserong andrewserong

Labels
[Block] Group Affects the Group Block (and row, stack and grid variants) CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Layout Layout block support, its UI controls, and style output. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@daviedR @mrfoxtalbot @ramonjd @andrewserong