Twill CMS (Laravel) - Show repeater data in content editor

Question

I've created a block for my "main content" and this block uses a repeater field to add multiple buttons.

It is rendering corrrectly on my frontend but the buttons aren't included in the content editor of Twill.

When I remove @yield from mainContent.blade.php and the @section from buttons.blade.php the buttons do get shown on the frontend and in the content editor, but they will be added outside of my mainContent block.

How do I get the buttons to show up in the drag and drop content editor of Twill?

views/admin/blocks/mainContent.blade.php

@twillBlockTitle('MainContent')
@twillBlockIcon('text')

...

@formField('repeater', [
'type' => 'buttons',
'name' => 'button_repeater'
])

views/admin/repeaters/buttons.blade.php

@twillRepeaterTitle('Buttons')
@twillRepeaterMax('4')

@formField('input', [
'name' => 'label',
'label' => 'Button text'
])

@formField('input', [
'name' => 'url',
'label' => 'Button url',
'fieldNote' => 'https://google.com/'
])

@formField('select', [
'name' => 'type',
'label' => 'Button type',
'placeholder' => 'Select a button type',
'options' => [
[
'value' => 'btn-primary',
'label' => 'Primary'
],
[
'value' => 'btn-secondary',
'label' => 'Secondary'
],
[
'value' => 'btn-link',
'label' => 'Link'
],
]
])

@formField('input', [
'name' => 'fa_icon',
'label' => 'Font Awesome icon code',
'fieldNote' => 'fa-users'
])

views\site\blocks\mainContent.blade.php

<section class="block block-main-content">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6">
                <h2>{{ $block->input('title') }}</h2>
                <p>{{ $block->input('content') }}</p>
                @yield('buttons')
            </div>
            <div class="col-12 col-lg-6">
                <img class="img-fluid" src="{{ $block->image('image', 'desktop') }}" />
            </div>
        </div>
    </div>
</section>

views\site\blocks\buttons.blade.php

@section('buttons')
<a href="{{ $block->input('url') }}" class="{{ $block->input('type') }} btn">
    @if (!empty($block->input('fa_icon')))
        <i class="fa {{$block->input('fa_icon')}}"></i>
    @endif
    <span>
        {{ $block->input('label') }}
    </span>
</a>
@append

score 1 · Accepted Answer · answered Aug 04 '21 at 12:25

With the help of the Twill Discord support (thanks ifox) I got it working.

"so there is actually a feature for what you are trying to do with a section yield when calling renderBlocks you can use false as the first param to indicate that you'd like to render child repeaters yourself in the parent blocks and for that to work in the editor previews, there is a twill.php config: twill.block_editor.block_preview_render_childs that you need to set to false"

views\site\blocks\mainContent.blade.php

<section class="block block-main-content">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6">
                <h2>{{ $block->input('title') }}</h2>
                <p>{{ $block->input('content') }}</p>
                @foreach ($block->children->where('type', 'buttons') as $child)
                    @include('site.blocks.buttons', ['child', $child])
                @endforeach
            </div>
            <div class="col-12 col-lg-6">
                <img class="img-fluid" src="{{ $block->image('image', 'desktop') }}" />
            </div>
        </div>
    </div>
</section>

views\site\blocks\buttons.blade.php


<a href="{{ $child->input('url') }}" class="{{ $child->input('type') }} btn">
    @if (!empty($child->input('fa_icon')))
        <i class="fa {{$child->input('fa_icon')}}"></i>
    @endif
    <span>
        {{ $child->input('label') }}
    </span>
</a>

views\site\page.blade.php

@extends('site.layouts.main')

@section('title', 'Page Title')

@section('content')
    {!! $item->renderBlocks(false) !!}
@endsection

Twill CMS (Laravel) - Show repeater data in content editor

1 Answers1