Style Engine: server side rendering of CSS

[ramonjd]

Description

Experimenting with approaches based on #38974

Picking on the layout abstraction to register and render styles on the frontend.

Styles are rendered at top of page for now while testing.

Testing Instructions

Paste in the test content into the code editor and publish the post:

Test content

<!-- wp:group {"style":{"color":{"background":"#aad3ee"}}} -->
<div class="wp-block-group has-background" style="background-color:#aad3ee"><!-- wp:paragraph -->
<p>This is a test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#cce5f8"}}} -->
<div class="wp-block-group has-background" style="background-color:#cce5f8"><!-- wp:paragraph -->
<p>This is a test 2</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a test 3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a test 2</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a test 2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"background":"#f2e8dd"}}} -->
<p class="has-background" style="background-color:#f2e8dd">This is a test column</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"background":"#f7ede2"}}} -->
<p class="has-background" style="background-color:#f7ede2">This is a test column</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Check that the page layout looks as it should and that the styles are rendered in the page.

<style>
.wp-container-3 {
    justify-content: flex-end;
}

.wp-container-1,
.wp-container-9,
.wp-container-11 {
    align-items: center;
}

.wp-container-4,
.wp-container-14 {
    justify-content: space-between;
}

.wp-container-1 > *,
.wp-container-3 > *,
.wp-container-4 > *,
.wp-container-9 > *,
.wp-container-11 > *,
.wp-container-14 > * {
    margin: 0;
}

.wp-container-5 > :where(:not(.alignleft):not(.alignright)),
.wp-container-6 > :where(:not(.alignleft):not(.alignright)),
.wp-container-10 > :where(:not(.alignleft):not(.alignright)),
.wp-container-12 > :where(:not(.alignleft):not(.alignright)),
.wp-container-15 > :where(:not(.alignleft):not(.alignright)),
.wp-container-16 > :where(:not(.alignleft):not(.alignright)) {
    max-width: 650px;
    margin-left: auto !important;
    margin-right: auto !important;
}
...

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
• I've updated related schemas if appropriate.

[ramonjd]

Just playing around for now.