Search⌘ K
AI Features

Nesting Blocks

Explore how to create a reusable banner block in WordPress by nesting existing heading and button blocks. Understand how to register blocks client-side and server-side and use the InnerBlocks component to manage block hierarchy for custom, interactive themes.

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 ...