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.

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

Combine style-engine stores for block-supports #42970

Merged
merged 1 commit into from
Aug 4, 2022

Conversation

aristath
Copy link
Member

@aristath aristath commented Aug 4, 2022

What?

Right now we have a separate store for layout-block-supports and generic block-supports.
The result is that on the frontend the CSS gets printed like this: (notice there are 2 separate <style> elements, each one with a different ID)

<style id='block-supports-inline-css'>
.wp-elements-c2d3692c067254e99911402d49af8a7d a {
	color: var(--wp--preset--color--background);
}

</style>
<style id='layout-block-supports-inline-css'>
.wp-block-navigation.wp-container-3 {
	justify-content: flex-end;
}
.wp-block-columns.wp-container-9 {
	flex-wrap: nowrap;
}
.wp-block-group.wp-container-4,.wp-block-query-pagination.wp-container-12,.wp-block-group.wp-container-14 {
	justify-content: space-between;
}
.wp-block-group.wp-container-5 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-10 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-query.wp-container-13 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-15 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-16 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 650px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wp-block-group.wp-container-5 > .alignwide,.wp-block-group.wp-container-6 > .alignwide,.wp-block-group.wp-container-10 > .alignwide,.wp-block-query.wp-container-13 > .alignwide,.wp-block-group.wp-container-15 > .alignwide,.wp-block-group.wp-container-16 > .alignwide {
	max-width: 1000px;
}
.wp-block-group.wp-container-5 .alignfull,.wp-block-group.wp-container-6 .alignfull,.wp-block-group.wp-container-10 .alignfull,.wp-block-query.wp-container-13 .alignfull,.wp-block-group.wp-container-15 .alignfull,.wp-block-group.wp-container-16 .alignfull {
	max-width: none;
}
</style>

This PR uses the block-supports store for layouts as well.
The result is this:

<style id='block-supports-inline-css'>
.wp-elements-c2d3692c067254e99911402d49af8a7d a {
	color: var(--wp--preset--color--background);
}
.wp-block-navigation.wp-container-3 {
	justify-content: flex-end;
}
.wp-block-columns.wp-container-9 {
	flex-wrap: nowrap;
}
.wp-block-group.wp-container-4,.wp-block-query-pagination.wp-container-12,.wp-block-group.wp-container-14 {
	justify-content: space-between;
}
.wp-block-group.wp-container-5 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-10 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-query.wp-container-13 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-15 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-16 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 650px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wp-block-group.wp-container-5 > .alignwide,.wp-block-group.wp-container-6 > .alignwide,.wp-block-group.wp-container-10 > .alignwide,.wp-block-query.wp-container-13 > .alignwide,.wp-block-group.wp-container-15 > .alignwide,.wp-block-group.wp-container-16 > .alignwide {
	max-width: 1000px;
}
.wp-block-group.wp-container-5 .alignfull,.wp-block-group.wp-container-6 .alignfull,.wp-block-group.wp-container-10 .alignfull,.wp-block-query.wp-container-13 .alignfull,.wp-block-group.wp-container-15 .alignfull,.wp-block-group.wp-container-16 .alignfull {
	max-width: none;
}
</style>

The <style> elements get combined and everything else remains the same.

The benefit of doing this is that as we convert all implementations to use the style engine, common selectors and declarations can be combined resulting in further optimizations of our styles. The more we add to the same store, the more it can be optimized.

@aristath aristath self-assigned this Aug 4, 2022
Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call.

Now that we've solved the gutenberg_get_layout_style return value problem, this makes perfect sense.

Smoked tested in block and classic themes. LGTM!

@ramonjd ramonjd merged commit 119eb3d into trunk Aug 4, 2022
@ramonjd ramonjd deleted the try/combine-block-supports-style-engine-stores branch August 4, 2022 22:53
@github-actions github-actions bot added this to the Gutenberg 13.9 milestone Aug 4, 2022
@oandregal oandregal added [Type] Experimental Experimental feature or API. [Package] Style Engine /packages/style-engine labels Aug 10, 2022
@oandregal
Copy link
Member

Added labels for the changelog.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Style Engine /packages/style-engine [Type] Experimental Experimental feature or API.
Projects
Status: 🏆 Done
Development

Successfully merging this pull request may close these issues.

3 participants