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

admin管理员组

文章数量:1417721

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?

本文标签： plugin developmentGutenberg Block add element in the Editor inside InnerBlocks after diveditorblocklist