When creating a custom category into which you want to group your own blocks, you may also want to create a block that can only hold blocks that belong to that group. Or, in other words, you may want to create a block that can nest related blocks.
For example, in the last post, I showed how to create a custom category into which blocks can be grouped. And that works well when you can want to create a group for related blocks.
This can be taken a step further, though. Say you want to create a custom block that can only hold blocks that are part of your custom category.
The primarily things that need to be done to achieve this are:
- Make sure the block you’re creating is also part of the same custom category.
- In the
supportsattribute, specifically list the blocks the block in question will allow.
The edit and save functions don’t need to be particularly fancy for this unless you want to achieve something more.
First, the attributes section of your block may look something like this:
Notice here it has the standard title, icon, and category all blocks have (and the category matches what was outlined previously. Now add an allowedBlocks array to the supports attribute. This is where you can restrict the blocks that can be contained within this block.
The important thing to note is that you know the namespace and name of the blocks (these are of the format namespace/block-name and are usually was you find when calling registerBlockType.
Finally, in the edit function, add this attribute to the InnerBlocks components. From the component in the GitHub repository:
InnerBlocks exports a pair of components which can be used in block implementations to enable nested block content.
The code for edit can, out of the box, look like this:
And the save function looks like this:
Finally, once you’ve done all of this and rebuilt the assets, then the block panel within the editor should yield something that looks like this:
And that’s it.
As mentioned earlier, you can see edit and save are simple. It’s possible to make them as elaborate as needed, but if you’re just building a container to support your custom blocks, this is all you need.
