plugin development - How to make repeated componentblock in Gutenberg

admin管理员组

文章数量:1296294

I want to create a custom Gutenberg block with these features below

• A parent container with repeated child component.
• The repeated component can be added/removed(if existed before) as many times the user wants.
• Will have an image upload option for each component

I can't find the documentation for repeated components or any good code examples. I feel like this a very important part of block development as this kind of blocks are very common in most projects. So, any code example/documentation or guidance is very much appreciated.

Example: Image Slider with a caption, Multiple 'card' like blocks inside a parent block.

I want to create a custom Gutenberg block with these features below

• A parent container with repeated child component.
• The repeated component can be added/removed(if existed before) as many times the user wants.
• Will have an image upload option for each component

I can't find the documentation for repeated components or any good code examples. I feel like this a very important part of block development as this kind of blocks are very common in most projects. So, any code example/documentation or guidance is very much appreciated.

Example: Image Slider with a caption, Multiple 'card' like blocks inside a parent block.

• plugin-development
• block-editor

Share Improve this question edited Jan 2, 2019 at 18:23 Paranoid Android asked Jan 2, 2019 at 17:13 Paranoid AndroidParanoid Android 14111 silver badge44 bronze badges 3

• Your parent and child components would be better off as a parent block with nested child blocks ( whitelisted so only that block can be added ). Re-implementing nested blocks inside a block using custom JS seems wasteful.. As an aside, you never mentioned what you're actually trying to implement that requires this, knowing would be super helpful, as well as making it easier to understand – Tom J Nowell ♦ Commented Jan 2, 2019 at 17:53
• @TomJNowell, I have added examples on the question, sorry for not being clear earlier. And I didn't understand about the whitelisting part. Hope the new examples made it clear on what I'm trying to make. – Paranoid Android Commented Jan 2, 2019 at 18:25
• Nested blocks!!! – Tom J Nowell ♦ Commented Apr 5, 2021 at 11:13

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： plugin developmentHow to make repeated componentblock in Gutenberg