How to allow core Gutenberg blocks selection only when you are inside a custom inner block

Question

By adding a new post, we have access to all core blocks from the very beginning. I would like to limit this and prevent some core blocks from being used on the main level. They should only be available inside my custom inner block.

I have been given some advice about:

• using the template with init action
• using the parent attribute in custom block

but all this does not limit the availability of blocks at the main level

I figured maybe hiding blocks, depending on where the inserter is in the DOM structure might be an idea but I'm not sure it's a good direction.

Answer 1

You will need to filter the template for the post type:

add_action( 'init', 'setup_template' );

function setup_template() {
    $post_object = get_post_type_object( 'post' );
    $post_object->template = [ [ 'your/custom/block' ] ];
    $post_object->template_lock = 'all';
}

This will pre-populate the post with a single instance of your custom block and lock it from being changed.

By locking it, they cannot insert any top-level blocks but can still insert items into your custom block. There is more info in the docs about locking, you may need insert instead of all depending on your intent.

Hope it helps.

Answer 2

If I understand your post correctly, I believe you are looking for ALLOWED_BLOCKS property. Use this in your Inner-blocks in following.

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
<InnerBlocks
    allowedBlocks={ ALLOWED_BLOCKS }
/>

You can find more info here https://developer.wordpress.org/block-editor/tutorials/block-tutorial/nested-blocks-inner-blocks/#allowed-blocks

Answer 3

Adding to @Welcher's answer, because it got me about 85% percent of the way there.

There are a few steps that it took to get this to work:

1. Write the template and lock it (as the original answer indicated)
2. Create an allowedBlocks list and apply it to your InnerBlocks component in the render callback function or template
3. Unlock the InnerBlocks component so the blocks on your allow list can be added/moved/etc.

In functions.php:

modified from original answer to show correct variables

add_action( 'init', 'setup_template' );

function setup_template() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = [ [ 'your/custom/block' ] ];
    $post_type_object->template_lock = 'all';
}

In your render.php or callback function

<?php echo '<InnerBlocks allowedBlocks="' . esc_attr( wp_json_encode( $array_variable_of_blocks ) ) . " templateLock="false" />

Remember to set up your $array_variable_of_blocks with an array of which blocks should be allowed inside the InnerBlocks component. This can be done at the top of the file, or set globally in functions.php and declared at the top of the file.