Créer un bloc personnalisé Gutenberg WordPress

WordPress vient nativement avec des blocs, qui permettent de créer toutes sortes de pages et articles.

Vous avez essayé divers plugins pour ajouter des blocs à votre site WordPress, et êtes venu à l'idée que vous voudriez commencer à créer vos propres blocs ?

Voici différentes solutions pour créer de nouveaux blocs Gutenberg personnalisés pour WordPress.

La solution normale, mais ils n'ont pas fait ça simple. Le tutoriel officiel. Nécessite un environnement de dév NodeJS et de solides connaissances en développement.

Voici des retours que j'ai pu lire sur le sujet :

The Gutenberg default block architecture is horrible: the react component is rendered into HTML string and is then saved to the database.
This makes it a pain to develop custom blocks because the markup goes out of sync with the component.

Traduction : c'est très dur et mal fait.

The React static blocks would work in a case where you are making a block plugin for distribution on WordPress.org or something but for a client projects it’s a real productivity killer.

Traduction : créer un bloc nativement en React peut être envisagé en cas de lancement sur un site officiel, mais pour des projets clients, cela prends bien trop de temps.

Autrement dit, créer un bloc WordPress avec la méthode "normale" prends trop de temps, est très difficile, et augmenterait trop les factures des projets Web.

Heureusement, il y a d'autres solutions.

ACF à la rescousse. Le célèbre plugin, utilisé tant par les débutants que les professionnels, dont la fonctionnalité principale est d'ajouter facilement des champs personnalisés à des objets WordPress, permet également de créer des blocs (voir ma présentation d'ACF).

L'avantage de créer des blocs avec ACF est qu'il permet de le faire simplement en PHP (+JSON et CSS) : pas besoin de se lancer dans le dév NodeJS. La structure est également largement simplifiée.

Le tuto officiel pour créer un premier bloc avec ACF.

La solution la plus facile pour créer des blocs WordPress.

Lazy Blocks est gratuit sur wordpress.org (plus de 20 000 installations actives, octobre 2026) : vous créez le bloc et ses réglages par glisser-déposer, puis vous écrivez son rendu en HTML ou en PHP. Il sert aussi à créer des champs personnalisés pour vos articles.

Lazy Blocks propose également une fonctionnalité pratique de logique conditionnelle.

Voici un tutoriel pour créer un code avec WP Code.

WPCode est l'extension de gestion de code la plus installée de wordpress.org (plus de 3 millions d'installations actives, octobre 2026). Sa version gratuite insère du code dans l'en-tête et le pied de page et gère des extraits PHP, CSS et JavaScript avec des conditions d'affichage ; la création de blocs demande la version payante.

Requiert la version pro de WP Code (49$ la première année, puis 99$/an).

Une autre solution pour simuler de nouveaux blocs est d'utiliser la fonctionnalité "Content Block" de Blocksy.

Dans de nombreux cas, nous n'avons pas réellement besoin de créer des nouveaux blocs : la fonctionnalité de "patterns" de WordPress peut suffire.

Toutefois, attendons les "overrides in synced patterns" qui viendront dans WordPress 6.6 le 16 juillet 2024.

Block Lab était une solution très flexible et semi-complexe, qui n'existe plus.

En août 2024, une documentation officielle a été publiée sur le sujet sur le blog officiel WordPress developer.

• Quelle solution je choisis et pourquoi

• Notes sur ACF et color palette picker