I am developing a small plugin that contains two blocks: one grid/container, that renders its contents in 3 equal width columns, and a grid/item, that is the child of the grid. But the grid is supposed to also allow core/image blocks.

To show what I aim for I made a little sketch:

As a default layout, when the grid is inserted first, I want 6 grid/items to be displayed. Via deleting items and adding and moving images, admins should be able to adjust the layout to their liking.

But the problem I am facing right now, is that no button to add more children is displayed when I pass a template to the InnerBlocks of the edit of the container. Even if I manually pass a renderAppender prop. But in the official documentation both props are used in the example section about renderAppender, so this should work together, right?

This is my code:

edit.js

import { __ } from "wordpress user/i18n";
import { useBlockProps, InnerBlocks } from "wordpress user/block-editor";

import "./gridEdit.scss";

export default function Edit() {
    const ALLOWED_BLOCKS = ["grid/item, core/image"];
    const MY_TEMPLATE = [
        ["grid/item"],
        ["grid/item"],
        ["grid/item"],
        ["grid/item"],
        ["grid/item"],
        ["grid/item"],
    ];

    return (
        <div {...useBlockProps()}>
            <InnerBlocks
                allowedBlocks={ALLOWED_BLOCKS}
                template={MY_TEMPLATE}
                renderAppender={() => <InnerBlocks.DefaultBlockAppender />} //makes no difference
            />
        </div>
    );
}

What am I missing?

Let me know, if you need more code snippets.
Thanks in advance 🙂