Hybrid Rendering with Bricks + Gutenberg – is this practical?

How To
1

Hi all,

I’m trying to set up a way to control page rendering on a per-page basis using an ACF select field with three options:

• default: Gutenberg only
• bricks: Bricks only
• all: Both Gutenberg and Bricks

Based on the selected value, I use the bricks/active_templates filter to load a specific Bricks template. Each mode has its own template, and the “all” template includes both the WordPress Content and Bricks Content blocks. The blog page is excluded from this logic and always uses the default behavior.

My goal is to keep things more or less simple for clients and the setup clean but also scalable enough to add other templates/variations later: Gutenberg-only is the default, so if they don’t have access to Bricks, they can just create and edit Gutenberg pages as usual. For those with Bricks access, the only thing they need to know is to set the ACF field on a per-page basis when needed — which I think is easy enough to explain.

Has anyone tried something similar? Do you think this is a practical and sustainable approach, or would you reommend a better way to handle mixed content in Bricks?

Curious to hear your thoughts! :blush:

Here’s the code I’m using to handle the logic:

add_filter( 'bricks/active_templates', 'set_active_templates_by_acf_field', 10, 3 );

function set_active_templates_by_acf_field( $active_templates, $post_id, $content_type ) {
  if ( $content_type !== 'content' ) {
    return $active_templates;
  }

  // Skip the blog page
  if ( get_option( 'page_for_posts' ) == $post_id ) {
    return $active_templates;
  }

  // Limit to specific post types
  $post_type = get_post_type( $post_id );
  if ( ! in_array( $post_type, ['page'] ) ) {
    return $active_templates;
  }

  // Template IDs
  $template_default = 718; // ID of the Gutenberg-only template
  $template_all     = 740; // ID of the Gutenberg + Bricks template

  // Get the selected template mode from ACF
  $template_mode = get_field( 'page_template', $post_id );

  switch ( $template_mode ) {
    case 'bricks':
      // Render only Bricks content (no global template)
      $active_templates['content'] = $post_id;
      break;

    case 'all':
      // Use the template that includes both Gutenberg + Bricks
      $active_templates['content'] = $template_all;
      break;

    case 'default':
    default:
      // Use Gutenberg-only template
      $active_templates['content'] = $template_default;
      break;
  }

  return $active_templates;
}
2

I know this isn’t exactly what you’re looking for, but how about just making Gutenberg content hidden while Bricks content exists? Then if clients only have access to Gutenberg, they can’t add content to any Bricks pages you’ve designed.

See tip #3 in this blog post.

Maybe it will help?

3

Thanks for your feedback. I have already considered taking this route and have not yet completely written off the idea. Especially if you only want to separate Gutenberg/Bricks this is a good solution.:v: With my approach I wanted to try to make it a little more flexible in terms of templates. In theory, I could also create additional templates for pages and make them selectable there…

As always, there probably isn’t one perfect solution (for my blueprint). I may just have to decide on a project-by-project basis how to solve those kind of things. But I am happy that my solution works quite well so far, but I have to test it again in some real world cases. :blush: