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. Nested blocks are a really useful feature in the Gutenberg editor. Gutenberg uses of nested blocks in Columns, Cover, and Group blocks.
What are Nested Blocks in Gutenberg?
Nested Blocks 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. There is also a concept of child and parent blocks, child blocks are still a relatively newer addition to Gutenberg.
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.
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.
The benefits of Nested Blocks:
The concept of child blocks and nested blocks can be used to present content in a better and more organized manner.
Nested blocks make it easy to create advanced layouts and to edit the content on the backend.
Examples of Nested Blocks In Premium Blocks
- Content Switcher Block
- Container Block
- Team Member Block
- Bullet List Block
- Testimonial Block
- Section Block
- Pricing Table Block
- Icon Box Block
- Count Up Block
- Accordion Block
When click on any block inside nested blocks, it shows the block settings and controls.
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.
Conclusion
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.
