Custom Blocks / InnerBlocks get wrapped inside a <div>

[LittleGit1]

Hey everyone,

I'm attempting to use Laraberg which is a Gutenberg implementation for Laravel and for the most part it works really well however i'm having an issue with custom blocks and their child InnerBlocks being wrapped in an extra <div>.

Example:

Parent Edit.js

    const blockProps = useBlockProps();
    const innerBlocksProps = useInnerBlocksProps(blockProps, {
        allowedBlocks: ["spring/list-item", "core/heading"],
        template: [["spring/list-item"]],
    });

return (
 <>
  ...
            
  <ul {...innerBlocksProps}></ul>
 </>
);

Child edit.js

const Edit = ({ attributes, setAttributes, context }) => {
    const blockProps = useBlockProps();
    return <li {...blockProps}>Hello</li>;
};

Renders this in the editor:

  <div
                tabindex="0"
                id="block-a5f9386e-fdfa-445c-8463-16a9e632b1d2"
                role="document"
                aria-label="Block: List"
                data-block="a5f9386e-fdfa-445c-8463-16a9e632b1d2"
                data-type="spring/list"
                data-title="List"
                class="block-editor-block-list__block wp-block is-selected"
            >
                <ul
                    tabindex="0"
                    id="block-a5f9386e-fdfa-445c-8463-16a9e632b1d2"
                    role="document"
                    aria-label="Block: List"
                    data-block="a5f9386e-fdfa-445c-8463-16a9e632b1d2"
                    data-type="spring/list"
                    data-title="List"
                    class="block-editor-block-list__block wp-block is-selected block-editor-block-list__layout"
                    data-is-drop-zone="true"
                >
                    <div
                        tabindex="0"
                        id="block-d3b35e59-dc07-416f-8679-1bf5b2cf6d4d"
                        role="document"
                        aria-label="Block: List Item"
                        data-block="d3b35e59-dc07-416f-8679-1bf5b2cf6d4d"
                        data-type="spring/list-item"
                        data-title="List Item"
                        class="block-editor-block-list__block wp-block"
                    >
                        <li
                            tabindex="0"
                            id="block-d3b35e59-dc07-416f-8679-1bf5b2cf6d4d"
                            role="document"
                            aria-label="Block: List Item"
                            data-block="d3b35e59-dc07-416f-8679-1bf5b2cf6d4d"
                            data-type="spring/list-item"
                            data-title="List Item"
                            class="block-editor-block-list__block wp-block"
                        >
                            Hello
                        </li>
                    </div>
                </ul>
            </div>

Does anyone know why this might be happening? It seems to be limited to custom blocks only. I have tested with a core/heading inside my custom block and that renders as expected. I have also tested it in a WordPress project and works as expected.

Any thoughts or suggestions would be greatly appreciated.

[t-hamano]

Hi. I think it is because apiVersion is not defined in block.json. 2 or 3 would work just fine.

[LittleGit1]

Thank you very much :)