1

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.

  • 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 Jan 2 '19 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 Jan 2 '19 at 18:25
0

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

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.