How to add full customization into custom wordpress gutenberg block?

Question

i am writing my own custom wordpress block. In editor it looks like this: edtor screenshot

And after it gets saved it looks like this: page screenshot

The problem is that i am using RichText wordpress component for text on the right side of the block, but i can't add some lists, buttons or other media inside it. How to add this functionality to my custom block?

Answer 1

Use InnerBlocks to create a container block for multiple different components. In your screenshot example, instead of using a RichText control, the core/paragraph block has formatting controls and can also transform from a paragraph into a list if needed.

If your block design is of a 'fixed' layout where there will always be "text / list / button", you can define a template of which blocks are allowed in InnerBlocks and then lock the template so new blocks cannot be added, eg:

const MY_TEMPLATE = [
    ['core/paragraph'],
    ['core/list'],
    ['core/buttons'],
];

// ...
edit: () => {
    return (
        <InnerBlocks
            templateLock="all" // optional
            template={MY_TEMPLATE}
        />
    );
},

The example above would create a Block layout in the Editor like:

For a complete overview and example of how to implement InnerBlocks, refer to the WordPress Developer Docs: https://developer.wordpress.org/block-editor/tutorials/block-tutorial/nested-blocks-inner-blocks/