Gutenberg Block add element in the Editor inside InnerBlocks after div – editor-block-list

by

I want to wrap the InnerBlocks content in the editor with a custom React Element, but it is not rendering as I need it.

My code (simplified):

edit: ( props ) => {
   const {
     attributes:
     { options,
       otherAttributes,
     }, setAttributes, className } = props;

return (
<div className={`${options} ${otherAttributes}`} >
   <MyElement>
       <InnerBlocks />
   </MyElement>
</div>
);
},

The html output in wordpress editor comes out simplified as

<div class="my element classses">
    <div class="more sub classes from my element">
        <div class="my element">

            <div class="editor-inner-blocks block-editor-inner-blocks">

                <div class="editor-block-list__layout block-editor-block-list__layout">

                    <!-- actual inner blocks html comes out here -->
                    <div class="wp-block editor-block-list__block block-editor-block-list__block is-selected">
                        ...innerblock content many divs etc.
                    </div>
                    <div class="wp-block editor-block-list__block block-editor-block-list__block is-selected">
                        ...innerblock content many divs etc.
                    </div>
                    <div class="wp-block editor-block-list__block block-editor-block-list__block is-selected">
                        ...innerblock content many divs etc.
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>

But I need my custom element to be rendered inside the editors innerblock divs just before the list of innerblocks so it appears like this

<div class="editor-inner-blocks block-editor-inner-blocks">

    <div class="editor-block-list__layout block-editor-block-list__layout">

        <div class="my element classses">
            <div class="more sub classes from my element">
                <div class="my element">

                    <!-- actual inner blocks list comes out here -->
                    <div class="wp-block editor-block-list__block block-editor-block-list__block is-selected">
                        ...innerblock content many divs etc.
                    </div>
                    <div class="wp-block editor-block-list__block block-editor-block-list__block is-selected">
                        ...innerblock content many divs etc.
                    </div>
                    <div class="wp-block editor-block-list__block block-editor-block-list__block is-selected">
                        ...innerblock content many divs etc.
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

Is there a filter that might allow something like this? Or an attribute inside InnerBlocks that can be used? Any ideas?

0

Leave a Comment