Maîtriser Drupal 9 Layout Builder : un guide complet pour personnaliser sans effort la conception de votre site Web

En ce qui concerne la création de pages, les créateurs de sites, les auteurs de contenu et les éditeurs de contenu sont constamment à la recherche d'une expérience fluide et conviviale. Lorsqu'ils souhaitent concevoir et construire des pages, ils s'attendent à utiliser les technologies glisser-déposer et CKEditor. Cette expérience identique est fournie par la fonctionnalité de construction de page simple de Drupal Layout Builder dans le noyau Drupal.

Le Drupal Layout Builder distinctif offre un puissant outil de conception visuelle pour permettre aux auteurs de contenu de modifier la façon dont le contenu est présenté. Layout Builder, qui a été ajouté au cœur de Drupal dans sa version la plus récente, Drupal 9 vous permet d'ajouter/supprimer des sections pour afficher le contenu en utilisant différentes mises en page et personnaliser vos pages en fonction de vos besoins. Avec le module Layout Builder de Drupal 9, vous pouvez mélanger ces sections pour créer une page complètement unique.

Il existe deux manières différentes d'utiliser Drupal 9 Layout Builder : Layout Defaults (pour concevoir une mise en page pour tout le contenu du type de contenu) et Layout Overrides (pour concevoir une mise en page pour l'élément de contenu spécifique). Vous pouvez en savoir plus et commencer à utiliser le module Drupal 9 Layout Builder à l'aide de ce blog.

Surveillez notre prochain article sur cette série où nous plongerons dans l'utilisation du générateur de mise en page et du module Ctools pour appliquer des modèles de mode d'affichage !

Présentation du générateur de mise en page

Vous pouvez modifier l'apparence des entités telles que les types de contenu, les taxonomies, les utilisateurs, etc. à l'aide du module Drupal 9 Layout Builder. Les constructeurs de sites peuvent facilement faire glisser et déposer des blocs, des champs et d'autres éléments en place à l'aide de cette fonctionnalité.

En fournissant un aperçu des modifications apportées lors de la conception de vos mises en page, le module de création de mise en page de Drupal 9 facilite le processus de création de mise en page. Le générateur de mise en page de Drupal 9 permet de prévisualiser les modifications apportées pour une expérience de création de mise en page fluide plutôt que d'obliger les utilisateurs à enregistrer chaque petite modification qu'ils apportent à la mise en page, puis à la rechercher sur le front-end.

Le générateur de mise en page comporte deux modules :

Découverte de la mise en page - Donne aux modules ou aux thèmes un moyen d'enregistrer les mises en page.

Layout Builder - Permet aux utilisateurs d'ajouter et d'organiser directement des blocs et des champs de contenu sur le contenu.

Lors de la conception d'une mise en page, Layout Builder utilise deux idées clés :

Sections - Colonnes ou conteneurs où les blocs peuvent être placés. Par exemple, il peut s'agir d'une mise en page à 2 colonnes ou d'une mise en page à 3 colonnes, etc.

Blocs - Éléments de contenu pouvant être placés dans des sections.

Installation et configuration du module Layout Builder

Accédez à Extend et activez les modules Layout Builder et Layout Discovery pour installer et configurer le module de création de mise en page Drupal 9.

Modifier le type de contenu et la taxonomie

Une fois le module installé, allez dans Structure, Types de contenu, et sélectionnez "Gérer l'affichage" pour n'importe quel type de contenu. Pour cet exemple, nous utiliserons le type de contenu "article".

Cliquez sur le menu déroulant Options de mise en page en bas pour sélectionner "Utiliser Layout Builder", puis cliquez sur Enregistrer.

Les formateurs de champ sont remplacés par une option "Gérer la mise en page" après l'activation du générateur de mise en page en mode d'affichage. Chacun des modes d'affichage disponibles peut être utilisé avec Layout Builder.

Vous serez redirigé vers la mise en page du type de contenu de l'article lorsque vous cliquerez sur "Gérer la mise en page".

Insérer des sections dans la mise en page

