1

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: Sketch of the desired block

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/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/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 :)

1 Answer 1

1

I have found my typo - It should be

const ALLOWED_BLOCKS = ["grid/item", "core/image"];

not

const ALLOWED_BLOCKS = ["grid/item, core/image"];

If the allowed block type does not exist it only makes sense not to display a button to add more blocks :D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.