0

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.

Screenshot showing add buttons

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?

1 Answer 1

0

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.

1
  • Hey, I'd already tried templateLock="all" and it didn't work. I tried it again and sorry no go. It removes the desired Add Block.
    – Phil Huhn
    Oct 2, 2023 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.