How to Use Nested Blocks in the Gutenberg Editor

Nested blocks are a really useful feature in the Gutenberg editor. If you haven't used them yet, you almost certainly will when the new “Full-Site Editing” changes arrive in WordPress 5.8. At that point, you will be able to build complete webpages in Gutenberg and I guarantee you'll be using nested blocks.

Nested blocks makes it easy to create advanced layouts. This is because nested blocks are blocks inside other blocks. A simple example is a Column block with a text block inside. Another example is a pricing block with a “Buy Now” button block inside.

Some common uses of nested blocks are the default Columns, Cover, or Group blocks.


How to see your nested blocks

There are two common ways to see if you're using nested blocks.

First, if you hover over the block icon for a block, you'll see a new icon load above. In the image below, the arrow is pointing to the nested block. The second icon above is highlighting the parent block.

Screen Shot 2021 06 17 At 11.49.38

Second, you can use the “List View” at the top of the Gutenberg screen. This is the best way to understand your block layouts. If you click on the three lines of the “List View” icon, you'll see an overview of all the blocks in your post. Normally, all the blocks will be shown on the same level. In the image below, the “Paragraph”, “Heading” and “Columns” blocks are not nested.

Nonnested Blocks
Nonnested Blocks

In contrast, look at the next image which shows several nested blocks. There's a “Columns” block with two nested “Column” blocks inside. One of those columns has a nested “Advanced Button” block inside.

Nested Blocks
Nested Blocks 1

Examples of nested blocks

Many blocks will automatically have nested blocks inside them. One example is the “Columns Manager” block in PublishPress Blocks. This block contains instances of the “Advanced Column” block as child blocks. Together these block types make it possible to create elaborate layouts.

Screen Shot 2021 06 17 At 11.29.48

An even more advanced example is the “Pricing Table” blocks in PublishPress Blocks Pro. This block produces a standard pricing table that you can see in the image below. Click here for a live demo.

Pricing Table
Pricing Table

However, this Pricing Table is constructed from multiple different blocks. This gives you a lot of flexibility because you can replace any of these blocks. Do you want to use a different columns block? That's no problem. Do you want to use a different button block? You can swap it out in less than a minute. You can also redesign the Pricing Table because every nested block can be drag-and-dropped to a different location.

Nested Blocks 2
Nested Blocks 2

This next image shows the first part of how this Pricing Table block appears in the “List View”:

Pricing Table List
Pricing Table List

Overall, we really recommend the use of nested blocks, particularly with the arrival of Full-Site Editing. This is a much more flexible approach when compared to having a single, fixed block for the whole table.


Nested blocks for developers

As a developer, you can create blocks that automatically load with nested blocks inside. This makes them much easier for your users to set up. You can develop nested blocks by using the InnerBlocks component. Here are some key things to know about InnerBlocks:

  • You can use only InnerBlocks once inside each block.
  • You have the flexibility to decide which block types you want to support. It can be one or more. Common examples for nested blocks are Button, Heading, Paragraph, etc.
  • You can choose the default attributes for the block(s) when they are inserted. For example, you can set a Heading block to have “Lorem ipsum” text or you can include a Button block with a specific color.
  • You can use blocks that are only available as a nested block. For example, in PublishPress Blocks, the “Advanced Column” block is restricted to working inside the “Columns Manager” block.

Leave a Reply

Your email address will not be published. Required fields are marked *