Problem installing Kirby page builder

[zazvi_19227]

Hello Everyone !

I am using Kirby CMS 5.1.4, I have just finished the installation and the panel is ready.

Now I would like to create a page builder. I believe it is better to use the Kirby block system than layouts, if I understand correctly.
So when I open a page and start building it, I want to be able to choose a layout (one column, two columns, 1/4+1/2+1/4, or 1/3+1/3+1/3, or 1/4+1/4+1/4+1/4—in short, all possible layout combinations).

Then I want to be able to add a title, text, button, image, quote, etc.
So I created a home.yml file, home.php, and a default page template that will also use this builder.
I created .yml files in my blueprints/blocks/… folder, for example : blueprints/blocks/titre.yml
I also created .php files in my snippets/blocks/… folder, for example : snippets/blocks/titre.php

However, when I create a page in my panel, nothing works. All the block elements are there but empty, and my page displays a blank page.

Thank you in advance for your help. I’m stuck and don’t know where to look. I’ve checked the semantics and everything seems OK, but I can’t find where the error is coming from
.
Have a nice day.

For example, this is my home.yml :
title: Accueil
preset: page

fields:
builder:
label: Contenu
type: blocks
fieldsets:
layout: layout
titre: titre
texte: texte
image: image
bouton: bouton

and my home.php :

<?php snippet('header') ?> <?php foreach ($page->builder()->toBlocks() as $block): ?>

<?= $block ?>

<?php endforeach ?> <?php snippet('footer') ?>

+++

[texnixe]

If you want to use layouts, then you have to use the layouts, field, not the blocks field. What I don’t understand is what you have under fieldset, that’s not according to the documentation. A fieldset definition only accepts a list of blocks, or a new block definition, see Blocks | Kirby CMS.

[zazvi_19227]

Thanks for your return,

Is it recommended to use layouts with Kirby 5?
I’m having trouble understanding the difference between layout and block, I think…
Do I need to create a base with layouts to use the blocks?

[texnixe]

The blocks field is intended for a single “column” of text, where you add different blocks types one after the other.

The layouts field, in contrary, allows you to put block types into a layout, where each layout item can have 1 to x columns. Into these layout columns, you place block types as needed.

So, the different block types can be used in both the blocks field and the layouts field.

If you check out the Starterkit, you can see the blocks field in action in the children of the notes page, and the layout field in action in the about page. In the corresponding YAML files for those pages, you can inspect how they are set up.

Blocks field:

+-----------------------------+
|  TEXT BLOCK                 |
+-----------------------------+
|  IMAGE BLOCK                |
+-----------------------------+
|  QUOTE BLOCK                |
+-----------------------------+
|  TEXT BLOCK                 |
+-----------------------------+

Layouts:

+------------------------------------------------------------+
|                      LAYOUT 1: TWO COLUMNS                 |
+------------------------------------------------------------+
|  TEXT BLOCK                      |  IMAGE BLOCK            |
|  IMAGE BLOCK                     |  TEXT BLOCK             |
+------------------------------------------------------------+

+------------------------------------------------------------+
|                    LAYOUT 2: THREE COLUMNS                 |
+------------------------------------------------------------+
|   TEXT BLOCK   |   IMAGE BLOCK   |   QUOTE BLOCK           |
+------------------------------------------------------------+

+------------------------------------------------------------+
|                    LAYOUT 3: FULL WIDTH                    |
+------------------------------------------------------------+
|                      TEXT BLOCK                            |
+------------------------------------------------------------+

[jimbobrjames]

Basicially if just use the blocks field that will allow to create blocks one after the other, all stacked up, full width of the parent container you output the blocks into on the front end via the PHP template.

You can make this more powerful by using the layout field, into which you can put blocks.

Layouts allows you to create columns into which you can put blocks. However, you need to handle this on the front end vis css to create the desired layout visually.

[jimbobrjames]

The kirby demokit has some working examples of the layouts and blocks being used together.

Try Kirby for free

You can have a look through the source code for each demo mini site over here

GitHub - getkirby/demokit: A demo setup for trykirby.com

[zazvi_19227]

OK, thanks a lot for your returns, it’s clear for layouts and blocks!
I understand the problem better now. However, I still have a blank page, as if my home page and my builder were not being read.

This my home.php :

<?php snippet('header') ?>

<main class="page">

<h1><?= $page->title() ?></h1>

<?php if ($layouts = $page->builder()->toLayouts()): ?>


<?php foreach ($layouts as $layout): ?>
  <section class="layout-row">
    <?php foreach ($layout->columns() as $column): ?>
      <div class="layout-col layout-col-span-<?= $column->span() ?>">
        <?= $column->blocks()->toBlocks() ?>
      </div>
    <?php endforeach ?>
  </section>
<?php endforeach ?>


