Hybrid themes: Block CSS is missing when using do_blocks() #40018
Description
Description
If you use do_blocks() to render a block, the CSS normally placed in a style tag for the wp-container-uniqueID inline in the document is missing. Such as the flex, margins, widths and alignments.
Step-by-step reproduction instructions
Use do_blocks() (in a front facing template file) to render a block with a layout setting like a group or template part.
Confirm that the CSS is missing on the front.
In empty theme, create file called search.php (Place it in the root directory, not templates)
Add this sample code:
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="wp-site-blocks">
<?php
echo do_blocks( '<!-- wp:template-part {"slug":"header","theme":"emptytheme","align":"full","className":"site-header"} /-->' );
echo do_blocks(
'<!-- wp:group {"tagName":"main","align":"full","layout":{"inherit":true}} -->
<main class="wp-block-group alignfull"><!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"align":"wide","layout":{"inherit":true}} -->
<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">No results found</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Sorry, but nothing matched your search terms. Please try again with some different keywords</p>
<!-- /wp:paragraph -->
<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search"} /--></div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></main>
<!-- /wp:group -->'
);
?>
</div>
<?php wp_footer(); ?>
</body>
</html>
Go to the front of the test site and do a search.
See that the layout is left aligned, not wide with a centered heading.
View the source and see that the CSS styles for alignments in wp-container-uniqueID is not printed.
Copy paste the same block markup to a post or page and compare the two layouts and the CSS.
The post has the following CSS applied:
.wp-container-1 > * {
margin-block-start: 0;
margin-block-end: 0;
}
.wp-container-1 > :where(:not(.alignleft):not(.alignright)) {
max-width: 840px;
margin-left: auto !important;
margin-right: auto !important;
}
Screenshots, screen recording, code snippet
No response
Environment info
WordPress 5.9.3 RC1 nightly
With and without Gutenberg trunk, Gutenberg 12.9.0.
WordPress beta tester plugin
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
No