Supprimez la section par défaut avant d'en ajouter d'autres au générateur de mise en page. Sélectionnez le bouton "fermer" (comme illustré dans la capture d'écran ci-dessous). De plus, un bouton pour supprimer la section par défaut sera à votre disposition sur le côté droit de votre écran. Sélectionnez ensuite "Supprimer".

En sélectionnant l'option "Ajouter une section", ajoutons quelques sections à notre mise en page. Sur le côté droit de l'écran, des options vous seront également proposées afin que vous puissiez sélectionner une mise en page pour votre section. Pour l'instant, choisissons la "section à deux colonnes".

Vous aurez la possibilité de sélectionner la largeur "Mise en page à deux colonnes". Pour l'instant, choisissons un "67%/33%". Ensuite, sélectionnez "Ajouter une section".

Après avoir été ajoutée, chaque région de section doit afficher un lien "Ajouter un bloc".

Insérer des blocs dans les régions de section

Vous pouvez ajouter des blocs à votre zone après l'avoir sélectionnée pour la mise en page. Cliquez simplement sur "Ajouter un bloc" et l'option "Choisir un bloc" glissera de la droite lorsque vous souhaitez ajouter un bloc.

Sélection d'un bloc

Il vous suffit de cliquer sur les blocs de la colonne de droite pour les sélectionner. En utilisant le champ de texte "Filtrer par nom de bloc", vous pouvez même localiser des blocs en filtrant la recherche en fonction de leurs noms.
Pour l'instant, nous allons choisir le champ de contenu "Corps".

Le formateur de champs vous permettra d'apporter des modifications lorsque vous cliquerez sur le bloc que vous souhaitez ajouter. Cliquez sur "Ajouter un bloc" après avoir configuré le formateur.

Sur le côté gauche du bloc, il y aura une zone de contenu "Corps".

Le champ "Corps" a été ajouté ; maintenant enregistrez vos modifications. En sélectionnant "Enregistrer la mise en page" dans le menu en haut de la page de mise en page de Drupal 9, vous pouvez enregistrer toutes les modifications que vous avez apportées à votre section.

Pour personnaliser davantage notre générateur de mise en page, essayons d'ajouter quelques champs supplémentaires à notre conception.

Lorsque vous visitez une page avec un type de contenu d'article après avoir enregistré cette mise en page, vous pourrez voir un aperçu de la mise en page que vous venez de créer.

Remplacements de mise en page :

La mise en page que nous venons de créer fonctionnera pour tous les articles. Drupal a un certain nombre de paramètres qui doivent être activés afin de créer une mise en page personnalisée pour un certain article. Pour ce faire, sélectionnez "Autoriser chaque élément de contenu à personnaliser sa mise en page" .

Si vous visitez un article après avoir activé cette option, un bouton d'onglet Mise en page sera visible.

Avec la même interface, la mise en page peut maintenant être modifiée. Cependant, cela ne fera que modifier la conception de ce contenu unique.

Ajoutons maintenant un bloc à cette page. Créez une nouvelle section à une colonne et cliquez sur le bouton "Ajouter un bloc". Considérez le cas où nous souhaitons afficher le contenu récemment modifié par d'autres utilisateurs sur cette page, filtrez le bloc "Contenu récent" lors de l'ajout d'un nouveau bloc, puis personnalisez-le selon vos besoins avant d'enregistrer la mise en page.

Finalement, lorsque nous aurons inclus le bloc d'articles le plus récent, notre page apparaîtra comme ceci.

Important : Si vous avez modifié la mise en page d'une seule entité, vous ne pourrez pas désactiver le générateur de mise en page.

Vous ne pouvez mettre à jour les options de mise en page qu'une fois que vous avez réinitialisé toutes les mises en page modifiées à leurs paramètres d'origine.

Générateur de mise en page à partir du code

En ce qui concerne la gestion de l'interface graphique, Drupal Layout Builder est sans aucun doute incroyable. Néanmoins, les problèmes de programmation que vous rencontrez lors de l'utilisation régulière de l'outil peuvent être un peu plus difficiles. Maintenant, vous pourriez vous demander comment utiliser Layout Builder à l'aide de code.

Il s'avère qu'il est assez simple d'activer et de désactiver des modèles pour une seule entité.

Chargez simplement l'affichage en utilisant le code suivant :

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

Il renverra alors un objet de type LayoutBuilderEntityViewDisplay , que vous devrez alors modifier comme suit :

 $entityViewDisplay->enableLayoutBuilder();

Si vous souhaitez en plus définir le drapeau ou activer le Layout Builder pour un mode d'affichage spécifique :

 $entityViewDisplay->setOverridable(TRUE);

pour permettre la création de mises en page uniques pour une seule entité.

Après cela, vous devez tout sauvegarder.

 $entityViewDisplay->save();

Ce qui se passe réellement en arrière-plan est que le module Layout Builder ajoute le layout_builder_key au third_party_settings d'un certain type d'entité, avec des valeurs pour les paramètres décrits ci-dessus (enabled, allow custom) , puis stocke la mise en page par défaut pour ce type d'entité sous sections.

Un nouveau champ d'entité nommé layout_builder__layout est créé et utilisé pour contenir la disposition mise à jour pour cette entité spécifique si l'option setOverridable est définie sur TRUE .

Au contraire, il faut un peu plus de travail pour créer une section à l'aide de code et la remplir avec un contenu pertinent.

Pour commencer, ajoutons une nouvelle section. Le paramètre layout_id , qui sert d'identifiant de mise en page, doit être inclus lors de la création d'une nouvelle instance de la classe \Drupal\layout_builder\Section afin d'accomplir cela.

Astuce : le module de découverte de mise en page contient les modèles par défaut. Les mises en page sont définies dans les fichiers *.layouts.yml . Pour des informations plus détaillées, veuillez consulter l'article suivant sur la façon de créer des mises en page personnalisées dans Drupal.

Ensuite, ajouter un nouvel élément directement à la section serait la solution la plus simple. Pour ce faire, utilisez la méthode appendComponent , qui accepte une instance de la classe \Drupal\layout_builder\SectionComponent comme argument. Néanmoins, avant de pouvoir développer un tel composant de section, vous devez d'abord organiser quelques éléments. Pour commencer, vous aurez besoin de :

• l'uuid de l'élément embarqué,
• le nom de la région dans la rubrique,
• configuration du plug-in.

Dans ce didacticiel, nous allons intégrer un exemple de nœud dans une section à une seule colonne à l'aide du plug-in fourni par Entity Blocks :

 $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);

