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
  • Watch How it Works
  • Use Cases
  • How to set up InnerBlock in Bricks Builder
  • Allowing specific blocks
  • Set Parent block
  1. Features

InnerBlock

Gutenberg Blocks can have an InnerBlock section where you can embed other blocks. You can add blocks of your choices inside a designated area of your choosing.

PreviousVariantsNextFine-Tune Text Editing

Last updated 9 months ago

InnerBlock is only available in 1.1-RC versions and may not be suitable for production.

This article is about the WordPress plugin GutenBricks, which allows you to create Gutenberg blocks using the Bricks Builder page builder in a no-code approach. Visit for more information.

Watch How it Works

Use Cases

The following are some examples of InnerBlocks using GutenBricks:

Example 1: Embedding text blocks to create a Rich Text area

You can create an InnerBlock area to add a Rich Text section using Gutenberg core text blocks.

Example 2: Restrict specific Blocks to be added in an area

In the blocks below, the card block called 'Feature Item' is embedded inside a Container block. You can restrict which parent blocks certain blocks can be added to and which blocks are allowed in the InnerBlock. All these are configured within Bricks Builder.

For example, in the block below:

  • The Feature Item can only added inside the Container block

  • The Container block only allows the Feature Item block in its InnerBlock.

How to set up InnerBlock in Bricks Builder

For 1.1.0 RC1

GutenBricks provides a special element GutenBricks InnerBlock which you can find in the left panel. You can add it in an area where you want to embed child blocks. GutenBricks InnerBlock itself is also a container. So you can configure the layout such as flex box or grids.

IMPORTANT: The Gutenberg editor only allows one InnerBlock per block. GutenBricks will ignore any additional InnerBlocks.

Allowing specific blocks

Select GutenBricks InnerBlock and scroll down the left panel. You will see the options fields below:

  1. Allowed Core/Non-GutenBricks Blocks: You can select multiple Core Gutenberg blocks such as Paragraph or Heading and Non-GutenBricks blocks. You can leave it blank to allow all of them or you can also select Disable All Core/Non-GutenBricks Blocks to disable all the core blocks.

  2. Allowed GutenBricks Blocks: You can select GutenBricks blocks allowed in the InnerBlock. This works the same as the Allowed Core/Non-GutenBricks Blocks field above. If the blocks are not enabled for the post type, they will not be visible even if you select them in this field.

Default Blocks

You can set Default Blocks for the InnerBlock. Otherwise, it will be empty. It is in a string template format. you can copy the blocks from the Gutenberg editor and paste them into the field.

For example, in the screenshot below, we are copying a single card block and its string form is:

<!-- wp:default/gutenb-feature-item {"block_id":"lzfq0fct"} /-->

Set Parent block

Some blocks are meant to be inside certain blocks only. In this case, you can set one or more parents to restrict where the block can be added.

You can configure this in Settings -> Template Settings -> GutenBricks -> InnerBlock section.

๐ŸŒŸ
GutenBricks.com
Template credit: BricksMaven
Container block only allows one type of block; the Feature Item
You can search it using "Search elements.."
The InnerBlock area is inserted as an element