Gutenberg : override le rendu des core blocks

Auteur(s) de l'article

Flavien
Flavien
Vous voilà donc en train de bricoler avec le nouvel éditeur de wordpress: Gutenberg, tout semble bien se passer. Vous créez quelques custom blocks (ce pour quoi je recommande fortement Create Guten Block) et réalisez peu à peu à quel point cela est passionnant mais complexe de créer des blocks beaux, efficaces et intelligents.
Soudain, vous tombez dans les méandres du web sur un plugin JavaScript de galerie photo tout simplement incroyable. Il vous le faut absolument sur votre site!
Créer votre propre block de galerie semble être une tâche difficile, alors que le block core/gallery fonctionne déjà parfaitement dans le backend. Si seulement vous pouviez changer la façon dont ce block est rendu dans votre frontend, pour profiter de ce plugin kick-ass. En plus vous n'auriez pas à vous soucier de diminuer l'expérience d'édition backend, car vous profiteriez de ce qui a déjà été développé par la communauté wordpress!

Comment?

La manière la plus simple pour arriver à ce résultat est de traiter le block gallery comme un Dynamic block, et de re-déclarer son rendu via PHP. Pour cela:
  • Déclarez le block dans le fichier php de votre choix, en utilisant le hook init (se fait habituellement dans le fichier functions.php de votre thème)
  • Utilisez exactement le même nom de block que celui que vous souhaitez modifier (ici core/gallery)
  • Ne spécifiez que la valeur de render_callback et mettez-y le nom de votre fonction
Et voilà! Votre fonction est utilisée pour le rendu frontend de la galerie, l'édition du block en backend est une partie de plaisir, et vous êtes libre d'expérimenter comme bon vous semble pour adapter votre nouveau rendu!
Cette approche fonctionne aussi pour Tous les core blocks Gutenberg, ce qui signifie que vous pouvez dès maintenant profiter de tous les superbes blocks déjà développés en adaptant leur rendu selon vos besoins. Si vous souhaitez plus de documentation sur les core blocks Gutenberg, je vous recommence le site suivant: Gutenberg Blocks: A Complete List & How to Use Them.