# Gutenberg : override le rendu des core blocks

> 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 […]

Source: https://antistatique.net/blog/gutenberg-override-le-rendu-des-core-blocks

Catégorie: Développement

# Gutenberg : override le rendu des core blocks

Auteur(s) de l'article

[

![Flavien](https://images.statique.ch/t/w_750,h_750,c_fill,f_jpeg,q_70/assets/avatar.png)



](#)

[Flavien](#)29 janvier 2019

Vous voilà donc en train de bricoler avec le nouvel éditeur de wordpress: [Gutenberg](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks/), tout semble bien se passer. Vous créez quelques custom blocks (ce pour quoi je recommande fortement [Create Guten Block](https://ahmadawais.com/create-guten-block-toolkit/)) 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](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks/), 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](https://gogutenberg.com/blocks/).

Confiez votre site WordPress à notre [agence web à Genève et Lausanne](https://antistatique.net/services/wordpress). Experts en solutions sur mesure, nous donnons vie à vos idées avec efficacité et créativité.

## Continuer ma lecture

Auteur(s) de l'article

[

![Basile](https://images.statique.ch/t/w_750,h_750,c_fill,f_jpeg,q_70/wp/app/uploads/2026/08/Basile_Small-300x300.jpg)



](/agence/basile)

[Basile](/agence/basile)22 octobre 2026

### [RayCast, à 2 clics de tout](/blog/raycast-two-clicks-away)

Repos GitHub, pull requests, historique du presse-papiers… Et si tout cela tenait dans un seul raccourci clavier ?

Repos GitHub, pull requests, historique du presse-papiers… Et si tout cela tenait dans un seul raccourci clavier ?

[

![Logo Raycast](https://images.statique.ch/t/w_750,h_500,c_fill,f_jpeg,q_70/editor/2026/10/raycast-fullscreen-c1d3593c.png)



](/blog/raycast-two-clicks-away)

Auteur(s) de l'article

[

![Anthony](https://images.statique.ch/t/w_750,h_750,c_fill,f_jpeg,q_70/wp/app/uploads/2024/11/anthony-1-300x300.png)



](/agence/anthony-salamone)

[Anthony](/agence/anthony-salamone)28 septembre 2026

### [Smashing Conference Freiburg 2026](/blog/smashing-conference-freiburg-2026)

Retour à Freiburg pour la Smashing Conference 2026: l'IA et les design systems, du CSS et du HTML très techniques, et des talks plus humains sur l'équipe et la posture. Voici ce qu'on en retient.

Retour à Freiburg pour la Smashing Conference 2026: l'IA et les design systems, du CSS et du HTML très techniques, et des talks plus humains sur l'équipe et la posture. Voici ce qu'on en retient.

[

![Affiche de la Smashing Conference Freiburg 2026](https://images.statique.ch/t/w_750,h_500,c_fill,f_jpeg,q_70/assets/blog/smashing-2026.png)



](/blog/smashing-conference-freiburg-2026)

Auteur(s) de l'article

[

![Marc](https://images.statique.ch/t/w_750,h_750,c_fill,f_jpeg,q_70/wp/app/uploads/2020/12/Marc-300x300.jpg)



](/agence/marc)

[Marc](/agence/marc)19 août 2026

### [Le prix du logiciel c’est surtout : qui possède le problème](/blog/le-prix-du-logiciel-cest-surtout-qui-possede-le-probleme)

La responsabilité et la confiance Payer pour un logiciel, ce n’est pas simplement acheter une solution clé en main. C’est bien plus que ça. C’est déléguer une partie de notre \[…\]

La responsabilité et la confiance Payer pour un logiciel, ce n’est pas simplement acheter une solution clé en main. C’est bien plus que ça. C’est déléguer une partie de notre \[…\]

[

![Le prix du logiciel c’est surtout : qui possède le problème](https://images.statique.ch/t/w_750,h_500,c_fill,f_jpeg,q_70/wp/app/uploads/2026/08/compliance_guy-768x768%20(1).png)



](/blog/le-prix-du-logiciel-cest-surtout-qui-possede-le-probleme)
