Quick Start

GutenBricks Quick Start

TLDR;

  1. Create a Bricks template and set the type as “GutenBricks – Block”
  2. The template will be available as a block
  3. View it if it’s rendered. (If you want to render blocks in full page-width follow this method.)

Ask us questions at [email protected] or join our Slack and Facebook Group!

We’ve created Quick Start in both video and writing.

Most Frequently asked Question: I have updated the style of my template. Do I have to visit every page to update it? “No you don’t have to. It will applied the update globally.”

Step 1. Create a “GutenBricks – Block”  template 

You can additionally assign the template to a specific bundle. If this is not done, it will by default be included in the “default” bundle.

(Optional) Add documentation for your client

On the Create New Template page, you can add a more user-friendly custom title for your client. This is useful if you use a separate internal naming system for your templates. You can also add a short description and documentation for the templates. Your clients can read them in the Gutenberg editor.

Step 2. Make sure your bundle is activated 

In the Bricks -> GutenBricks -> Blocks tab, you can view which bundles are enabled, either as blocks or patterns. The “default” bundles activate automatically upon plugin activation, ensuring immediate usability. 

The default bundle is identified by a “Default” label in the Gutenberg editor. You can also change the label through default bundle settings.

Step 3. Open up the Gutenberg editor and use your first block!

You can now view your first block within the Gutenberg editor! Attempt to craft your initial project using GutenBricks. For instance, this quick start guide you are reading right now was assembled using GutenBricks. I’ve crafted a block, replicated it into numerous blocks, and entered the content!

Step 4. Check if blocks are rendered properly

There are several ways to render Gutenberg content within the Bricks theme.  
  • Use The Bricks Builder will use its default template, but they don’t look ideal. 
  • You can also write a custom page template using a child theme 
  • Or you can create a custom Bricks template by putting “Post Content” element with its data source set to WordPress. We highly recommend the method shown in this tutorial by Paul from WPTuts.

(optional) Create a “GutenBricks Page Block” and let client choose templates.

You can let your clients use different templates by creating “GutenBricks Page Block.” If you watched the tutorial above by Paul from WPTuts, you already know how to use Post Content to render WordPress content. 

Here is how to set up GutenBricks Page Block:
  1. When you create a new Bricks template choose “GutenBricks Page Block” as its type
  2. Inside the template, add Post Content and set its data source to WordPress
  3. If you only put the Page Content without any padding or margin, You will render the blocks in the page width. 
  4. GutenBricks Page Block will be visible to your clients to choose from on the Gutenberg editor.