Replies: 1 comment 1 reply
-
|
Thanks for the kind words @webcraft! You're correct in that a block can currently only have one child slot. What you could do, is create a columns block like so: class ColumnsBlock extends Block
{
public string $name = 'Columns';
public static string $reference = 'prefix.columns';
public array $data = [
'columns' => '2',
];
public function __construct()
{
if (! $this->hasChildren()) {
$this->children = [
['block' => 'prefix.column'],
['block' => 'prefix.column'],
];
}
}
public function options()
{
return [
Input::make(__('Amount of columns'), 'columns', ['type' => 'number', 'min' => 1, 'max' => 4]),
];
}
public function render()
{
$columns = match ($this->data['columns'] ?? '2') {
'2' => 'md:grid-cols-2',
'3' => 'md:grid-cols-3',
'4' => 'md:grid-cols-4',
default => 'md:grid-cols-1',
};
// if ($this->isInEditor()) {
// $columns .= ' [&_>_div]:border [&_>_div]:border-dashed';
// }
return <<<HTML
<div>
<!-- Paver::children({"allowBlocks": ["prefix.column"], "attributes": {"class": "grid gap-4 md:gap-8 grid-cols-1 {$columns}", "data-direction": "horizontal"}}) -->
</div>
HTML;
}
}Then a column block with a child slot in it (where you, optionally, can specify which blocks are allowed): class ColumnBlock extends Block
{
public string $name = 'Column';
public static string $reference = 'prefix.column';
public bool $asChildOnly = true;
public function __construct()
{
if (! $this->hasChildren()) {
$this->children = [
['block' => 'prefix.text', 'data' => ['content' => 'Lorem ipsum...']],
];
}
}
public function render()
{
return <<<'HTML'
<div>
<!-- Paver::children({"allowBlocks": ["prefix.text", "prefix.image", "prefix.button"]}}) -->
</div>
HTML;
}
}Note that I've used some Tailwind classes, if you are not using tailwind, you'd have to add your own styling. Just as an example I also referred to some blocks that you may not have. Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your answer, @jeffreyvr ! Keep up the good work! |
Beta Was this translation helpful? Give feedback.
-
Hi Jeffrey, after researching and experimenting with several page builder libraries, I came across Paver. I must say, it's exceptionally well-crafted and aligns closely with what I’m looking for. Thank you for creating such a fantastic tool!
I do have a specific requirement: the ability to define a multi-column grid. My current approach is to create a Block with multiple child slots. Here’s a simplified example using a table for demonstration:
However, this doesn’t seem to work as I expected. When I insert nested blocks into the child slots, only the first slot is preserved after saving, and the second slot ends up duplicating the children from the first.
Is it correct that each block is currently limited to a single child slot? If so, is there an alternative way to achieve this in Paver’s current state? How would you recommend implementing a multi-column layout?
Thanks in advance for your guidance!
Beta Was this translation helpful? Give feedback.
All reactions