L’éditeur de blocs de WordPress n’en fini pas d’évoluer depuis sa sortie en 2018, et heureusement, il va dans la bonne direction. Je viens de terminer la 3è mise à jour majeure de la formation : tous les supports sont désormais à jour, et en plus, la formation reste gratuite !
Sommaire du cours
La formation Gutenberg est à jour, et reste gratuite !
En 2021, j’avais décidé de rendre toutes mes formations gratuites, car je n’avais plus de temps à cause de mon autre projet, WPChef. Mais depuis 2022, m’étant mis en retrait, j’ai à nouveau du temps pour écrire des cours pour CapitaineWP !
Et je me suis occupé en priorité de remettre à jour la formation Gutenberg afin de montrer les bonnes pratiques les plus récentes.
Vous pourrez donc suivre l’intégralité des cours sans débourser un centime ! Pour suivre la formation Gutenberg, c’est par ici !
Je propose également une extension avec les 20 exemples de blocs vus en formation disponible librement sur Github.
Quel est le programme de la formation ?
J’ai profité de la mise à jour pour remanier le programme, ajouter quelques nouveautés, et bien entendu mettre à jour les exemples existants, en respectant les dernières bonnes pratiques.
Alors qu’est-ce que vous allez trouver dans cette nouvelle mouture de la formation ? On va voir :
- Voir ou revoir les fondamentaux de la syntaxe JS moderne et React ;
- Comment créer un plugin de blocs grâce à la librairie officielle
create-block, qui va compiler toute seule les fichiers JS et CSS ; - Créer des blocs avec des options de personnalisation ;
- Créer des blocs dynamiques qui récupèrent des informations dans la base (l’équivalent de la WP Query pour JS en quelques sortes) ;
- Utilisez des concepts JS comme la déstructuration et l’utilisation de sous-composants pour simplifier le code (ça fait peur dit comme ça, mais je vous assure que ça simplifie la vie !) ;
- Créer des blocs qui accepteront des sous-blocs, comme pour les colonnes par exemple, grâce à
<InnerBlocks>; - Utiliser les hooks React pour modifier le comportement d’un bloc existant sans toucher à son code original ;
- Des études de cas complètes avec le bloc Article et le bloc Plugin ;
- Comment créer un bloc sans code grâce à ACF ;
- Transformer un bloc et gérer sa dépréciation avec le temps ;
- Et plein d’astuces, de réglages, et de paramètres supplémentaires !
Les études de cas vont vous permettre de réunir tous les concepts et réaliser des blocs utiles. Par exemple, le bloc Article permet d’afficher le résumé d’un article dans une publication, avec l’image mise en avant.
Quant au bloc Plugin, il va nous permettre de nous connecter à l’API de WordPress.org afin de récupérer les informations d’une extension et l’afficher dans une publication. C’est le même que j’utilise dans mes cours :
Améliorez votre SEO avec WordPress : rédigez de meilleurs contenus et obtenez un site WordPress optimisé en utilisant l’extension Yoast SEO.
Bref, pas de quoi vous ennuyer ! Malgré tout, j’ai tenté de synthétiser pour vous rendre opérationnels en peu de temps.
À l’issue de cette formation, vous serez en mesure de réaliser quasiment n’importe quel type de bloc, mais également optimiser votre code, comprendre les rouages de React ainsi que les subtilités du JS moderne.
Pourquoi devrai-je me former à Gutenberg, déjà ?
Après un lancement houleux en 2018, Gutenberg s’impose aujourd’hui comme la solution de référence pour créer des sites sur mesure, surtout si vous êtes une agence web !
Je ne sais pas si vous êtes au courant, mais de nombreuses agences (dont des grosses comme Whodunit) ont déjà franchi le pas. Et aucune d’entre-elles ne regrette à ma connaissance !
Alors, c’est sûr qu’il y a plein de façons de faire des sites avec WordPress, j’ai d’ailleurs publié récemment un guide à ce sujet : Les 6 façons de faire un site avec WordPress.
Vous pourriez coder votre thème en PHP + HTML + CSS, avec des champs ACF. Après tout, cette solution reste tout à fait viable. Mais ce n’est pas aussi visuel qu’avec l’éditeur natif !
Vous pourriez également utiliser Elementor et créer des widgets sur mesure. C’est une technique hybride plutôt rapide à mettre en place, idéal lorsque les budgets sont serrés !
Mais le gros point noir, c’est qu’Elementor propose des centaines d’options de partout. Les risques que votre utilisateur casse quelque chose, ou ne respecte pas la charte, est grand !
Alors qu’avec Gutenberg, vous allez pouvoir créer des blocs avec le minimum de personnalisation, imposer le choix des couleurs par rapport à la charte. Le tout dans un éditeur visuel 100% WYSIWYG.
C’est le choix qu’a fait WP Rocket pour son nouveau site. Le site tourne avec 24 blocs, qu’on peut voit comme les composants d’un design system. Car oui, Gutenberg se veut en phase avec les principes modernes de design d’interface, et de branding !
WordPress va continuer de changer en profondeur dans les années qui vont suivre, surtout depuis l’arrivée récente du Full Site Editing ! Alors autant ne pas prendre de retard.
Et Gutenberg, c’est quand même Florian Truchot, qui en parlera le mieux, car en étant directeur technique de l’agence web Lyonnaise Fantassin spécialisée WordPress, je peux vous dire qu’il fait une veille technologique intensive sur le sujet, et beaucoup de R&D.
Le conseil de Florian Truchot
Creative Developer chez Fantassin
Il existe un langage commun entre les métiers du web : le designer parlera d’Atomic Design avec une approche en atomes et molécules, le développeur parlera d’objets et de composants, et le rédacteur parlera de blocs. Gutenberg s’inscrit donc parfaitement dans cette logique, ce qui en fait l’outil idéal pour suivre les spécifications d’un Design System moderne.
Ce que j’apprécie avec l’éditeur, c’est le HTML minimaliste qui est généré. On évite ainsi la salade d’en « div » qu’on peut retrouver sur Elementor par exemple.
Il y a aussi toute la souplesse de l’expérience utilisateur, que l’on peut personnaliser à souhait en fonction des projets :
– On peut créer facilement et rapidement des blocs sur mesure pour répondre à tout besoin. Et même si on n’est pas développeur d’ailleurs, grâce à ACF.
– On maitrise totalement les options que l’on va proposer ou non aux rédacteurs du site ;
– L’éditeur nous fournit tout un tas d’outils pour nous simplifier la vie : par exemple la possibilité de proposer des variantes de blocs, de synchroniser des données entres des blocs, étendre les fonctionnalités natives sans recoder…
Enfin, Gutenberg est aujourd’hui le seul éditeur permettant de créer des thèmes entiers à partir uniquement de blocs.
Et je le remercie chaleureusement d’ailleurs car il m’a énormément aidé pour mettre à jour cette formation.
J’espère que cette nouvelle version de la formation vous donnera envie de vous plonger dans l’univers des blocs avec Gutenberg ! En tous cas, c’est de plus en plus facile grâce aux dernières évolutions, et j’adore vraiment la tournure que ça prend.
Maintenant, à vos blocs !
0
Commentaires