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

Style engine: enqueue block support styles #42452

Merged
merged 30 commits into from
Aug 2, 2022
Merged

Style engine: enqueue block support styles #42452

merged 30 commits into from
Aug 2, 2022

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Jul 15, 2022 •
edited
Loading

What?

This PR extends the backend style engine, and:

  • enables the storing and enqueuing of layout and elements block support styles.
  • batches layout and elements styles on the backend into a single HTML style tag

Why?

This is part of the effort to reduce the number of style tags in the rendered HTML.

How?

Using the classes laid down by @aristath in #42222, it's now possible to build stylesheets and enqueue CSS for rendering on the frontend.

There are three global functions that help to achieve this:

wp_style_engine_get_styles()

Use this function for style objects that require parsing, for instance, the value of a block's attributes.style object or the top level styles in theme.json.

To enqueue a style for rendering in the frontend, the $options array requires the following:

  1. selector (string) - this is the CSS selector for your block style CSS declarations.
  2. context (string) - this tells the style engine where to store the styles. Styles in the same context will be batched together and printed in the same HTML style tag. The default is 'block-supports'.
  3. enqueue (boolean) - tells the style engine to enqueue the styles and print them in the frontend.

wp_style_engine_get_styles will return the compiled CSS and CSS declarations array.

$block_styles =  array(
     'spacing' => array( 'padding' => '100px' )
);
$styles = wp_style_engine_get_styles(
    $block_styles,
    array(
        'selector' => '.a-selector',
        'context'  => 'block-supports',
        'enqueue'  => true,
    )
);
print_r( $styles );

/*
array(
    'css'                 => '.a-selector{padding:10px}'
    'declarations'  => array( 'padding' => '100px' )
)
*/

wp_style_engine_add_to_store()

Use this function to enqueue any CSS rules. It will automatically merge declarations and combine selectors.

$styles = array(
    array(
        'selector'.       => '.wp-pumpkin',
        'declarations' => array( 'color' => 'orange' )
    ),
    array(
        'selector'.       => '.wp-tomato',
        'declarations' => array( 'color' => 'red' )
    ),
    array(
        'selector'.       => '.wp-tomato',
        'declarations' => array( 'padding' => '100px' )
    ),
    array(
        'selector'.       => '.wp-kumquat',
        'declarations' => array( 'color' => 'orange' )
    ),
);

wp_style_engine_add_to_store( 'layout-block-supports', $styles );

The resulting stylesheet will be:

<style id='layout-block-supports-inline-css'>
.wp-pumpkin, .wp-kumquat {color:orange}.wp-tomato{color:red;padding:100px}
</style>

wp_style_engine_get_stylesheet_from_css_rules()

Use this function to compile and return a stylesheet for any CSS rules. This function does not enqueue styles, but rather acts as a CSS compiler.

It has a similar function signature to wp_style_engine_add_to_store,

$styles = array(
    array(
        'selector'.       => '.wp-pumpkin',
        'declarations' => array( 'color' => 'orange' )
    ),
    array(
        'selector'.       => '.wp-tomato',
        'declarations' => array( 'color' => 'red' )
    ),
    array(
        'selector'.       => '.wp-tomato',
        'declarations' => array( 'padding' => '100px' )
    ),
    array(
        'selector'.       => '.wp-kumquat',
        'declarations' => array( 'color' => 'orange' )
    ),
);

$stylesheet = wp_style_engine_get_stylesheet_from_css_rules( 'layout-block-supports', $styles );
print_r( $stylesheet ); // .wp-pumpkin, .wp-kumquat {color:orange}.wp-tomato{color:red;padding:100px}

Future iterations

  • Move enqueue logic into Gutenberg
  • Add an optimize (and possibly a prettify) flag to toggle selector combination optimization and whitespace

Testing Instructions

This PR enqueues both link elements styles and Layout block support styles.

In a new post add some text links and assign them a color.

