Templating des blocs personnalisés
Catégorie : Drupal 8 Publié le 18/02/2021

Lorsque vous créer un type de bloc personnalisé sur Drupal 8, il n'y a pas réellement de règle de nommage des templates pour personnaliser l'apparence graphique des blocs. Mais heureusement, il existe une solution pour ajouter cette possibilité en faisant quelque modification sur votre thème Drupal perso.

Création du type de bloc personnalisé

Pour commencer, nous allons partir sur un type de bloc que nous allons nommer Block Banner.
Rendez-vous dans Structure > Mise en page des blocs > Types de bloc et cliquez sur Ajouter un type de bloc personnalisé.

drupal 8 custom block

Ajoutez ensuite les champs que vous souhaitez à ce bloc.
Vous pouvez vous inspirer de la config que j'ai apporté au bloc comme ci-dessous :

drupal 8 custom block fields

Pour faire le test, rendez-vous Structure > Mise en page des blocs > Ajouter un bloc personnalisé et sélectionnez Block Banner.
Remplissez tous les champs avec les valeurs que vous souhaitez et enregistrez.

Une fois fois le bloc créé, Drupal vous renvoie sur une page vous demandant de renseigner des infos pour l'affichage du formulaire sur le site.
Pour faire simple, sélectionnez Contenu dans le champ Région et cliquez sur Enregistrer le bloc.

Retournez sur la page d'accueil de votre site et vous verrez votre bloc s'afficher avec le template de base :

drupal 8 custom block front

Surcharge du template

Nous allons maintenant voir comment faire en sorte de surcharger le template de ce type de bloc.
Pour cela, rendez-vous dans le fichier .theme de votre theme Drupal et insérez le code PHP ci-dessous :

function [YOUR_THEME]_theme_suggestions_block_alter(array &$suggestions, array &$variables) {
  if (isset($variables['elements']['content']['#block_content'])) {
    $bundle = $variables['elements']['content']['#block_content']->bundle();
    array_splice($suggestions, 1, 0, 'block__bundle__' . $bundle);
  }
}

Pensez bien à remplacer la mention "[YOUR_THEME]" par le nom système de votre thème.

Dans ce code, on récupère l'ensemble des infos concernant le bloc disponible en front sur le site et on prend le bundle, autrement dit le nom système du type de bloc.
Dans notre cas, c'est block_banner que l'on souhaite obtenir.

Une fois le nom système récupéré, on met à jour la variable $suggestions avec la ligne comportant le array_splice.
Le 4eme et dernier paramètre de la fonction correspond au nommage que l'on attribura au template du type de bloc.
Ici, ce sera : block--bundle--block-banner.html.twig dans le dossier block/ de votre theme Drupal.

Il vous suffit maintenant de créer le template portant ce nom de fichier, à coller le code d'origine du fichier block.html.twig situé dans core/themes/bartik/templates, ou dans le dossier template/ du thème d'origine si votre thème correspond à un sous-thème, et à mettre le code que vous souhaitez dans ce template.

Par exemple, pour tester, rajoutons le code suivant :

drupal 8 custom block template

Enregistrez vos modifications, videz les caches Drupal, et retournez à la page d'accueil pour voir le rendu final :

drupal 8 custom block tempalte override

ET VOILA ! Maintenant vous savez comment surcharger les templates des blocs personnalisés !