Le nom des zones du Page Builder d'Ibexa DXP est-il adapté aux contributeurs ?

Olivier Portier

19 sept. 2025

Les zones du Page Builder d'Ibexa

Dans le Page Builder d'Ibexa DXP vous pouvez définir le layout de vos pages en déclarant des zones de contribution. Les blocs seront glissés dans ces zones afin de construire progressivement la page bloc par bloc.

Voici un exemple de configuration des zones dans un fichier YAML d'Ibexa :

        dlayout_three_rows_two_columns:
            identifier: 'layout_three_rows_two_columns'
            name: 'Three rows, two columns'
            description: 'Three rows, two columns'
            thumbnail: '/bundles/ibexadashboard/img/layouts/three_rows_two_columns.svg'
            template: '@ibexadesign/dashboard/builder/layouts/three_rows_two_columns.html.twig'
            zones:
                top:
                    name: 'top'
                middle_left:
                    name: 'middle-left'
                middle_right:
                    name: 'middle-right'
                bottom:
                    name: 'bottom'

La zone 'top' porte le nom 'top' mais ce nom n'apparait null part dans l'interface d'édition d'une page du Page Builder il sera identifié par Drop zone 1 :

Même principe dans la structure view (très utile pour déplacer vos blocs d'une zone à une autre) les zones sont identifiées par Drop zone 1, 2, 3 ... :

A quoi bon donner un nom spécifique dans la configuration si ce nom n'est utilisé null part.

Comment est afficher le nom de la zone ?

Le nom des zones est affiché en javascript par les scripts :

ibexa/page-builder/src/bundle/ui-dev/src/modules/page-builder/page.builder.js
ibexa/page-builder/src/bundle/ui-dev/src/modules/page-builder/components/structure/structure.tree.js

const hasFieldset = zone.querySelector('fieldset') !== null;

if (!hasFieldset) {
  const dropZoneLabel = Translator.trans(
    /*@Desc("Drop zone %number%")*/ 'structure.drop.zone',
    {
        number: index + 1,
    },
    'ibexa_page_builder',
  );
  const fieldset = document.createElement('fieldset');
  const legend = document.createElement('legend');

Difficile de traduire une chaine de texte alors que sont libellés change à chaque zone. Dans le script page.builder.js on voit que si un élément <fieldset> est déjà présent dans le DOM de la zone alors il n'est pas recréé.

Sans faire de développement trop complexe ni de hack kernel, on doit pouvoir ajouter ce bloc HTML dans notre template de layout pour nommer convenablement nos zones.

Avoir des noms de zones intuitifs

Dans notre template three_rows_two_columns.html.twig on a donc ajouté le <fieldset> et la <legende> avec le nom de zone que l'on a configuré dans notre fichier YAML.

<div class="ibexa-db-zones">
    <div class="ibexa-db-zones__row">
        <div class="ibexa-db-zones__zone" data-ibexa-zone-id="{{ zones[0].id }}">
             <fieldset class="m-page-builder__fieldset">
                <legend class="m-page-builder__legend"
                        style="background-color: white; padding: 3px; border-radius: 5px; border: 1px dashed #4191ff;"
                >
                  {{ zones[0].name }}
                </legend>
             </fieldset>
    
            {% if zones[0].blocks %}
    ...
             
            {% endif %}
        </div>
    </div>
    <div class="ibexa-db-zones__row ibexa-db-zones__row--double">
        <div class="ibexa-db-zones__zone" data-ibexa-zone-id="{{ zones[1].id }}">
            <fieldset class="m-page-builder__fieldset">
                <legend class="m-page-builder__legend"
                        style="background-color: white; padding: 3px; border-radius: 5px; border: 1px dashed #4191ff;"
                >
                  {{ zones[0].name }}
                </legend>
            </fieldset>            
            {% if zones[1].blocks %}

   ...

            {% endif %}
        </div>
    </div>
</div

Les zones de pré-visualisation sont maintenant parlantes et bien plus simples à comprendre surtout lors de cas complexe de gestion éditoriale dont voici un exemple :

Sans des noms de zones explicites, l'équipe éditoriale ne peut pas distinguer une zone de Cover, une zone avec des blocs empilables (stackable blocks dont nous parlerons dans un prochain article) ou une zone libre avec des blocs qui s'afficheront les uns sous les autres.

Des idées pour propager cette fonctionnalité qui devrait être native dans la Structure view ? J'en appel à l'équipe d'Ibexa pour nous apporter une petite amélioration avec Ibexa 5.