GutenBricks
  • ๐Ÿš€ Getting Started
    • Next: Common Troubleshooting Issues
    • Next: Configure Page Template to render
    • Next: Manage Block using Template Bundles
    • ๐Ÿค”Most common troubleshooting step
  • ๐ŸŒŸFeatures
    • Working with Elements
    • Variants
    • InnerBlock
    • Fine-Tune Text Editing
    • Dynamic Class
    • Code Block with Dynamic Data
    • ๐Ÿ’กQuick Tips
      • Dynamic Short Code
      • Accordion Block using InnerBlock
    • โšกAdvanced
      • Custom Block HTML ID
      • Value Binding (coming soon)
      • Creating "comments and docs" inside a template
      • Globally Updating Block Styles
      • Block Wrapper Dynamic Class
      • Working with WPML or Polylang
  • ๐Ÿ€Dynamic Data
    • GB:Meta
    • ACF
      • Setting Up ACF
      • Post Object Field (in-progress)
    • Meta Box
      • Setting Up Meta Box (In-progress)
      • Post Field (in-progress)
    • Built-in GutenBricks Dynamic Data
  • ๐ŸฐClient Experience
    • Documenting Blocks
    • Custom Block Preview
    • Custom Pop-up Text
    • Default Page Template
  • ๐Ÿ› ๏ธCustomizing Gutenberg
    • Gutenberg Editor Custom CSS
      • CSS Snippet: Make the block section not full height for ACSS
  • ๐ŸคนResources
    • ๐Ÿ‘ฉโ€๐Ÿ’ป Developer API
      • echo:gb_current_element_id returns unique ID
      • GutenBricks Events for Gutenberg Editor
      • gb_get_field()
      • Unique IDs
      • Filter: gutenbricks_bricks_theme_name
    • ๐Ÿ”Œ Third Party Integrations
      • ACSS integration with GutenBricks
        • ACSS 2.8.0 Section padding missing
      • ACF / Meta Box integration
    • โค๏ธ Our Approach and Philosophy
  • ๐Ÿ“– Changelog
    • Known issues and bugs
    • Current Changelog
    • Past Changelog
      • v1.1-RC (Released as v1.1.0)
      • v1.0-RC (Released as v1.0)
Powered by GitBook
On this page
  1. ๐Ÿš€ Getting Started

Next: Configure Page Template to render

After creating your first GutenBricks page, you may want to view it on the frontend. Did you notice the blocks are not rendered in full-width?

PreviousNext: Common Troubleshooting IssuesNextNext: Manage Block using Template Bundles

Last updated 10 months ago

After the block is created from the template, you need to choose the right template to render it on the front-end. There are four different methods:

  • GutenBricks' Built-in Template - GutenBricks comes with a default page template that renders blocks in full page width. You can also change the name of the template on the settings page.

  • GutenBricks - Page Template - Create a template and set its type to 'GutenBricks - Page Template.' This can be particularly useful if clients want to choose their own page template for rendering a page.

  • The good old Single Template - Create a 'Single' type template, add a Post Content element, and set its data source to 'WordPress.' This way, the WordPress content will be rendered within the Post Content element.

  • Child Theme - Choose 'Render with WordPress,' and it will be rendered using the Bricks Builder default template-parts/posts.php. For this option, you will need to create a child theme.

Setting up GutenBricks - Page Template

Here is how to set up GutenBricks - Page Template:

  1. When you create a new Bricks template choose "GutenBricks - Page Template" as its type

  1. Inside the template, add a Post Content element and set its data source to WordPress.

  1. The 'GutenBricks - Page Template' will be visible for your clients to choose from within the Gutenberg editor.

You can let your clients select different templates by creating a 'GutenBricks - Page Template.' If you watched , you already know how to use Post Content to render WordPress content.

the tutorial by Paul from WPTuts
This is what you might see after viewing your first GutenBricks page. This is because WordPress is using Bricks Builder's default post template to render the page.