I want to do the following. I want to limit the first root block types to two types. These inner types can have all but the first root types.

Now, from what I understand you cannot tell the root block to limit it. So I was thinking of the following:

• Root block
• Set the first block with gutenberg templates
• Custom wrapper block
• Limit the wrapper block with <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
• limit the possibility to add more blocks to root

Or in other words. The root should only allow 2 block types

• my-bootstrap-blocks/container
• my-bootstrap-blocks/spacer

Since I don't see a way to do this I populate the root with a default wrapper block and remove the possibility to add new blocks by hiding the appender button with css.

I was thinking of the following:

functions.php

add_action( 'init', 'insert_template' );
function insert_template() {
  $post_type_object = get_post_type_object( 'page' );
  $post_type_object->template =[ [ 'my-bootstrap-blocks/wrapper'] ];
}

my-bootstrap-blocks/wrapper block.js (detail from code)

edit( { className } ) {
        const ALLOWED_BLOCKS = [ 'my-bootstrap-blocks/container', 'my-bootstrap-blocks/spacer' ];

        return (
            <div className={ className }>
                <InnerBlocks
                    allowedBlocks={ ALLOWED_BLOCKS }
                />
            </div>
        );
    },

    save() {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },

editor.css of the wrapper block

.is-root-container {
  > .block-list-appender{
    display: none;
  }
}

This way the appender gets hidden only in the root container of the gutenbergblocks.

One thing remains, the appender in the top left still remains active and gets to add new blocks to the root. Now I don't want that.

The question

• Is this the best approach?
• Is there a way to do this better?
• If this is considered a good approach, how can I disable the root appender top left. But keep it when it's selected in an InnerBlock