Insert a few group blocks and adjust the layout settings (alignment, widths, justifications). Ideally, manually test each of the features of both default/flow and flex-based Layouts using blocks such as Group, Columns, Buttons.

Ensure that the colors and layout appear on the frontend as expected.

Here's some test block HTML. I'm testing using emptytheme, but we should also test in other themes including classic themes.

Example markup for custom link colors 
<!-- wp:paragraph -->
<p><a href="https://test.com">Test</a> paragraph with a link.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#842ecf"}}}}} -->
<p class="has-link-color"><a href="https://test.com">Test</a> paragraph with a link.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#842ecf"}}}}} -->
<p class="has-link-color"><a href="https://test.com">Test</a> paragraph with a link.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|pale-pink"}}}}} -->
<p class="has-link-color"><a href="https://test.com">Test</a> paragraph with a link.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|pale-pink"}}}}} -->
<p class="has-link-color"><a href="https://test.com">Test</a> paragraph with a link.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|pale-pink"}}}}} -->
<h2 class="has-link-color">H2 with a <a href="https://wordpress.org">link</a></h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"#fbc941"}}}}} -->
<div class="wp-block-group has-link-color"><!-- wp:paragraph -->
<p><a href="https://wordpress.org">Test</a> paragraph with a link inside a group;</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"#fbc941"}}}}} -->
<div class="wp-block-group has-link-color"><!-- wp:paragraph -->
<p><a href="https://wordpress.org">Test</a> paragraph with a link inside a group;</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"luminous-vivid-amber","layout":{"inherit":true}} -->
<div class="wp-block-group has-luminous-vivid-amber-background-color has-background"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"47px","layout":{"contentSize":"26px"}} -->
<div class="wp-block-column" style="flex-basis:47px"><!-- wp:paragraph -->
<p>testest</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"luminous-vivid-orange","layout":{"inherit":false,"contentSize":"402px"}} -->
<div class="wp-block-group has-luminous-vivid-orange-background-color has-background"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"47px","layout":{"contentSize":"26px"}} -->
<div class="wp-block-column" style="flex-basis:47px"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"luminous-vivid-orange","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-luminous-vivid-orange-background-color has-background"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"47px","layout":{"contentSize":"26px"}} -->
<div class="wp-block-column" style="flex-basis:47px"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"vivid-purple"} -->
<div class="wp-block-group has-vivid-purple-background-color has-background"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Example markup for Layout support 
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"vivid-red","layout":{"contentSize":"600px"}} -->
<div class="wp-block-group alignfull has-vivid-red-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:cover {"overlayColor":"primary","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">A cover block that's full width to the edge</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"50px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"5px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"blockGap":"2px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"},"style":{"spacing":{"blockGap":"2px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"blockGap":"2px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B<br>on multiple rows</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","verticalAlignment":"top"},"style":{"spacing":{"blockGap":"2px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B<br>on multiple rows</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","verticalAlignment":"bottom"},"style":{"spacing":{"blockGap":"2px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B<br>on multiple rows</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"vertical","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"2px"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Screen Shot 2022-07-25 at 11 27 27 am

Enable "useRootPaddingAwareAlignments": true in your theme.json and give a group block full alignment and some left and right padding.

The layout styles should be printed as expected, e.g., .wp-block-group.wp-container-6 > .alignfull {margin-right: calc(26px * -1); margin-left: calc(69px * -1);}

Also make sure the CSS rules are being batched into a single, inline style sheet. For example, this:

<style id='block-supports-inline-css'>
.wp-elements-bb563b31fce88a8bb12898100773d8e7 a {color: #842ecf;}.wp-elements-4cebe23f336adf33d0fd72ee6511e88e a {color: #fbc941;}.wp-elements-58f56fce71e24389540d1fff37a68db8 a,.wp-elements-cad477801df51349bcb7ad151a4593cb a {color: var(--wp--preset--color--pale-pink);}
</style>
<style id='layout-block-supports-inline-css'>
.wp-block-group.wp-container-6 > .alignfull {margin-right: calc(26px * -1); margin-left: calc(69px * -1);}.wp-block-group.wp-container-10 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 402px; margin-left: auto !important; margin-right: auto !important;}.wp-block-group.wp-container-10 > .alignwide {max-width: 402px;}.wp-block-column.wp-container-3 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-column.wp-container-7 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-column.wp-container-11 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 26px; margin-left: auto !important; margin-right: auto !important;}.wp-block-column.wp-container-3 > .alignwide,.wp-block-column.wp-container-7 > .alignwide,.wp-block-column.wp-container-11 > .alignwide {max-width: 26px;}.wp-block-column.wp-container-3 .alignfull,.wp-block-group.wp-container-6 .alignfull,.wp-block-column.wp-container-7 .alignfull,.wp-block-group.wp-container-10 .alignfull,.wp-block-column.wp-container-11 .alignfull,.wp-block-post-content.wp-container-16 .alignfull {max-width: none;}.wp-block-columns.wp-container-5,.wp-block-columns.wp-container-9,.wp-block-columns.wp-container-13,.wp-block-group.wp-container-14 {flex-wrap: nowrap;}.wp-block-group.wp-container-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-post-content.wp-container-16 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 840px; margin-left: auto !important; margin-right: auto !important;}.wp-block-group.wp-container-6 > .alignwide,.wp-block-post-content.wp-container-16 > .alignwide {max-width: 1100px;}
</style>

Instead of this:

	<style>.wp-block-navigation.wp-container-3 {justify-content: flex-end;}</style>
<style>.wp-block-group.wp-container-4 {justify-content: space-between;}</style>
<style>.wp-block-group.wp-container-5 > :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 { max-width: 1000px;}.wp-block-group.wp-container-5 .alignfull { max-width: none; }</style>
<style>.wp-block-group.wp-container-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-block-group.wp-container-6 > .alignwide { max-width: 1000px;}.wp-block-group.wp-container-6 .alignfull { max-width: none; }</style>
<style>.wp-elements-bb563b31fce88a8bb12898100773d8e7 a { color: #842ecf; }</style>
<style>.wp-elements-bb563b31fce88a8bb12898100773d8e7 a { color: #842ecf; }</style>
<style>.wp-elements-58f56fce71e24389540d1fff37a68db8 a { color: var(--wp--preset--color--pale-pink); }</style>
<style>.wp-elements-58f56fce71e24389540d1fff37a68db8 a { color: var(--wp--preset--color--pale-pink); }</style>
<style>.wp-elements-cad477801df51349bcb7ad151a4593cb a { color: var(--wp--preset--color--pale-pink); }</style>
<style>.wp-elements-4cebe23f336adf33d0fd72ee6511e88e a { color: #fbc941; }</style>
<style>.wp-elements-4cebe23f336adf33d0fd72ee6511e88e a { color: #fbc941; }</style>
<style>.wp-block-column.wp-container-9 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 26px;margin-left: auto !important;margin-right: auto !important;}.wp-block-column.wp-container-9 > .alignwide { max-width: 26px;}.wp-block-column.wp-container-9 .alignfull { max-width: none; }</style>
<style>.wp-block-columns.wp-container-11 { flex-wrap: nowrap; }</style>
<style>.wp-block-group.wp-container-12 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-block-group.wp-container-12 > .alignwide { max-width: 1000px;}.wp-block-group.wp-container-12 .alignfull { max-width: none; }</style>
<style>.wp-block-column.wp-container-13 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 26px;margin-left: auto !important;margin-right: auto !important;}.wp-block-column.wp-container-13 > .alignwide { max-width: 26px;}.wp-block-column.wp-container-13 .alignfull { max-width: none; }</style>
<style>.wp-block-columns.wp-container-15 { flex-wrap: nowrap; }</style>
<style>.wp-block-group.wp-container-16 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 402px;margin-left: auto !important;margin-right: auto !important;}.wp-block-group.wp-container-16 > .alignwide { max-width: 402px;}.wp-block-group.wp-container-16 .alignfull { max-width: none; }</style>
<style>.wp-block-column.wp-container-17 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 26px;margin-left: auto !important;margin-right: auto !important;}.wp-block-column.wp-container-17 > .alignwide { max-width: 26px;}.wp-block-column.wp-container-17 .alignfull { max-width: none; }</style>
<style>.wp-block-columns.wp-container-19 { flex-wrap: nowrap; }</style>
<style>.wp-block-group.wp-container-20 { flex-wrap: nowrap; }</style>
<style>.wp-block-post-content.wp-container-22 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-block-post-content.wp-container-22 > .alignwide { max-width: 1000px;}.wp-block-post-content.wp-container-22 .alignfull { max-width: none; }</style>
<style>.wp-block-group.wp-container-24 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-block-group.wp-container-24 > .alignwide { max-width: 1000px;}.wp-block-group.wp-container-24 .alignfull { max-width: none; }</style>
<style>.wp-block-group.wp-container-26 {justify-content: space-between;}</style>
<style>.wp-block-group.wp-container-27 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-block-group.wp-container-27 > .alignwide { max-width: 1000px;}.wp-block-group.wp-container-27 .alignfull { max-width: none; }</style>
<style>.wp-block-group.wp-container-28 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-block-group.wp-container-28 > .alignwide { max-width: 1000px;}.wp-block-group.wp-container-28 .alignfull { max-width: none; }</style>

@ramonjd ramonjd requested a review from spacedmonkey as a July 15, 2022 05:28
@ramonjd ramonjd self-assigned this Jul 15, 2022
@ramonjd ramonjd added [Type] Experimental Experimental feature or API. [Package] Style Engine /packages/style-engine labels Jul 15, 2022
@ramonjd ramonjd added the [Status] In Progress Tracking issues with work in progress label Jul 15, 2022
@andrewserong andrewserong mentioned this pull request Jul 15, 2022
Closed
Base automatically changed from add/style-engine/rules to trunk July 15, 2022 08:18
@ramonjd ramonjd force-pushed the try/style-engine-enqueue-block-supports-styles branch from 9a07861 to 0f7c753 Compare July 15, 2022 08:47
@ramonjd ramonjd force-pushed the try/style-engine-enqueue-block-supports-styles branch from 0f7c753 to 6c0d5ea Compare July 18, 2022 00:52
andrewserong
andrewserong reviewed Jul 18, 2022
View reviewed changes
Copy link
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 @ramonjd, I like the direction this is taking, just added a few comments. And it looks like overall it'll be quite compatible with the Renderer / Optimizer approach in #42463 — once that one lands, we'd switch over to using that in enqueue_rendered_styles?

packages/style-engine/class-wp-style-engine.php Outdated Show resolved Hide resolved
packages/style-engine/class-wp-style-engine.php Outdated Show resolved Hide resolved
packages/style-engine/class-wp-style-engine.php Outdated Show resolved Hide resolved
@ramonjd ramonjd force-pushed the try/style-engine-enqueue-block-supports-styles branch from 1b07c83 to 33eb74e Compare July 18, 2022 23:49
ramonjd
ramonjd commented Jul 19, 2022
View reviewed changes
packages/style-engine/class-wp-style-engine.php Outdated
* 'classnames' => (array) A flat array of classnames.
* );
*/
public function parse_block_supports_styles( $block_styles, $options ) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Now that the compile and parse functionality is split, it might be a change to move all the parsing-related methods and utilities to another class or file.

