How to make repeated component/block in Gutenberg

I think the best way to approach this is by creating 2 blocks with a parent -> child relationship.

The child block would be a nested block only available within its parent block. Note the parent defined below.

registerBlockType( 'prefix/childblock', {
title: __( 'Inner Child Block' ), 
parent: ['prefix/parentblock'],

  attributes:{ ...//the rest of your block code continues

Then in the parent block you have innerblocks – where the child block can be added multiple times.

edit: props => {
    const { className } = props;
    return [
        <div className={className}>
            <InnerBlocks
                allowedBlocks={['prefix/childblock']}
            />
        </div>
    ];
},

Here’s a good post about how to do this in more depth

Leave a Comment