Gutenberg InnerBlocks noallowedblocks on parent but allowedblock on Child

Question

This is a continuation of the following post: Custom Gutenberg block with nested InnerBlocks renderAppender not displaying add button

I solved one problem but created a different problem. I'm recreating a slider carousel control. The base slider block uses an InnerBlocks to render a template. I've added an additional block to render the items, which contains an InnerBlocks. The items block allows three blocks that each contain an InnerBlocks. The three blocks are slider item. The source here is only from the base slider block control.

My base slider template is as follows:

    const SLIDER_TEMPLATE = [
        ['core/heading', // header
            {
                placeholder: __("header title ..."),
                level: 2,
                className: 'gc-slider-header'
            }
        ],
        ['give-camp/gc-slider-items', {} ],
        ['core/paragraph', // footer
            {
                placeholder: __("footer title ..."),
                tagName: 'div',
                className: 'gc-slider-footer',
            }
        ]
    ];

The edit render is as follows:

    return (
        <div
            { ...blockProps }
            >
            <InspectorControls key="setting">
                ...
            </InspectorControls>
            <InnerBlocks
                template={SLIDER_TEMPLATE}
                allowedBlocks={ [ ] }
            />
            <div
                className="gc-slider-counter has-text-align-center"
                style={ { paddingTop: "3px", paddingBottom: "6px" } }
                >1 of ?
            </div>
        </div>
    );

The problem is; it is displaying two plus signs to add blocks. The plus sign in the middle is from the give-camp/gc-slider-items block in the above template.

The plus sign in the bottom right is not desired and will add an addition gc-slider-items block. How do I keep the desire plus sign and get rid of the not desired plus sign?

Answer 1

You need to set templateLock="all" on InnerBlocks:

<InnerBlocks
    template={SLIDER_TEMPLATE}
    templateLock="all"
    allowedBlocks={ [ ] }
/>

This locks the inner blocks to the blocks that were inserted using the template. The user should still be able to add inner blocks to the give-camp/gc-slider-items block, but they will not be able to add, move, or delete the other blocks.