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 nulle part dans l'interface d'édition d'une page du Page Builder, elle sera identifiée 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é nulle part.
Comment est affiché 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 son libellé 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 <legend> 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 appelle à l'équipe d'Ibexa pour nous apporter une petite amélioration avec Ibexa 5.
Mise à jour du 16 octobre
Nous avons poursuivis les développements et réalisé un hack pour avoir l'ensemble des zones avec le nom souhaité. Voilà !
Si vous souhaitez en savoir plus n'hésitez pas à nous contacter.
Nos derniers articles
Le nom des zones du Page Builder d'Ibexa DXP est-il adapté aux contributeurs ?
L'adéquation des noms attribués aux différentes zones dans le Page Builder d'Ibexa DXP est-elle optimale ...
Connecteur Google Gemini pour les actions IA d'Ibexa
Connaissez-vous les Actions IA (AI Actions) d'Ibexa ? Les AI Actions, sont une solution extensible ...
Notre équipe est certifiée à 100% Ibexa
Experts Ibexa de longue date, forts de nombreux projets réussis sur Ibexa, eZ Publish et ...
Profitez d'une certification gratuite lors de l'Ibexa Summit 2025
La conférence annuelle Ibexa se tiendra les 30 et 31 janvier 2025 à Barcelone et ...
Migrer les mots de passe d'eZ Platform 2.5 vers Ibexa 4.6
La sécurité des données, et en particulier des mots de passe des utilisateurs, est une ...
✨🎄Code Rhapsodie vous souhaite le meilleur en 2025 🥂🍾🎊
2024 aura été une année riche en tempêtes, avec ses hauts et ses bas. Mais ...
Structurer le code de vos processus d'import / export avec Dataflow
Pour célébrer la sortie de Dataflow 5 pour Symfony 7, voici un retour d'expérience sur ...
Gagnez un audit de votre application !
🎯 Nous relevons le défi de lancer un grand concours : Vous faire gagner un ...
Personnaliser Ibexa Commerce - Calculateur de frais de port
Comment calculer dynamiquement des frais de port ? La documentation officielle qui explique comment créer ...
Le nom des zones du Page Builder d'Ibexa DXP est-il adapté aux contributeurs ?
L'adéquation des noms attribués aux différentes zones dans le Page Builder d'Ibexa DXP est-elle optimale ...
Connecteur Google Gemini pour les actions IA d'Ibexa
Connaissez-vous les Actions IA (AI Actions) d'Ibexa ? Les AI Actions, sont une solution extensible ...
Notre équipe est certifiée à 100% Ibexa
Experts Ibexa de longue date, forts de nombreux projets réussis sur Ibexa, eZ Publish et ...
Profitez d'une certification gratuite lors de l'Ibexa Summit 2025
La conférence annuelle Ibexa se tiendra les 30 et 31 janvier 2025 à Barcelone et ...
Migrer les mots de passe d'eZ Platform 2.5 vers Ibexa 4.6
La sécurité des données, et en particulier des mots de passe des utilisateurs, est une ...
✨🎄Code Rhapsodie vous souhaite le meilleur en 2025 🥂🍾🎊
2024 aura été une année riche en tempêtes, avec ses hauts et ses bas. Mais ...
Structurer le code de vos processus d'import / export avec Dataflow
Pour célébrer la sortie de Dataflow 5 pour Symfony 7, voici un retour d'expérience sur ...
Gagnez un audit de votre application !
🎯 Nous relevons le défi de lancer un grand concours : Vous faire gagner un ...
Personnaliser Ibexa Commerce - Calculateur de frais de port
Comment calculer dynamiquement des frais de port ? La documentation officielle qui explique comment créer ...