@ramonjd ramonjd force-pushed the try/style-engine-enqueue-block-supports-styles branch from 2a6a226 to 313019d Compare July 24, 2022 11:34
ramonjd
ramonjd commented Jul 25, 2022
View reviewed changes
packages/style-engine/class-wp-style-engine.php
/**
* Fetches, processes and compiles stored styles, then renders them to the page.
*/
public static function process_and_enqueue_stored_styles() {
Copy link
Member Author

Choose a reason for hiding this comment

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

The enqueue and WP hook logic could well live in Gutenberg itself, e.g., script-loader.php with the style engine only taking care of parse + store + compile

@aristath aristath force-pushed the try/style-engine-enqueue-block-supports-styles branch from 7a58ac9 to 19ab79d Compare July 26, 2022 06:31
ramonjd added a commit that referenced this pull request Jul 27, 2022
@aristath @ramonjd
Tweaks for #42452 (#42691)
707b8d5 
* abstract stores

* "else" not needed

* compile_classnames method not needed

* we have a method to get the store here

* Make the wp_style_engine_add_to_store function always return a store

* wp_style_engine_get_stylesheet - always return string

* Merged with base branch.
Added test for new method.

* Whoops!

Co-authored-by: ramonjd <ramonjd@gmail.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
aristath
aristath reviewed Jul 27, 2022
View reviewed changes
packages/style-engine/class-wp-style-engine.php Outdated
}
return null;
return WP_Style_Engine::get_instance()::compile_stylesheet_from_store( $store_key );
Copy link
Member

