Skip to content

[WIP] Style engine: register styles for enqueuing and rendering#41424

Closed
ramonjd wants to merge 7 commits intotrunkfrom
try/style-engine-registration
Closed

[WIP] Style engine: register styles for enqueuing and rendering#41424
ramonjd wants to merge 7 commits intotrunkfrom
try/style-engine-registration

Conversation

@ramonjd
Copy link
Copy Markdown
Member

@ramonjd ramonjd commented May 30, 2022 •
edited
Loading

WIP

What?

Background context: #40987 (comment)

Why?

One of the aims is to be able to bundle output styles, and also open up the possibility of pre-processing, e.g., deduping

How?

Creating separate methods to handle style registration, taking into account the various "levels" of styles e.g., global and block supports.

Testing Instructions

Using Empty Theme:

Example 
<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|pale-pink"}}}}} /-->

<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-orange"}}}}} /-->

<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"#adc63b"}}}}} /-->

<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"#7a4857"}}}}} /-->

<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|light-green-cyan"}}}}} /-->

<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"#8262b8"}}}}} /-->

<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}}} /-->

<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"#40b876"}}}}} /-->

Instead of a <style /> tag for each rule, we're collating them into one:

	<style>
.wp-elements-6d26dce62e274fbec11380003187995e a { color: var(--wp--preset--color--pale-pink); }
.wp-elements-a6211bd0f50d510936cd495c9e6faf09 a { color: var(--wp--preset--color--luminous-vivid-orange); }
.wp-elements-22d4684938a5ddc0b4a8acf9de8f342c a { color: #adc63b; }
.wp-elements-ba2415e4f4b296c98a0588d746879f5e a { color: #7a4857; }
.wp-elements-ec2ade59a6ecee7bacbe0d1db8c47e65 a { color: var(--wp--preset--color--light-green-cyan); }
.wp-elements-f5f55867de2f30d0db781fb9ec6877b6 a { color: #8262b8; }
.wp-elements-413f8142f63e0ef2e72d3770f1ef248a a { color: var(--wp--preset--color--luminous-vivid-amber); }
.wp-elements-75e03a47eff33fd77f6c021bd12f9034 a { color: #40b876; }
</style>

The plan is to allow opt-in support for cascade layers as well:

<style id='wp-styles-layers-inline-css'>
@layer block-supports;
@layer block-supports {
	.wp-elements-bcb267d41f505e6ed08295db66596d26 a {
		color: #b5a6c2;
	}
	.wp-elements-51918bcc051f54979165325dde6fb588 a {
		color: var(--wp--preset--color--vivid-red);
	}
	.wp-elements-18f8c54e1a82f75d4d71f249a8dd88f4 a {
		color: var(--wp--preset--color--luminous-vivid-amber);
	}
}
</style>

@ramonjd ramonjd added [Status] In Progress Tracking issues with work in progress [Type] Experimental Experimental feature or API. [Package] Style Engine /packages/style-engine labels May 30, 2022
@ramonjd ramonjd self-assigned this May 30, 2022
@ramonjd ramonjd force-pushed the try/style-engine-registration branch from a6b7318 to a55525a Compare June 22, 2022 01:47
@aristath aristath self-requested a review June 22, 2022 07:40
@aristath
Copy link
Copy Markdown
Member

aristath commented Jun 22, 2022

This looks very promising! 👍

ramonjd
ramonjd commented Jun 24, 2022
View reviewed changes
packages/style-engine/class-wp-style-engine.php Outdated
if ( class_exists( 'WP_Style_Engine' ) ) {
$style_engine = WP_Style_Engine::get_instance();
// Get style rules, then register/enqueue.
$new_options = array_merge( $options, array( 'enqueue' => true ) );
Copy link
Copy Markdown
Member Author

@ramonjd ramonjd Jun 24, 2022

Choose a reason for hiding this comment

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

Try wp_parse_args here

@ramonjd ramonjd mentioned this pull request Jun 24, 2022
Closed
@ramonjd ramonjd changed the title Style engine: register styles for enqueuing and rendering [WIP] Style engine: register styles for enqueuing and rendering Jun 24, 2022
ramonjd
ramonjd commented Jun 27, 2022
View reviewed changes
packages/style-engine/class-wp-style-engine-renderer.php Outdated
Copy link
Copy Markdown
Member Author

@ramonjd ramonjd Jun 27, 2022

Choose a reason for hiding this comment

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

Just testing outputting cascade layers for now to test the concept.

We really want registered styles to be the focus beforehand.

TODO:

  • Needs to be tested against other styles for specificity
  • How to make this opt-in? (We're instantiating WP_Style_Engine as a singleton, so should it be passed to the constructor somehow)

@ramonjd ramonjd force-pushed the try/style-engine-registration branch from 05b577f to c72366e Compare June 27, 2022 05:26
ramonjd
ramonjd commented Jun 27, 2022
View reviewed changes
packages/style-engine/class-wp-style-engine.php
* @param array $options An array of options to determine the output.
* @return void
*/
function wp_style_engine_enqueue_styles( $block_styles, $options = array() ) {
Copy link
Copy Markdown
Member Author

@ramonjd ramonjd Jun 27, 2022

Choose a reason for hiding this comment

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

Here we're generating and enqueuing block styles, a.k.a values from a styles object { spacing: { ... }, typography: { ... }, ... }

So maybe it should be called wp_style_engine_enqueue_block_styles.

Copy link
Copy Markdown
Member

@aristath aristath Jun 28, 2022

Choose a reason for hiding this comment

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

That would make sense, yes 👍

ramonjd
ramonjd commented Jun 27, 2022
View reviewed changes
packages/style-engine/class-wp-style-engine-renderer.php
/**
* Creates a string consisting of CSS property declarations suitable for the value of an HTML element's style attribute.
*
* @param array $css_definitions An collection of CSS definitions `[ [ 'color' => 'red' ] ]`.
Copy link
Copy Markdown
Member Author

@ramonjd ramonjd Jun 27, 2022

Choose a reason for hiding this comment

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

References to $css_definitions should rather be $css_declarations since they contain property: value pairs

aristath
aristath reviewed Jun 28, 2022
View reviewed changes
@ramonjd ramonjd mentioned this pull request Jun 29, 2022
Closed
25 tasks
@ramonjd ramonjd closed this Aug 3, 2022
@aristath aristath deleted the try/style-engine-registration branch August 3, 2022 08:55
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label Jan 11, 2023
@krokodok krokodok mentioned this pull request May 31, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aristath aristath aristath left review comments

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey will be requested when the pull request is marked ready for review 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: 🗄 Closed / not merged

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ramonjd @aristath @priethor