Nested Blocks and Child Blocks in Gutenberg
It is common knowledge by now that blocks are one of the crucial elements in Gutenberg. Everything that you build with Gutenberg can be accomplished by means of blocks. In this article, we will be discussing the concept of nested blocks in Gutenberg. What exactly are these nested blocks and do they serve a specific purpose? Read on to learn more.
What are Nested Blocks in Gutenberg?
First, let’s take a look at what nested blocks in Gutenberg actually means.
By “nested”, we mean a block that can be added or exist within another block. Thus, we are implying blocks that are usable as sub-blocks of existing ones.
The idea is simple:
- You can create a layout based on multiple columns using any existing block.
- Thereafter, you can just add other content blocks within the said columns.
- In other words, you are basically “nesting” one block’s content — be it images, video or text — within an existing block’s columns.
That’s basically it! By nesting blocks, you can work with additional forms of content and get better formatting for presenting your content on the frontend. It can help in layout and structuring of your content on the frontend as well.
Now, we can move on to some more details!
How do Nested Blocks in Gutenberg Work?
In order to nest a block within another block, we need two things:
- Sub-blocks that can be nested under another block
- A primary block that allows other blocks within its fields.
In Gutenberg, we have a “Columns” block. However, unlike the Text Columns block, this one does things differently: it lets you nest content blocks within its columns! In other words, the Columns block is the primary block that we are looking for.
Once you add the Columns block in the content area, you can then insert text, pictures and other content-related blocks in its columns. Such blocks, once inserted within the columns, are then nested under the Columns block.
Here is the process in action: first, we insert the Columns block in our content area.
Then, we are free to nest blocks under it as needed.
Points to Remember
Before going any further, it’s important to keep in mind the fact that Gutenberg is still under active development. As a result, certain presentation issues may arise when working with nested blocks. This can primarily be in terms of content alignment, blocks not rendering properly on the frontend, etc. However, with newer versions and bug fixes coming out for Gutenberg with each passing day, it is only a matter time before such minor hiccups are sorted once and for all.
Another thing worth noting, especially if you are a developer working with nested blocks in your custom blocks is that you can restrict the nature or type of content that can be added. For instance, you can choose to only permit images to be added in the nested blocks, and so on.
Additional Info: Child Blocks
Nested blocks in Gutenberg are not the only thing that allows a block to exist within another one. There is also a concept of child and parent blocks. However, unlike nested blocks that have been around for quite a while now, child blocks are still a relatively newer addition to Gutenberg.
The idea here is straightforward: developers can register a block as child of another existing block. In such cases, the child block will not be visible unless the user is working within the concept of the parent block.
A good use for such child and parent blocks can be when working with mutually related forms of content: for example, the “Testimonials” block can have a child block for “Client Name”, or the “Portfolio” block can have a child block for the nature or genre of work, such as Photography, Pastel, Oil Painting, and so on.
To Sum it Up
As you can see, the concept of child blocks and nested blocks in Gutenberg can be used to present content in a better and more organized manner. This can help in proper structuring of the content for the frontend as well as easier editing of content on the backend.
If you are working with Gutenberg, make sure you give nested blocks a try! With the help of a multi-column layout, you can nest related types of content with ease. And if you have already had the opportunity of working with nested blocks in Gutenberg, how has your experience been? Share your experience with us using the comments below!
