Twill 3.0: How to generate a repeater block?

[mdaelemans]

Hi

I want to make a 'Cards' block in the Twill 3.0 block editor with a repeater field to add up to 3 cards to the container block. I have generated both 'Cards' and 'Card' blocks, but when adding the repeater field with type 'card' to the block editor, it stays empty in the block editor.

This is the 'Cards' block (the container):

class Cards extends TwillBlockComponent
{
    public function render(): View
    {
        return view('components.twill.blocks.cards');
    }

    public function getForm(): Form
    {
        return Form::make([
            Repeater::make()->type('card-item')->max(3),
        ]);
    }
}

This is the 'Card' block:

class Card extends TwillBlockComponent
{
    public function render(): View
    {
        return view('components.twill.repeaters.card');
    }

    public function getForm(): Form
    {
        return Form::make([
            Medias::make()->name('image')->label('Afbeelding')->translatable(),
            Input::make()->name('title')->translatable(),
            Wysiwyg::make()->name('text')->translatable(),
            Input::make()->name('link_label')->translatable(),
        ]);
    }
}

When adding the 'Cards' block in the block editor, it stays empty, so I am not able to add multiple cards to the container.

The documentation is not clear on how to generate repeater blocks.

What am I doing wrong?

Thanks for your help!

[ifox]

Hi @mdaelemans, repeaters are not exactly blocks, so creating a block and referencing it in the type of a repeater field wouldn't work. For your use case, an InlineRepeater field would work great in your Cards block.

[onkihara]

Had exactly the same troubles getting this to work. How precidely do I reference the card block in the InlineRepeater?

[ifox]

You don't @onkihara. There is no need for a block class with an inline repeater, as you define the fields directly on the InlineRepeater field itself. If you want to reuse that composition of fields across multiple inline repeaters you are free to move that to a shared class, but it doesn't need/shouldn't be a block.

[ifox]

class Cards extends TwillBlockComponent
{
    public function render(): View
    {
        return view('components.twill.blocks.cards');
    }

    public function getForm(): Form
    {
        return Form::make([
            InlineRepeater::make()
                ->name('cards')
                ->max(3)
                ->fields([
                    Medias::make()->name('image')->label('Afbeelding')->translatable(),
                    Input::make()->name('title')->translatable(),
                    Wysiwyg::make()->name('text')->translatable(),
                    Input::make()->name('link_label')->translatable(),
                ])
        ]);
    }
}

[onkihara]

Thanks a lot for the clarification @ifox - makes perfectly sense!