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

[ramonjd]

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>

[aristath]

This looks very promising! 👍

[ramonjd]

Try wp_parse_args here

[ramonjd]

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]

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.

[aristath]

That would make sense, yes 👍

[ramonjd]

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