Choose a reason for hiding this comment

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

I believe we don't need to get the instance here, right?

Suggested change
return WP_Style_Engine::get_instance()::compile_stylesheet_from_store( $store_key );
return WP_Style_Engine::compile_stylesheet_from_store( $store_key );

aristath
aristath approved these changes Jul 27, 2022
View reviewed changes
Copy link
Member

@aristath aristath left a comment

Choose a reason for hiding this comment

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

I've been looking at this PR and testing it for a couple of days... Overall, it looks good. Should we merge it? If there's anything else, it can be done in follow-up PRs. The code here looks good, and it works fine.
It would be good to get this one in so we can continue implementing the style-engine in other places too 👍

@ramonjd ramonjd force-pushed the try/style-engine-enqueue-block-supports-styles branch from 707b8d5 to 1a79985 Compare July 28, 2022 00:27
ramonjd added a commit that referenced this pull request Jul 28, 2022
@aristath @ramonjd
Tweaks for #42452 (#42691)
00d3ae8 
* abstract stores

* "else" not needed

* compile_classnames method not needed

* we have a method to get the store here

* Make the wp_style_engine_add_to_store function always return a store

* wp_style_engine_get_stylesheet - always return string

* Merged with base branch.
Added test for new method.

Co-authored-by: ramonjd <ramonjd@gmail.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
@ramonjd ramonjd force-pushed the try/style-engine-enqueue-block-supports-styles branch from 1a79985 to 00d3ae8 Compare July 28, 2022 00:56
andrewserong
andrewserong reviewed Jul 28, 2022
View reviewed changes
Copy link
Contributor

