Repeating blocks

[braco]

Do you have any plans to add a repeating input helper like Gutenblock?

We've included a Select MediaSelect Input Inspector Repeat and other form fields to help you build blocks faster. A repeat component will handle the hard work of letting users add infinite items to an array of form fields, replacing items, and deleting them.

[ahmadawais]

I think that would make this start way too opinionated. Don't ya think so?

[braco]

Definitely not, at least not a good implementation. That's a huge missing piece in Gutenberg development – it's a huge pain to build components that have repeating elements.

[braco]

A dirty functional approach

https://gist.github.com/braco/5c48ad162dcd27f072debc3967aee0b0

[drdogbot7]

it's a huge pain to build components that have repeating elements.

Not exactly the same thing, but InnerBlocks can be used in most cases when I would have used a repeater in the past. Create a container block to contain your repeating element, and then create a separate block for use inside.

You can restrict the container to ONLY contain your repeater, and you can restrict your repeater to ONLY be used inside your container.

https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/inner-blocks

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';

registerBlockType( 'my-plugin/container', {
	// ...

	edit( { className } ) {
		return (
			<div className={ className }>
				<InnerBlocks
          allowedBlocks={ 'my-plugin/repeater' }
          template={ [ 'my-plugin/repeater' ] }
        />
			</div>
		);
	},

	save() {
		return (
			<div>
				<InnerBlocks.Content />
			</div>
		);
	}
} );

registerBlockType( 'my-plugin/repeater', {
  parent: [ 'my-plugin/container' ],

	edit( { className } ) {
		return (
			<div className={ className }>
         {/* whatever */}
			</div>
		);
	},

	save() {
		return (
			<div>
				{/* whatever */}
			</div>
		);
	}
} );

[braco]

Thanks @drdogbot7, how good is the UX around that feature?

[drdogbot7]

It can still be a bit rough around the edges, but the core functionality works well, especially if you're keeping it relatively simple. From an end-user perspective I think the most confusing part is determining whether you have the container block or a child block selected—if you've played around with the core/columns block, you know what I'm talking about.

Since it's a core feature, it feels pretty safe to make use of it. I assume the implementation will only improve.

[braco]

For anyone else who sees this, InnerBlocks presents some problems, like three levels of extra markup between the container and children. It will save() the way you expect, but the editing experience is bad IMO.

[rodrigodagostino]

I think the most confusing part is determining whether you have the container block or a child block selected

This is the main reason why I'm trying to develop a single block to deal with repeating elements.

For anyone else who sees this, InnerBlocks presents some problems, like three levels of extra markup between the container and children.

I've also noticed that, which makes it a bit complicated to properly arrange the inner elements in the desired way.

I found out that Kadence Blocks use the kind of approach that I'm trying to achieve in their Advanced Button and Icon blocks, but I haven't been able to replicate it in my own block.

Have you made any progress regarding this matter, @braco @drdogbot7 ?

[Jebble]

This discussion should take place in the Gutenberg repo, it has nothing to do with CGB.

[rodrigodagostino]

@Jebble thanks for your amazing contribution! [clap] [clap]

[Jebble]

@Jebble thanks for your amazing contribution! [clap] [clap]

It will simply have a lot more traction in the correct repo as this has simply nothing to do with what you're discussing. I'm sorry you can't handle some feedback :)