Gutextra, ma collection de premiers blocks Gutenberg

Coucou, c’est dimanche en nocturnal et c’est extra !

Voilà on s’amuse comme des petits fous, j’ai ajouté quelques blocs Gutenberg sur mon GitHub.

Juillet 2018, mes premiers blocs Gutenberg, ça fait tard mais qui trouve le temps ? je vous le demande ^^. Pas vraiment pu avant mais ce n’est peut-être pas plus mal ainsi car j’ai zappé du coup les breaking changes et autres évolutions qui auraient pu me dérouter.

Pourquoi ?

Après une première expérience de création de bloc pour Giphy, j’ai eu envie de me lancer.

L’idée des gifs de Giphy a plu à Riad Bengella qui committe le coeur de Gutenberg et il m’a proposé de l’intégrer à son plugin drop it qui utilisait et utilise toujours les sidebars de Gutenberg pour ajouter des photos depuis Unsplash. Maintenant Giphy.com est de la partie aussi donc ^^.

J’adore son approche parce que c’est tellement transposable à plein d’autres APIs et fontionnalités. D’ailleurs c’est pour ça qu’il l’a fait, afin de montrer aux dévs que c’est pas forcément si compliqué que ça et de les inspirer un peu. Cette collaboration m’a inspiré pas mal d’idées et en termes de code, s’inspirer des meilleurs fait gagner du temps.

Attention c’est quand même pas si simple, il y a un gros gap surtout si vous n’avez jamais vu de React mais la couche de simplification (à la WP comme j’aime) à base de composants en tous genres est absolument remarquable et facilite les choses.

Jetez un oeil ça vaut le coup components Gutenberg. Plein de trucs réutilisables et qui vous éviteront de réinventer la roue. Ça gagne du temps car le HTML, les styles et mêmes des fonctionnalités assez complexes sont gérées automatiquement.

Gutextra

Le petit lien est ici : Dépôt GitHub de Gutextra, j’ai utilisé pas mal de ressources fournies ici par Riad dans son workshop Gutenberg.

Go go go sur son workshop on apprend plein de trucs !

En ce qui concerne Gutextra, il y a 3 blocs pour l’instant, un qui fait des alertes en mode boostrap pour les styles assez classique, un bloc de charts vous savez en camemberts et un bloc image relativement élaboré pour s’amuser justement avec les components Gutenberg.

J’ai mis des screenshots un peu partout sur le readme pour que ce soit plus sympa. Attention c’est un dépôt dév ça s’installe pas comme ça directement, il faudra lancer une commande :

npm i && npm run build

Démos

Charts
Watermark

La simplicité

C’est assez fou d’arriver à simplifier à ce point et on peut créer des interfaces tout de même assez avancées et beaucoup plus fluides, comme jamais 😉
T’imagines à la main ?

Avant, en dehors d’ACF, paie ton après-midi. Je vais pas vous mentir pour autant, les premiers blocs sont pas en mode turbo, donc paie ton après-midi surtout si tu fais un article, des screenshots, une démo… XD

Mais cela ne peut qu’aller en s’améliorant.

Certains défis restent d’actualité

Rien que ce lien (au passage quel travail de 10up là-dessus !) montre que tout n’est pas gagné avec Gutenberg. Une partie de l’écosystème a d’ailleurs exprimé ses craintes largement et la transition comporte des risques.

Je comprends tout à fait les réactions diverses. Tout le monde n’est pas dithyrambique, loin s’en faut, et il y a de bons arguments aussi. Bon évidemment y a ceux qui vont râler, histoire de, sans même trop comprendre de quoi il est question et trancher parce qu’ils ont entendu 2-3 dévs expérimentés faire « meh ». Chacun réagit comme il peut, de toute manière un changement aussi important ne peut pas passer comme une lettre à la poste.

Le danger ?

Gutenberg c’est assez fou en fait, lancez-vous ! Faites des blocs à tout-va, soyez créatifs. Y a vraiment pas mal d’inspiration déjà, ce n’est pas réservé aux initiés.
Exprimer un jugement technique sur Gutenberg me paraît aujourd’hui mal à propos et je ne vais sûrement pas le faire ici. J’ai décidé de le prendre plutôt comme une opportunité supplémentaire de progresser avec d’autres langages.

Alors est-ce qu’il y avait d’autres choses à faire évoluer dans WordPress avant Gutenberg, notamment des sujets sécuritaires (le dernier en date m’a laissé littéralement abassourdi), est-ce qu’on est pas entrain de tromper ? et si et si… et si c’est pour faire comme 10up (et d’autres) oui ça vaut le coup de se prononcer parce que ce sera très argumenté sinon autant s’adapter du mieux qu’on peut.

Conclusion

Prenons le « risque » que ça marche et que ce soit cool Gutenberg. Certains projets ne pourront à mon sens pas migrer sans une refonte totale mais rares tout de même sont les sites à rester 10 ans sur la même base technique, nous avons déjà des solutions gratuites dans l’écosystème pour désactiver Gutenberg totalement ou en partie avec notamment Gutenberg Ramp pour faire un tri sélectif.

Je propose de voir ça vraiment comme une opportunité. Sans se voiler la face évidemment, y a du boulot en perpective ! À vos claviers 😉