plugin development – Gutenberg InnerBlocks noallowedblocks on parent but allowedblock on Child


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 (
            { ...blockProps }
            <InspectorControls key="setting">
                allowedBlocks={ [ ] }
                className="gc-slider-counter has-text-align-center"
                style={ { paddingTop: "3px", paddingBottom: "6px" } }
                >1 of ?

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 of slider block control

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?

Phil Huhn 2 months 2023-10-01T19:37:56-05:00 0 Answers 0 views 0

Leave an answer