Posted in: Bricks Builder Tutorials

Posted on:

Integrating Gutenberg Content in Bricks Builder for Client Websites

Creating dynamic and user-friendly websites for clients is a crucial part of a web developer's job. When working with Bricks Builder, there are various approaches to handling client content management.

This tutorial focuses on integrating Gutenberg content into Bricks Builder templates, providing a balance between developer control and client flexibility.

Why Use Gutenberg with Bricks Builder?

As part of WordPress, Gutenberg offers a relatively intuitive and flexible content creation experience. By integrating it with Bricks Builder, you can:

  • Maintain control over the website’s design and structure.
  • Allow clients to add and manage content easily.
  • Combine the strengths of Bricks Builder’s design capabilities with Gutenberg’s user-friendly content editor.

Creating a Basic Blog Post Template

Step 1: Setting Up the Template

  1. Create a New Template: In Bricks Builder, create a new template. Name it appropriately, like “Blog Post Template.”
  2. Assign Template Type: Set the template type to “Single” to apply it to individual posts.
  3. Configure Conditions: In the template settings, specify conditions for posts using this template.

Step 2: Designing the Template

  1. Add a Section: Start with a basic section and an inner container.
  2. Adjust Layout: Customize the layout, margins, and other styling.
  3. Insert Elements: Use Bricks Builder elements like images and headings for static parts of the template.

Step 3: Integrating Gutenberg Content

  1. Add Post Content Element: Search for the “Post Content” element in Bricks Builder.
  2. Place the Element: Drag the Post Content element where you want the Gutenberg content to appear.
  3. Configure Content: This element will automatically display the content created in Gutenberg, including text, images, and other Gutenberg blocks.

Step 4: Adding Dynamic Data

  1. Dynamic Heading: Change the heading element to display the post title dynamically.
  2. Featured Image: Use dynamic data settings to add and configure the post’s featured image.

Step 5: Finalizing the Layout

  1. Reorder Elements: Arrange elements like headings and images as per your design.
  2. Apply Styling: Add styling like rounded borders or custom padding.

Testing and Client Handoff

  • Save and Preview: Save the template and preview it with sample posts.
  • Apply Styling: Make final design tweaks to ensure everything looks cohesive.
  • Client Training: Show your clients how to add content using Gutenberg, ensuring they’re comfortable with the basic editing process.

Additional Tips

  • Control Access: If needed, limit the options available to clients in Gutenberg.
  • ACF/MetaBox Integration: Combine this approach with ACF or MetaBox for more complex data handling.
  • Feedback and Customization: Adapt the process based on client needs and feedback.


Integrating Gutenberg content with Bricks Builder templates provides a flexible yet controlled environment for your clients to manage their website content. This approach marries the design strength of Bricks Builder with the user-friendly content management of Gutenberg, creating a win-win situation for both developers and clients.

Join The Community

Join over 13,500 WordPress enthusiasts and become part of a vibrant community.