@andrewserong andrewserong left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Nice work @ramonjd and @aristath, this looks like it's getting much closer! Nice addition with including a default block-supports context when enqueuing 👍

I ran into a couple of issues while testing the Layout support. The main issue is that it looks like properties with the same selector are being overwritten instead of being concatenated. I've added comments on each of the features I noticed that occurring in, but 🤞 that one should be a fairly straightforward fix.

I wasn't too sure how to go about solving the fallback output for Layout styles, though? I've left a comment on that one.

Happy to do more testing tomorrow!

Update: for ease of testing, I've added some test Layout markup to the PR description. Hopefully it should be pretty clear what the expected result should be when switching between the post editor view and the site front-end.

lib/block-supports/layout.php Outdated Show resolved Hide resolved
lib/block-supports/layout.php Outdated Show resolved Hide resolved
lib/block-supports/layout.php Outdated Show resolved Hide resolved
lib/block-supports/layout.php Outdated Show resolved Hide resolved
lib/block-supports/layout.php Outdated Show resolved Hide resolved
lib/block-supports/layout.php Outdated Show resolved Hide resolved
andrewserong
andrewserong approved these changes Aug 2, 2022
View reviewed changes
Copy link
Contributor

@andrewserong andrewserong left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Thanks for all the updates and tweaks @ramonjd and @aristath! I've re-tested the Elements support and each of the features of the Layout support, and it appears to be all working nicely now 🎉

