How to Control the Allowed Blocks in Gutenberg InnerBlocks

• The article explains how to use the noallowedblocks and allowedblock properties in Gutenberg InnerBlocks to create custom nested blocks with controlled block selection in WordPress.
• The article also shows how these properties affect the block inserter and the block toolbar, and how to find the block names for these properties.

Gutenberg is the default block editor for WordPress, which allows you to create and edit content using blocks. Blocks are modular elements that can be combined to create rich and engaging layouts. Some blocks, such as Columns, Group, or Cover, can contain other blocks inside them. These are called nested blocks, and they are created using the InnerBlocks component.

The InnerBlocks component is a powerful tool for creating custom nested blocks, but it also comes with some challenges. One of them is how to control which blocks are allowed inside the InnerBlocks. By default, InnerBlocks allows you to insert any registered block type, but sometimes you may want to limit the options or specify a certain set of blocks.

In this article, we will show you how to use the noallowedblocks and allowedblock properties in Gutenberg InnerBlocks to create custom nested blocks with controlled block selection. We will also explain the difference between these two properties and how they affect the block inserter and the block toolbar.

What are noallowedblocks and allowedblock properties?

The noallowedblocks and allowedblock properties are attributes that you can pass to the InnerBlocks component to define the set of blocks that are allowed or not allowed inside the InnerBlocks. They are both arrays of block names, such as ‘core/paragraph’, ‘core/image’, or ‘my-plugin/my-custom-block’.

The noallowedblocks property specifies which blocks are not allowed inside the InnerBlocks. For example, if you set noallowedblocks to [‘core/paragraph’, ‘core/heading’], then you will not be able to insert a paragraph or a heading block inside the InnerBlocks.

The allowedblock property specifies which blocks are allowed inside the InnerBlocks. For example, if you set allowedblock to [‘core/image’, ‘core/gallery’], then you will only be able to insert an image or a gallery block inside the InnerBlocks.

How do noallowedblocks and allowedblock properties affect the block inserter and the block toolbar?

The block inserter is the interface that allows you to add new blocks to your content. It can be accessed by clicking on the plus icon at the top left corner of the editor, or by clicking on the plus icon between two existing blocks.

The block toolbar is the interface that allows you to edit and transform existing blocks. It can be accessed by selecting a block and clicking on the three dots icon at the top right corner of the block.

The noallowedblocks and allowedblock properties affect both the block inserter and the block toolbar in different ways.

The noallowedblocks property

The noallowedblocks property affects only the block inserter. It does not affect the block toolbar. This means that if you set noallowedblocks to [‘core/paragraph’, ‘core/heading’], then you will not see these blocks in the block inserter, but you will still see them in the block toolbar.

This also means that you can still transform an existing block into a block that is not allowed by using the block toolbar. For example, if you have an image block inside your InnerBlocks, and you set noallowedblocks to [‘core/paragraph’, ‘core/heading’], then you can still transform the image block into a paragraph or a heading block by using the transform option in the block toolbar.

The allowedblock property

The allowedblock property affects both the block inserter and the block toolbar. It overrides any other settings or filters that may apply to these interfaces. This means that if you set allowedblock to [‘core/image’, ‘core/gallery’], then you will only see these blocks in both the block inserter and the block toolbar.

This also means that you cannot transform an existing block into a block that is not allowed by using either interface. For example, if you have an image block inside your InnerBlocks, and you set allowedblock to [‘core/image’, ‘core/gallery’], then you cannot transform the image block into any other block type by using either the block inserter or the block toolbar.

How to use noallowedblocks and allowedblock properties in Gutenberg InnerBlocks?

To use these properties in Gutenberg InnerBlocks, you need to create a custom nested block using JavaScript and PHP.

Once you have created your custom nested block, you can add either or both of these properties to your InnerBlocks component in your JavaScript file. For example, if your custom nested block is called ‘my-plugin/my-nested-block’, then your JavaScript file may look something like this:

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';

registerBlockType( 'my-plugin/my-nested-block', {
    title: 'My Nested Block',
    icon: 'columns',
    category: 'layout',
    edit: ( props ) => {
        return (
            <div { ...props }>
                <InnerBlocks
                    noallowedblocks={ ['core/paragraph', 'core/heading'] }
                    allowedblock={ ['core/image', 'core/gallery'] }
                />
            </div>
        );
    },
    save: ( props ) => {
        return (
            <div { ...props }>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

This code will register a custom nested block that allows only image and gallery blocks inside it, and does not allow paragraph and heading blocks inside it.

You can then use this custom nested block in your content by inserting it from the block inserter. You will see that the block inserter and the block toolbar will reflect the noallowedblocks and allowedblock properties that you have set.

Frequently Asked Questions (FAQs)

Question: What is the difference between noallowedblocks and allowedblock properties?

Answer: The noallowedblocks property specifies which blocks are not allowed inside the InnerBlocks, while the allowedblock property specifies which blocks are allowed inside the InnerBlocks. The noallowedblocks property affects only the block inserter, while the allowedblock property affects both the block inserter and the block toolbar.

Question: How do I find the block names for these properties?

Answer: You can find the block names for these properties by inspecting the source code of the blocks that you want to include or exclude. You can also use a plugin like Block Attributes Glossary to see the block names and other attributes of all registered blocks in your WordPress site.

Question: Can I use both noallowedblocks and allowedblock properties together?

Answer: Yes, you can use both properties together, but it may not make much sense. If you use both properties, then the allowedblock property will override the noallowedblocks property. For example, if you set noallowedblocks to [‘core/paragraph’, ‘core/heading’] and allowedblock to [‘core/image’, ‘core/gallery’], then you will only see image and gallery blocks in both the block inserter and the block toolbar, regardless of the noallowedblocks property.

Summary

In this article, we have learned how to use the noallowedblocks and allowedblock properties in Gutenberg InnerBlocks to create custom nested blocks with controlled block selection. We have also learned how these properties affect the block inserter and the block toolbar, and how to find the block names for these properties.

We hope that this article has helped you understand how to use these properties in Gutenberg InnerBlocks to create more flexible and customized nested blocks for your WordPress site.