I don’t know about you but this is how I want Pages to be rendered when using Bricks:
- When a Page has only WordPress content (Gutenberg blocks), the title and the WP content should show.
- When a Page has only Bricks content, Bricks content should show.
- When a Page has both WordPress and Bricks content, the Page title + WP content AND Bricks content should show.
This tutorial shows how such a (what I consider the) perfect Page template can be set up in Bricks.
First, some sample screenshots.
WP content only
Bricks content only
WP and Bricks content
This one-time setup does not involve a custom fields plugin or constant Page-by-Page maintenance/decision-making.
Step 1
Whitelist has_blocks function by adding the following in the child theme’s functions.php (preferred) or a code snippets plugin:
add_filter( 'bricks/code/echo_function_names', function() {
return [
'has_blocks',
];
} );
You should also add any other functions (native or custom) being used in your Bricks instance in addition to has_blocks. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.
More info on whitelisting can be found here.
Step 2
(JSON export near the end)
Create a Bricks template named say, “Page” of type Single.
Edit it with Bricks.
Set a condition to make it apply to all Pages.
Set up the structure like this:
Data source for the Post content element inside the “WP Content Section” should be the default i.e., WordPress.
The “Bricks Content” is another Post content element whose Data source is set to Bricks.
Apply this Dynamic data condition on WP Content Section:
{echo:has_blocks}
That’s it!
JSON Export of the Page (can be imported on the Bricks template screen)
Note: There is no need to apply a condition on the Post content whose source is set to Bricks. It will automatically only be output if there is Bricks content.
For those using classic editor
If you are not using the Gutenberg/block editor, you’d need to replace has_blocks with a custom function.
Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:
<?php
function bl_has_wp_content(): bool {
$id = is_home() ? get_option( 'page_for_posts' ) : get_the_ID();
return '' !== get_post( $id )->post_content;
}We defined a custom function that returns true if the current single post (can be of any post type, but we are using it here only for Pages) has WordPress content and false if it does not.
We’ve also made this function useful for the Posts page (typically called “Blog”) – meaning, WP content (if present) added in the Page designated as the Posts page will appear at the top or before the Bricks content.
References
https://brickslabs.com/bricks-setup-guide/#page
https://wagepirate.com/blog/bricks-gutenberg-content-same-template/
10 comments
ian
Is this necessary now? I see Post Content element can have WordPress or Bricks data source.
Sridhar Katakam
It was never *necessary*. It's just a method that I prefer.
Post Content element has always supported both Bricks and WP content data source options from what I remember.
Michael van Dinther
Is it possible to set this type of template up to be conditional?
For example only apply this for Post > Category > News or CPT Projects?
Sridhar Katakam
It should work. Give it a try.
Change the template condition to where it should apply (referring to this screenshot: https://brickslabs.com/wp-content/uploads/2024/03/CleanShot-2024-03-21-at-6%E2%80%AF.30.18@2x.png)
Austin Reason
Could this be modified so that instead of has_blocks it used something like has_bricks? I'd like to take the structure that you have (Gutenberg Content section followed by Bricks div) and have it render the Gutenberg content only if the page isn't built with Bricks and use the Bricks div only if the page IS built with Bricks.
It's a small distinction, but it's because I often will build a page with Bricks and put the WPcontent element in the layout somewhere. When I do, I won't want the first section (Gutenberg) to display because then there would be duplication.
Currently I use a similar setup where the two sections display based on a Metabox switch on each page. I'd prefer to not have to toggle that switch because it often gets forgotten.
Sridhar Katakam
Wrote a new tutorial to answer this.
https://brickslabs.com/condition-for-checking-bricks-content/
susan
Nice tutorial, question:
Where you say "Whitelist has_blocks function" in step 1, what do you mean by "whitelist"?
Do you just mean we need to add the code in the box to our functions.php?
Sridhar Katakam
That is correct. But depending on what other functions (WordPress native or custom) may be in use on your site already (if any), those would need to included as well.
I have just updated the tutorial to make the whitelisting part more clear.
Susan
Thanks Sridhar for the fast response 🙂
Benjamin Ogg
Wow, that's super awsome, Sridhar! ❤️