Drupal Layout Builder - un excellent outil pour créer des mises en page

Layout Builder est un outil pour construire des mises en page d'entités Drupal 8. Il a gagné en popularité il y a quelques années, mais les développeurs Drupal l'utilisent de plus en plus. Si vous ne l'avez pas encore fait, ou si vous souhaitez rafraîchir vos connaissances, nous vous expliquerons comment installer, lancer, gérer et utiliser ce module.

Qu'est-ce que le Drupal Layout Builder?

Le module Layout Builder a été inclus dans le noyau de Drupal à partir de la version 8.5, et il subit toujours des changements significatifs et des métamorphoses. Cependant, sa fonctionnalité de base reste inchangée. Il aide les développeurs à créer facilement et commodément des mises en page de pages à l'aide d'une interface utilisateur, et il permet d'intégrer et de lier tout élément dans une mise en page, comme des champs, des vues, des menus et des formulaires.

Installation et configuration du module Layout Builder

Comme mentionné précédemment, le module Layout Builder est disponible dans le noyau de Drupal depuis la version 8.5, ce qui signifie que tout ce que vous devez faire est de l'installer.

Vous n'avez pas à faire de configuration supplémentaire du module, et vous pouvez commencer à l'utiliser immédiatement, ce que vous verrez à l'étape suivante.

En septembre 2021, la dernière branche stable de Drupal est 9.2.6, et c'est la version que nous allons utiliser pour tous nos exemples.

Lancer Drupal Layout Builder

Étant donné que Layout Builder peut être utilisé uniquement dans les entités, immédiatement après l'installation, vous pouvez trouver une option pour utiliser ce module à la place du gestionnaire d'affichage par défaut dans l'onglet Gérer l'affichage dans tous les types d'entités.

Avec Drupal Layout Builder, vous pouvez créer des mises en page pour un type d'entité donnée, donc chaque entité d'un type donné aura la même mise en page. Cependant, vous pouvez également utiliser une option supplémentaire :

Elle permet aux entités individuelles de remplacer la mise en page par défaut pour ce type d'entité. Cela, à son tour, offre des possibilités presque illimitées, vous permettant de changer l'apparence d'une seule entité d'un type donné tout en conservant la mise en page de toutes les autres entités.

Après avoir appliqué les options sélectionnées, le formulaire de gestion d'affichage change d'apparence. Vous pouvez également trouver un bouton supplémentaire intitulé Gérer la mise en page.

Veuillez noter que depuis la version 8.6, le module vous permet d'activer/désactiver Layout Builder pour un mode d'affichage donné. Cela signifie que le mode Teaser reste inchangé et utilise le moteur standard de Drupal.

Gestion de la mise en page

Que fait donc ce mystérieux bouton Gérer la mise en page ? Il vous amène à la page d'édition de la mise en page, qui utilise la mise en page par défaut de la page.

Dans ce mode, vous pouvez gérer les sections et les blocs dans une section. Vous pouvez également facilement changer l'ordre des sections, ainsi que déplacer des blocs à l'intérieur et entre les sections par glisser-déposer.

Il est important de confirmer toutes les opérations en cliquant sur le bouton Sauvegarder la mise en page.

Pour ajouter une nouvelle section, cliquez sur Ajouter une section. Ensuite, les mises en page disponibles apparaîtront à droite.

Après avoir sélectionné l'une d'entre elles, une section sera ajoutée en utilisant la mise en page sélectionnée. Vous pouvez ensuite remplir la section avec des blocs. Pour ce faire, cliquez sur Ajouter un bloc.

Vous pouvez sélectionner parmi de nombreuses options disponibles. En dehors des champs, vous pouvez également facilement intégrer un formulaire, une vue, un menu ou des blocs dans une entité.

Si vous avez besoin de quelque chose d'encore plus puissant, combinez Layout Builder avec le module Entity Blocks (entity_block), qui vous permet d'intégrer n'importe quelle entité dans un mode d'affichage sélectionné en tant que bloc de section. En faisant cela, vous pouvez facilement réutiliser des éléments précédemment créés et les placer n'importe où dans la mise en page.

Mise en page d'une entité unique

Jusqu'à présent, nous avons travaillé sur une mise en page pour le type d'entité. Mais supposons que vous vouliez qu'une seule entité s'affiche un peu différemment des autres, par exemple avec votre propre bloc.

Layout Builder étend l'acheminement des entités avec une page supplémentaire avec l'argument /layout, ce qui signifie que vous pouvez trouver un onglet Mise en page supplémentaire lors de l'édition d'un bloc ou d'un nœud.

Lors de la visualisation d'un nœud, vous pouvez également trouver un raccourci rapide pour éditer la mise en page disponible dans les onglets :

Tout ce que vous avez à faire maintenant est de modifier la mise en page par défaut existante selon vos besoins et d'appliquer toutes les modifications. Si vous vous retrouvez un jour à devoir restaurer une mise en page par défaut, vous avez également la possibilité de « Revenir aux valeurs par défaut ».

Important : Si vous avez utilisé l'option de changement de mise en page pour une seule entité, la possibilité de désactiver le Layout Builder sera bloquée.

Seule la restauration de toutes les mises en page modifiées à leurs valeurs par défaut vous permettra de modifier à nouveau les options de mise en page.

Layout Builder sous le capot

Drupal Layout Builder est définitivement impressionnant en ce qui concerne la gestion de l'interface graphique. Cependant, les tâches de programmation que vous rencontrerez en travaillant avec l'outil au quotidien pourraient être un peu plus complexes. Vous pourriez alors vous demander comment travailler avec Layout Builder avec du code.

