AnswerBun.com

How to make repeated component/block in Gutenberg

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.

One Answer

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

Answered by Lyle Bennett on January 1, 2021

Add your own answers!

Related Questions

Style WooCommerce Product Search Widget

0  Asked on December 19, 2020 by chirlet-deusa

     

Role – edit page but not publish

1  Asked on December 15, 2020 by miri-ull

   

How to create a breadcrumb for pages?

3  Asked on December 13, 2020 by msrajjc2

 

Weird issue with is_pages() with array

0  Asked on December 11, 2020 by birdseyedesign

 

WP_Query will not display draft posts

4  Asked on December 11, 2020 by ben-racicot

   

Flickity slider on WordPress: Modify behaviour

1  Asked on December 11, 2020 by vicdilu

 

Add the same content to multiple pages

1  Asked on December 10, 2020

   

Understanding WordPress(framework?) Web Development

2  Asked on December 10, 2020 by anuj-kaithwas

 

How to use value from modal tinymce windowManager?

1  Asked on December 10, 2020 by patrick-paul

   

wp_editor() renders outside wrapping div

0  Asked on December 9, 2020

 

WP REST API: Order posts by meta value (acf)?

2  Asked on December 9, 2020 by mauro-bringolf

       

How to incluide custom field in WooCommerce email using placeholder

0  Asked on December 8, 2020 by santiago-cuartas-rmrz

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.