Comment obtenir une suggestion de template twig pour un bloc personnalisé (custom block) ?

Template des blocs personnalisés

Avec Drupal, on peut créer des types de blocs personnalisés. On peut ajouter les champs nécessaires comme un champ texte, image, etc. exactement comme pour les nodes. Cela peut-être pratique par exemple pour créer un bloc “hero” avec une image qui prend toute la largeur du site avec un texte affiché sur l'image. On peut créer ensuite plusieurs blocs à partir de ce type de bloc et les intégrer dans une ou des positions définies par le template.

En revanche, quand on veut créer un template twig pour créer un template pour ce bloc personnalisé, quand on active le mode debug, on ne voit pas de suggestion pour le type de bloc. Drupal propose une suggestion pour un bloc précis. Cela veut dire que si on a plusieurs blocs personnalisés créés à partir du même type de bloc, on aura plusieurs templates avec le même code. Ce n’est donc pas une solution idéale. Le code ne sera pas facile à maintenir et on répète inutilement des templates.  

Suggestion native de template pour un bloc

FILE NAME SUGGESTIONS:
   * block--illustration2.html.twig
   * block--block-content--4ba32eec-399d-464b-8b12-717a837a557b.html.twig
   * block--block-content.html.twig
   * block--block-content.html.twig
   * block.html.twig

Dans cet exemple, block--illustration2.html.twig correspond à un bloc unique. Si on a plusieurs blocs qui sont créés à partir du même type de bloc, on aura des suggestions différentes comme block--illustration1.html.twig, etc.

Il existe une solution très simple pour obtenir une suggestion de template. Il faut simplement ajouter ce code dans votre fichier *.theme et implémenter le hook hook_theme_suggestions_hook()

Implémentation du hook_theme_suggestions_hook()

/**
 * Implementation of hook_theme_suggestions_hook().
 */
function MY_THEME_theme_suggestions_block_alter(&$suggestions, $variables) {
  if (isset($variables['elements']['content']['#block_content'])) {
    $bundle = $variables['elements']['content']['#block_content']->bundle();
    array_splice($suggestions, 1, 0, 'block__' . $bundle);
  }
}

Avec ce hook, vous obtenez une suggestion de template twig pour chaque type de bloc.

Suggestion de template avec le hook

FILE NAME SUGGESTIONS:
   * block--illustration2.html.twig
   * block--block-content--4ba32eec-399d-464b-8b12-717a837a557b.html.twig
   * block--block-content.html.twig
   x block--bloc-rounded-image.html.twig
   * block--block-content.html.twig
   * block.html.twig

On a maintenant une suggestion pour le type de bloc, par exemple block--bloc-rounded-image.html.twig pour un type de bloc dont l’ID est bloc_rounded_image.

On peut donc créer un template twig qui se nomme block--bloc-rounded-image.html.twig et coder la structure html avec les champs Drupal comme on le ferait pour un node.

Exemple de template twig

<div class="hero">

    {{ content.field_image_1 }}

    <div class="hero-txt">{{ content.field_txt_1 }}</div>

</div>