The title pretty much says it all. I am working on a custom Gutenberg block that utilizes the InnerBlocks component and I have defined some allowed and default blocks. I also have templateLock set to all so the user cannot add, remove or move blocks around. However, this settings is affecting the core/buttons block and your ability to add a new button (since this block made up of individual core/button blocks).

Is there any way around this? Is there a way to specifically exclude the core/buttons blocks from the templateLock setting?

Below you will find my edit function for the block.

edit: function (props) {
    const { className, clientId } = props;

    /**
     * Add Item
     */
    const onRemoveItem = () => {
        setAttributes({ items: parseInt(`${items}`) - 1 })
        removeBlock(clientId)
    }

    return (
        <Fragment>
            <div className='listicles-innerblocks' >
                <InnerBlocks
                    template={[
                        ['core/cover'],
                        ['custom/listdt'],
                        ['core/buttons'],
                        ['custom/listdd'],
                    ]}
                    allowedBlocks={[
                        ['core/cover'],
                        ['custom/listdt'],
                        ['core/buttons'],
                        ['custom/listdd']
                    ]}
                    templateLock={'all'}
                />
            </div>
        </Fragment>
    );
},

The title pretty much says it all. I am working on a custom Gutenberg block that utilizes the InnerBlocks component and I have defined some allowed and default blocks. I also have templateLock set to all so the user cannot add, remove or move blocks around. However, this settings is affecting the core/buttons block and your ability to add a new button (since this block made up of individual core/button blocks).

Is there any way around this? Is there a way to specifically exclude the core/buttons blocks from the templateLock setting?

Below you will find my edit function for the block.

edit: function (props) {
    const { className, clientId } = props;

    /**
     * Add Item
     */
    const onRemoveItem = () => {
        setAttributes({ items: parseInt(`${items}`) - 1 })
        removeBlock(clientId)
    }

    return (
        <Fragment>
            <div className='listicles-innerblocks' >
                <InnerBlocks
                    template={[
                        ['core/cover'],
                        ['custom/listdt'],
                        ['core/buttons'],
                        ['custom/listdd'],
                    ]}
                    allowedBlocks={[
                        ['core/cover'],
                        ['custom/listdt'],
                        ['core/buttons'],
                        ['custom/listdd']
                    ]}
                    templateLock={'all'}
                />
            </div>
        </Fragment>
    );
},

• block-editor

• Did you ever find a solution to this? – Shoelaced Commented Feb 7, 2024 at 15:49

1 Answer 1

core/buttons is a container block, it's not the actual buttons. Instead, core/buttons contains core/button blocks. The same way that a core/columns block contians core/column blocks.

You need to add core/button to your allowed blocks list.