Skip to content

Style engine: add optimize flag and combine functions into wp_style_engine_get_stylesheet #42878

Merged
ramonjd merged 4 commits intotrunkfrom
update/style-engine-enqueue-follow-ups
Aug 3, 2022
Merged

Style engine: add optimize flag and combine functions into wp_style_engine_get_stylesheet #42878
ramonjd merged 4 commits intotrunkfrom
update/style-engine-enqueue-follow-ups

Conversation

@ramonjd
Copy link
Copy Markdown
Member

@ramonjd ramonjd commented Aug 2, 2022 •
edited
Loading

What?

A follow up to:

This PR:

  1. adds an 'optimize' option to WP_Style_Engine_Processor->get_css() which allows for bypassing the selector combination optimizeation
  2. merges wp_style_engine_get_stylesheet_from_css_rules() and wp_style_engine_add_to_store() into wp_style_engine_get_stylesheet()

Why and how?

  1. Allows outputting verbose styles in the event of bugs, or just if consumers desire it.
  2. Use a single interface to both store and output compiled stylesheets from multiple rules.

Testing Instructions

For the optimize flag:

npm run test-unit-php

For the merged function:

Example 
<!-- wp:group {"style":{"color":{"background":"#ee6b6b"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","orientation":"vertical"}} -->
<div class="wp-block-group has-background" style="background-color:#ee6b6b"><!-- wp:paragraph -->
<p>Test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#c4cce6"}},"layout":{"contentSize":"342px"}} -->
<div class="wp-block-group has-background" style="background-color:#c4cce6"><!-- wp:paragraph -->
<p>Test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

The frontend should appear as expected:

Screen Shot 2022-08-02 at 1 59 31 pm

The styles should be output correctly:

<style id='layout-block-supports-inline-css'>
.wp-block-navigation.wp-container-3 {justify-content: flex-end;}.wp-block-group.wp-container-7 {flex-wrap: nowrap; align-items: flex-start;}.wp-block-group.wp-container-8 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 342px; margin-left: auto !important; margin-right: auto !important;}.wp-block-group.wp-container-8 > .alignwide {max-width: 342px;}.wp-block-group.wp-container-4,.wp-block-group.wp-container-13 {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-post-content.wp-container-9 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-11 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-14 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-15 > :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-post-content.wp-container-9 > .alignwide,.wp-block-group.wp-container-11 > .alignwide,.wp-block-group.wp-container-14 > .alignwide,.wp-block-group.wp-container-15 > .alignwide {max-width: 1000px;}.wp-block-group.wp-container-5 .alignfull,.wp-block-group.wp-container-6 .alignfull,.wp-block-group.wp-container-8 .alignfull,.wp-block-post-content.wp-container-9 .alignfull,.wp-block-group.wp-container-11 .alignfull,.wp-block-group.wp-container-14 .alignfull,.wp-block-group.wp-container-15 .alignfull {max-width: none;}
</style>

gutenberg_get_layout_style() should return the compiled CSS for the single block only (and not the cumulated stylesheet)

@ramonjd ramonjd requested a review from spacedmonkey as a code owner August 2, 2022 03:32
@ramonjd ramonjd self-assigned this Aug 2, 2022
@ramonjd ramonjd added the [Package] Style Engine /packages/style-engine label Aug 2, 2022
@ramonjd ramonjd mentioned this pull request Aug 2, 2022
Merged
@ramonjd ramonjd changed the title Style engine: add optimize flag Style engine: add optimize flag and combine functions into wp_style_engine_get_stylesheet Aug 2, 2022
ramonjd
ramonjd commented Aug 2, 2022
View reviewed changes
andrewserong
andrewserong approved these changes Aug 2, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Nice one, thanks for the quick follow-up. I like the merging of wp_style_engine_get_stylesheet_from_css_rules() and wp_style_engine_add_to_store() 👍, just left a comment on your naming comment, but I don't feel too strongly about which way we go there. I'll be curious to see what @aristath thinks 🙂

Re-tested that Layout and Elements supports are still working correctly, and the optimize flag looks good to me.

LGTM!

@ramonjd ramonjd force-pushed the update/style-engine-enqueue-follow-ups branch from fbe9d11 to 680ac22 Compare August 3, 2022 03:15
@ramonjd
Rename wp_style_engine_get_stylesheet to wp_style_engine_get_styleshe…
5b288e9 
…et_from_css_rules

Formatting tests for readability
@ramonjd ramonjd force-pushed the update/style-engine-enqueue-follow-ups branch from 680ac22 to 5b288e9 Compare August 3, 2022 04:00
@ramonjd ramonjd merged commit 6004cb1 into trunk Aug 3, 2022
@ramonjd ramonjd deleted the update/style-engine-enqueue-follow-ups branch August 3, 2022 04:56
@github-actions github-actions bot added this to the Gutenberg 13.9 milestone Aug 3, 2022
@ramonjd ramonjd mentioned this pull request Aug 3, 2022
Closed
25 tasks
@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Aug 3, 2022
@oandregal oandregal added the [Type] Experimental Experimental feature or API. label Aug 10, 2022
@oandregal
Copy link
Copy Markdown
Member

oandregal commented Aug 10, 2022

Tagged for the changelog.

@ockham ockham mentioned this pull request Aug 26, 2022
Closed
37 tasks
@ramonjd ramonjd removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@andrewserong andrewserong andrewserong approved these changes

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey is a code owner

@aristath aristath Awaiting requested review from aristath

Assignees

@ramonjd ramonjd

Labels

[Package] Style Engine /packages/style-engine [Type] Experimental Experimental feature or API.

Projects

Gutenberg Style Engine
Status: 🏆 Done

Milestone

Gutenberg 13.9

Development

Successfully merging this pull request may close these issues.

4 participants

@ramonjd @oandregal @andrewserong @bph