I’ve created a page and added some ACF blocks I’ve created. For some reason the styles are not being rendered with the block when I get the posts page ID and the content from it. If I remove it from the posts page setting, the blocks render fine (with styles).
Can anybody assist with the code that would be required to get a specific page’s content and render the blocks on the page with the style as well?
Here is one example that I have tried. Any help would be greatly appreciated.
@php
$post = get_post(11);
@endphp
{!! do_blocks($post->post_content) !!}
Your issue appears to match well with this one in Gutenberg:
opened 09:26AM - 04 Apr 22 UTC
[Type] Bug
[Type] Regression
[Feature] Themes
### Description
If you use do_blocks() to render a block, the CSS normally plac… ed 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( '' );
echo do_blocks(
'
<main class="wp-block-group alignfull">
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<div class="wp-block-group alignwide">
<h2 class="has-text-align-center">No results found</h2>
<p>Sorry, but nothing matched your search terms. Please try again with some different keywords</p>
</div>
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
</main>
'
);
?>
</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
1 Like
Yeah it looks like blocks that do their own styles have an assumption that they’ll run before wp_head()
so they can insert styles there. On a normal theme, you can see that happen with get_the_block_template_html()
: https://github.com/WordPress/wordpress-develop/blob/b5392cc28c6f065227e9345cdb9ac266a0f9ee30/src/wp-includes/template-canvas.php
You might be able to fix it by hacking the sage index.php
although this would probably have other side effects:
+ <?php $content = view(app('sage.view'), app('sage.data'))->render(); ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('get_header'); ?>
<div id="app">
- <?php echo view(app('sage.view'), app('sage.data'))->render(); ?>
+ <?php echo $content; ?>
</div>
<?php do_action('get_footer'); ?>
<?php wp_footer(); ?>
</body>
</html>