Il s'avère qu'il est relativement facile d'activer et de déverrouiller les modèles pour une seule entité.

Il suffit de charger l'affichage :

$entityViewDisplay = \Drupal::entityTypeManager->getStorage('entity_view_display')->load('ENTITY_TYPE.ENTITY_BUNDLE.VIEW_MODE');

Cela renverra un objet de type LayoutBuilderEntityViewDisplay, que vous devez ensuite modifier comme suit :

$entityViewDisplay->enableLayoutBuilder();

pour activer le Layout Builder pour un mode d'affichage donné, ou en outre définir le flag :

$entityViewDisplay->setOverridable(TRUE);

pour permettre de créer des mises en page individuelles pour une seule entité.

Ensuite, vous devez tout enregistrer.

$entityViewDisplay->save();

Ce qui se passe en fait sous le capot, c'est que le module Layout Builder ajoute la clé layout_builder aux réglages tierce partie d'un type d'entité donné, contenant des valeurs pour les paramètres montrés ci-dessus (activé, autoriser_personnalisé) et stocke la mise en page par défaut pour ce type d'entité sous sections.

Si le flag setOverridable est défini sur TRUE, il crée un nouveau champ d'entité appelé layout_builder__layout, qui stocke la mise en page modifiée pour cette entité particulière.

D'autre part, créer une section avec du code et la remplir avec le contenu approprié est un peu plus compliqué.

Commençons par créer une nouvelle section. Pour ce faire, nous devons créer une nouvelle instance de la classe \Drupal\layout_builder\Section, en incluant le paramètre layout_id, qui sert d'identifiant de mise en page.

Conseil d'expert : Les mises en page sont définies dans des fichiers *.layouts.yml et les modèles par défaut peuvent être trouvés dans le module layout_discovery.

Ensuite, le moyen le plus simple est simplement d'ajouter un autre élément à la section, dans ce cas vous allez utiliser la méthode appendComponent, qui prend en argument une instance de la classe \Drupal\layout_builder\SectionComponent. Cependant, d'abord, vous devrez préparer quelques éléments avant de pouvoir créer un tel composant de section. Tout d'abord, vous aurez besoin de :

• l'UUID de l'élément intégré,
• le nom de la région dans la section,
• la configuration du plugin.

Dans cet exemple, nous allons utiliser le plugin fourni par Entity Blocks pour intégrer un exemple de nœud dans une section à une seule colonne :

$section = new Section('layout_onecol');

$uuid = $node->uuid();
$region = ‘content’;
$pluginConfiguration = [
  'id' => 'entity_block:node',
  'provider' => 'entity_block',
  'label_display' => FALSE,
  'view_mode' => 'default',
  'entity' => $node->id(),
];
$component = new SectionComponent($uuid, $region, $pluginConfiguration);
$section->appendComponent($component);

Vous devez toujours garder à l'esprit que les mises en page sont stockées dans des paramètres tierce partie ou dans un champ, donc pour enregistrer la section, vous devrez l'enregistrer dans l'un de ces endroits.
Dans notre exemple, nous utilisons un champ, donc :

$entity->layout_builder__layout->setValue($section);
$entity->save();

En réalisant toutes ces étapes, vous avez maintenant ajouté une section à colonne unique à une entité et affiché un exemple de nœud dedans.

Vous pouvez également être intéressé par : Formulaires d'entités personnalisés sur l'exemple de l'édition et de l'enregistrement d'utilisateurs

Avantages et inconvénients du module Layout Builder

Ci-dessous, nous avons préparé une courte liste de quelques avantages et inconvénients que nous avons découverts en travaillant avec Layout Builder :

Avantages :

• Facilité de déploiement – le module est déjà dans le cœur, il n'est pas nécessaire de mettre en œuvre de nouveaux types d'entités.
• Interface conviviale avec une fonctionnalité de glisser-déposer.
• Options de personnalisation pour les entités individuelles.
• Un moyen facile de combiner des champs avec d'autres entités, sans avoir à créer de champs de référence supplémentaires.
• Un moyen pratique d'intégrer des entités existantes à l'aide des Entity Blocks.

Inconvénients :

• À mesure que le site se développe (nouveaux types d'entités et éléments intégrables), le temps de chargement de tous les éléments disponibles augmente considérablement.
• Étant donné que le module est axé sur l'interface utilisateur, ajouter de nouvelles mises en page pourrait être plus intuitif. Actuellement, nous devons créer des fichiers .yml et des modèles en utilisant du code.
• Avec un grand nombre d'éléments dans la mise en page, déplacer des éléments entre les sections devient un peu difficile.
• Accès difficile aux sections dans Twig, les noms sont suffixés par un uuid, ce qui rend difficile le rendu d'une section sélectionnée.

Drupal Layout Builder - résumé

Drupal Layout Builder apporte de nombreuses possibilités intéressantes en termes de gestion de mise en page, en utilisant à la fois l'interface utilisateur et le code. Va-t-il remplacer toutes les solutions existantes?

À mon avis, c'est un outil parfait qui résout le problème des mises en page à grande échelle. Créer des composants fermés en utilisant des modules populaires tels que Paragraphes, Field Group, puis construire des mises en page prêtes à l'emploi constituées de ces composants à l'aide de Layout Builder semble être une solution parfaite.

Comme chaque module Drupal, Layout Builder a sa propre utilisation spécifique – donc, comme toujours, il sera plus efficace pour résoudre certains problèmes et, dans le cas d'autres défis, il sera beaucoup moins performant. Il suffit de le vérifier par vous-même!