Nesting Blocks

In this lesson, we will show how to create a block by nesting other blocks. We will create a block to display the banner for the website. The banner area contains headings and a button. We have already created those blocks in the previous lessons.

Banner block

First, create a new folder inside the blocks folder called banner. Like the previous blocks we created, this block also has the following files:

1. block.json

2. index.js

3. edit.js

4. save.js

After creating these files, open the custom-blocks.js file inside the blocks folder. We need to import the index.js file inside the banner folder so that whatever code we write in there, gets compiled and placed in the build folder.