Gardez toujours à l'esprit que les mises en page sont enregistrées dans des paramètres ou un champ tiers ; par conséquent, pour enregistrer la section, vous devez le faire à l'un de ces emplacements.

Dans notre cas, un champ est utilisé, donc :

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

Vous avez maintenant ajouté une section de colonne unique à une entité et affiché un exemple de nœud en suivant toutes ces étapes.

Vous pouvez également être intéressé par l'amélioration de l'expérience du générateur de mise en page de Drupal.

Avantages et inconvénients du constructeur de mise en page

Nous avons compilé une brève liste de certains avantages et inconvénients de Layout Builder ci-dessous :

Avantages:

• Le déploiement est simple car il n'est pas nécessaire d'ajouter de nouveaux types d'entités car le module est déjà inclus dans le noyau.
• Interface utilisateur conviviale avec des capacités de glisser-déposer.
• Choix de personnalisation d'entité individuelle.
• Une méthode simple pour combiner des champs avec d'autres entités sans avoir besoin d'ajouter plus de champs de référence.
• Une méthode simple pour tirer parti des blocs d'entités pour intégrer des entités existantes.

Les inconvénients:

• De nouveaux types d'entités et des éléments intégrables s'ajoutent à la taille du site Web, ce qui allonge considérablement le temps de chargement de tous les éléments.
• Le module est axé sur l'interface utilisateur, il peut donc être plus simple de créer de nouvelles mises en page. À l'heure actuelle, nous devons écrire du code pour générer des fichiers et des modèles.yml.
• Faire glisser des éléments entre les sections peut être un peu difficile lorsqu'il y a de nombreuses parties dans la mise en page.
• Les noms de Twig sont suffixés par uuid, ce qui rend difficile le rendu d'une section spécifique et limite l'accès aux sections.

Dernières pensées

Drupal Layout Builder nous ouvre un large éventail de possibilités intrigantes pour gérer les mises en page via l'interface utilisateur et le code. Va-t-il remplacer toutes les solutions actuelles ?
C'est l'outil idéal, à mon avis, pour traiter la question de l'aménagement à grande échelle. Il semble que le meilleur plan d'action serait d'utiliser des modules largement utilisés comme Paragraphes et Groupe de champs pour créer des composants fermés, puis Layout Builder pour créer des mises en page prédéfinies composées de ces composants.

Layout Builder a un objectif unique, un peu comme tous les autres modules Drupal. En conséquence, il fonctionnera toujours mieux dans certaines situations et sera nettement moins performant dans d'autres. Vérifiez par vous-même!

Si vous cherchez des experts pour vous aider avec quoi que ce soit sur Drupal, nous sommes juste à un e-mail de vous !