Nested blocks

Since Twill 3.x it is possible to nest blocks. In theory to infinity.

To make this work you can add one or more block editors to your block.

However, you have to specify their names

 1@twillBlockTitle('Nested Block left right')
 2@twillBlockIcon('text')
 3@twillBlockGroup('app')
 4 
 5<x-twill::input
 6    name="title"
 7    label="Title"
 8    :translated="true"
 9/>
10 
11<x-twill::block-editor name="left"/> 
12<x-twill::block-editor name="right"/> 

With the example above we now have 2 editors. One is named left and the other right.

Now, let's move over to the rendering aspect.

# Basic usage

Following the documentation of block editors we know already how to render a block.

 1@php
 2    /** @var \A17\Twill\Services\Blocks\RenderData $renderData */
 3@endphp
 4<div style="width: 100%">
 5    <div style="width: 50%; float: left;">
 6        Left
 7        {!! $renderData->renderChildren('left') !!}
 8    </div>
 9    <div style="width: 50%; float: left;">
10        Right
11        {!! $renderData->renderChildren('right') !!}
12    </div>
13</div>

$renderData is new in Twill 3.x, it is a nested representation of the data to be rendered.

# Manually rendering

By default, the solution above will render all the children next to each other. But if you wish to wrap the children each in their own container you can use the getChildrenFor method on the $renderData

 1@php
 2    /** @var \A17\Twill\Services\Blocks\RenderData $renderData */
 3@endphp
 4<div style="width: 100%">
 5    <div style="width: 50%; float: left;">
 6        Left
 7 
 8        @foreach($renderData->getChildrenFor('left') as $leftBlock)
 9            <div style="background-color: green; padding: 150px;">
10                {!! $leftBlock !!}
11            </div>
12        @endforeach
13    </div>
14    <div style="width: 50%; float: left;">
15        Right
16 
17        @foreach($renderData->getChildrenFor('right') as $rightBlock)
18            <div style="background-color: orange; padding: 150px;">
19                {!! $rightBlock !!}
20            </div>
21        @endforeach
22    </div>
23</div>