<?php endif ?>

</main>

<?php snippet('footer') ?>

My home.yml :

title: Accueil

tabs:
content:
label: Contenu
fields:
builder:
label: Constructeur de page
type: layout


    layouts:
      - "1/1"
      - "1/2, 1/2"
      - "1/3, 1/3, 1/3"
      - "1/4, 1/4, 1/4, 1/4"
      - "1/4, 1/2, 1/4"

    fieldsets:
      - titre
      - texte
      - image
      - bouton

And for exampke my titre.yml :

name: Titre
icon: title

fields:
text:
label: Texte du titre
type: text

level:
label: Niveau de titre
type: select
options:
h1: Titre 1
h2: Titre 2
h3: Titre 3
h4: Titre 4
default: h2

Thks for your light

After some research, my snippets seem to be “shadowed”/overwritten by the Kirby 5.1.4 block renderer.
In some cases, Kirby does not load custom snippets if I do not activate the block renderer ? IS it possible ?

I’ve had this in my config.php :

<?php return \[ 'debug' => true, 'blocks.snippets' => true, 'panel' => \[ 'install' => false \] \]; But still blank page !

[texnixe]

Are there any snippets to render your custom block types?

[zazvi_19227]

Yes, I think so. I have a snippets/blocks/title.php or snippets/blocks/image.php file.

Like this file image.php:

<?php if ($file = $block->image()->toFile()): ?>

<figure class="block-image">
    <img src="<?= $file->url() ?>" alt="">
  </figure>
<?php endif ?>

or titre.php :

<?php $tag = $block->level()->or('h2'); ?>

< class=“block-titre”>

<?= esc($block->text()) ?>

</>

[texnixe]

But if your block blueprints are called in French like titre, than having a snippet called title is pretty useless. The names must match.

[zazvi_19227]

Yes, it’s because of my translation tool but the names correspond in French (attachments)

And in my home.yml :

title: Accueil

tabs:
  content:
    label: Contenu
    fields:
      builder:
        label: Constructeur de page
        type: layout

        layouts:
          - "1/1"
          - "1/2, 1/2"
          - "1/3, 1/3, 1/3"
          - "1/4, 1/4, 1/4, 1/4"
          - "1/4, 1/2, 1/4"

        fieldsets:
          - titre
          - texte
          - image
          - bouton

[zazvi_19227]

Yes, it’s because of my translation tool but the names correspond in French (attachments)

Okay, after several tests, I notice that my blank page appears when I add layouts to my home.php page: home.php :

<?php snippet('header') ?>

<main class="page">

<h1><?= $page->title() ?></h1>

<?php foreach ($page->builder()->toLayouts() as $layout): ?>
  <section class="layout">
    
    <?php foreach ($layout->columns() as $column): ?>
      <div class="layout-col" style="flex-basis: <?= $column->span() ?>%;">
        <?= $column->blocks()->toBlocks() ?>
      </div>
    <?php endforeach ?>

  </section>
<?php endforeach ?>

</main>

<?php snippet('footer') ?>

I don’t have blank page with this :

<?php snippet('header') ?>

<main class="page">

<h1><?= $page->title() ?></h1>

<?= $page->builder()->toBlocks() ?>

</main>

<?php snippet('footer') ?>

Also this is my home.yml :

title: Accueil

fields:
  builder:
    label: Constructeur de page
    type: layout

    layouts:
      - "1/1"
      - "1/2, 1/2"
      - "1/3, 1/3, 1/3"
      - "1/4, 1/4, 1/4, 1/4"
      - "1/4, 1/2, 1/4"
      - "1/3, 2/3"
      - "2/3, 1/3"
      - "1/4, 3/4"
      - "3/4, 1/4"
      - "1/5, 1/5, 1/5, 1/5, 1/5"
      - "1/6, 1/6, 1/6, 1/6, 1/6, 1/6"

    fieldsets:
      texte: blocks/texte

And my texte.yml :

name: Texte
icon: text
preview: fields

fields:
  texte:
    label: Contenu texte
    type: textarea

[texnixe]

In the first version, there is an error, compare: Layout | Kirby CMS

[zazvi_19227]

YEs ok i found solution, it works thanks you !

<?php snippet('header') ?>
<main class="page">
  <h1><?= $page->title() ?></h1>
  
  <?php foreach ($page->builder()->toLayouts() as $layout): ?>
    <section class="layout">
      <?php foreach ($layout->columns() as $column): ?>
        <div class="layout-col" style="--span: <?= $column->span() ?>">
          <?php foreach ($column->blocks() as $block): ?>
            <?= $block ?>
          <?php endforeach ?>
        </div>
      <?php endforeach ?>
    </section>
  <?php endforeach ?>
  
</main>
<?php snippet('footer') ?>```