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.
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.
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.
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.
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.
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.
This next image shows the first part of how this Pricing Table block appears in the “List View”:
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.