The tidied up function names look good to me, and let's continue exploring how we register actions, etc, in follow-ups.

I might be overly cautious here, but prior to merging it'd be good to update the PR description with a bit more context, so that if this does introduce any issues, it's a little clearer what's changed to help folks debugging. It could also be worth exploring us switching off the optimisation step of the Processor in this PR, and then switch it on in a separate PR so that we have different commits in trunk for each step — this way, if there are any issues caused by the changes to Layout output, it'll hopefully be easier to identify exactly the step that caused the issue. Totally not a blocker if you think that's overkill though.

I suspect it'll be perfectly fine, but I recently ran into some weird edge cases with Layout, so just thought I'd mention it in case it helps us with the merge process.

This PR is a great milestone, though, it's a really significant improvement to the Layout style output, and IMO delivers on a lot of the promise of introducing a style engine. Kudos! ✨

@ramonjd
Copy link
Member Author

ramonjd commented Aug 2, 2022

Thanks @andrewserong and @aristath for all the help getting this one to a mergeable state! 🙇

I might be overly cautious here, but prior to merging it'd be good to update the PR description with a bit more context, so that if this does introduce any issues, it's a little clearer what's changed to help folks debugging.

Will do, thanks!

It could also be worth exploring us switching off the optimisation step of the Processor in this PR, and then switch it on in a separate PR so that we have different commits in trunk for each step — this way, if there are any issues caused by the changes to Layout output, it'll hopefully be easier to identify exactly the step that caused the issue. Totally not a blocker if you think that's overkill though.

I think this is a pretty good step. I'll merge this one with the combination optimizations turned on, but follow it up quickly with an 'optimize' flag that we can switch on once we know things are stable.

@ramonjd ramonjd added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Aug 2, 2022
@ramonjd ramonjd merged commit 3f58ed5 into trunk Aug 2, 2022
@ramonjd ramonjd deleted the try/style-engine-enqueue-block-supports-styles branch August 2, 2022 03:16
@github-actions github-actions bot added this to the Gutenberg 13.9 milestone Aug 2, 2022
@ramonjd
Copy link
Member Author

ramonjd commented Aug 2, 2022

Follow ups here: #42878

This was referenced Aug 2, 2022
Merged
Merged
@ramonjd
Copy link
Member Author

ramonjd commented Aug 2, 2022

Follow up for enqueuing over here:

This was referenced Aug 2, 2022
Closed
Open
@andrewserong andrewserong mentioned this pull request Aug 3, 2022
Closed
30 tasks
@ramonjd ramonjd mentioned this pull request Aug 3, 2022
Closed
25 tasks
This was referenced Aug 3, 2022
Closed
Merged
@matiasbenedetto
Copy link
Contributor

👋 This PR seems to break the vertical orientation of the row block for example. I reported the problem here: #42938 and submitted a potential fix in #42939

@glendaviesnz glendaviesnz mentioned this pull request Aug 3, 2022
Closed
@ndiego ndiego mentioned this pull request Aug 6, 2022
Closed
@oandregal oandregal removed the [Status] In Progress Tracking issues with work in progress label Aug 10, 2022
@ockham ockham mentioned this pull request Aug 26, 2022
Closed
37 tasks
@andrewserong andrewserong mentioned this pull request Sep 29, 2022
Closed
@bph bph mentioned this pull request Oct 3, 2022
Closed
89 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

@aristath aristath aristath approved these changes

@andrewserong andrewserong andrewserong approved these changes

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

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.
5 participants
@ramonjd @matiasbenedetto @aristath @andrewserong @oandregal