J’ai eu l’honneur de donner un nouveau talk sur Gutenberg au WP Tech Lyon. De nombreux talks ont été donnés sur Gutenberg, le pourquoi du comment, ce que ça change pour les utilisateurs mais peu de talks ont abordé les dessous de Gutenberg, son architecture et ce que ça apporte au développeur de thèmes de plugins et aux développeurs JavaScript en général.
Voici les slides du talk:
Vous pouvez aussi revoir le talk
Au cours de ce talk, nous avons suivi les différentes étapes pour le développement d’un plugin Gutenberg WordPress en utilisant les différents modules mis à notre disposition.
Le résultat est un plugin plutôt utile qui permet d’insérer des photos Unsplash.com directement depuis la sidebar de Gutenberg.
Télécharger ce plugin depuis le repository WordPress.org et survoler son code source sur GitHub.
Un grand merci aux organisateurs et bénévoles, c’était vraiment un évènement très réussi. 👏🏻
18 responses to “Explorons Gutenberg sous le capot au WPTech Lyon”
Salut Riad
Est ce que ton talk a été filmé ?
Parce que ça a l’air super intéressant, dommage que je n’ai pas pu y participer
Oui je pense, je mettrais à jour avec la vidéo lorsque ça sera publié.
Je crois pas que mon premier commentaire soit passé.
J’avais deux question a te poser la première c’est si tu avais d’autre talk prevu en France
et la deuxième c’est sur l’utilisation du checkboxcontrol : https://github.com/WordPress/gutenberg/tree/master/components/checkbox-control. Il y a pas d’options, du coup comment on lui donne les différent valeurs.
Par differents valeurs je veux dire dans l’exemple Pizza toppings ici : https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/checkbox#is-this-the-right-control c’est peperonni onions mushroom et beef et si on peut obtenir une liste de valeur automatique, par exemple recuperer l’ensemble des categories comme on peut le faire avec le selectControl.
Pas de talk prévu pour le moment, il faut que je fasse un tour sur les confs avec des CFP ouverts 🙂
CheckboxControl c’est pour gérer une seule checkbox, pas une liste de chebox. Il n’y a pas de composant fourni dans Gutenberg pour faire ça, mais ça doit se faire à la main (boucle sur tes option pour afficher un CheckboxControl).
J’ai trouvé ça en faisant une petite recherche rapide sinon https://www.npmjs.com/package/react-checkbox-list mais je ne sais pas ce que ça vaut
Merci
Je ne suis pas sur twitter mais je vais surveiller ton compte, voir si jamais tu passes dans le nord de la France ou en belgique.
J’ai essayé de trouver la vidéo de ce talk sans succès, par contre j’ai trouvé une autre vidéo. Pour ceux que ça intéresse : https://wordpress.tv/2018/04/26/riad-benguella-1001-manieres-detendre-gutenberg-le-nouvel-editeur-de-wordpress/
Merci pour le partage. La vidéo n’est pas encore disponible. Je mettrai à jour l’article avec la vidéo lorsqu’elle sera disponible.
Riad j’ai une petite question à te poser sur innerblocks.
Est ce que c’est possible d’une manière ou d’une autre de cibler le block choisi.
Je m’explique, j’utIlise actuellement AOS : https://github.com/michalsnik/aos.
Je me suis dit qu’utiliser une innerblock serait un bon moyen pour créer un block Aos.
Seulement je bloque sur la manière d’ajouter data-aos=”animation_name” sur l’élément choisi par example un paragraphe ou une image, pour l’instant j’ai qu’une animation sur l’innerblock lui meme : https://gist.github.com/sylvaincordiere/15442ea3b01ef86e9cf84284dfbf66da
C’est au niveau de l’éditeur que tu veux rajouter ça au du front? Peut être que tu devrais faire ça grâce aux filtres (edit ou save), tu modifie les blocs en question pour leur rajouter le comportement voulu si tu détecte qu’ils ont un parent de tel type. (tu peux voir le data module `wp.select( ‘editor’ ).getBlockOrder()` pour voir la hierarchie de blocs. Mais ça reste un développement assez poussé
Au niveau du front et de l’editeur.
J’ai essayé de le faire avec les filtres en prenant comme dans l’exemple de ton workshop, l’idée étant de rajouter une toggle a tous les blocks de gutenberg, si le toggle est activé alors on rajoute le data-aos sur l”élément et justement dans ton exemple : https://github.com/youknowriad/gutenberg-extensibility-workshop/blob/master/scripts/08-extend-block/index.js#L28 tu utilise bien settings.edit {…props} pour récupérer les propriétés des différent modules donc si je veux ajouter le data-aos sur l’élément je dois faire ça : https://gist.github.com/sylvaincordiere/e199884fda4ba5c7ec9720ab4ee65286#file-gistfile1-txt-L35
le fait de rajouter le data-aos prop au edit ne fait rien dutout à cet endroit parce que cette prop n’est pas utilisé par les edit en question
Bonjour Riad
Merci pour ce tutoriel détaillé.
Je voulais savoir s’il était possible de modifier les attributes depuis un autre composent React.
J’ai créer mon propre composent Modal qui affiche des icônes et quand on clique sur cette icône, il y a une callback function someFn qui est censé modifié l’attributes letter.
Sauf que quand je clique sur l’icône j’ai une erreur TypeError: _this2 is undefined et quand je recharge la page de l’éditeur j’ai l’erreur Objects are not valid as a React child (found: object with keys {}).
Si tu as une petite idée sur l’origine de cette erreur ?
https://gist.github.com/soniapello/901b9fe44563498a5231e5cf96dfd103
Très intéressant ce talk.
J’imagine qu’avec le lancement de wordpress 5 t’en n’as pas prévu d’autre pour 2018
J’ai aussi un petit conseil à te demander sur la manière d’ajouter react sur le front le plus “proprement” possible.
Par défaut gutenberg utilise react dans le back end mais parfois ça peut aussi être utile de l’avoir sur le front
Merci.
Si tu as un script custom chargé en front, tu peux lui ajouter une dépendence vers `wp-element` et utiliser wp.element comme tu utiliserait React.
Ah c’est aussi simple que ça ?
Comme ça me parait trop simple, je vais quand détaille ce que j’ai compris :
dans l’enqueue script de mon front end j’ajoute wp-element quelque chose comme ca
wp_enqueue_script(
‘my-block-js’,
plugins_url( ‘/blocks/custom-block/scripts.js’, __FILE__ ),
(‘wp-blocks’, ‘wp-element’, ‘wp-components’, ‘wp-i18n’),
filemtime( plugin_dir_path( __FILE__ ) . ‘blocks/custom-block/scripts.js’ )
);
et c’est bon je peux utliser wp-element
Tout à fait 🙂
Un grand merci à toi Riad pour tes contributions sur gutenberg.
Il y a relativement peu d’articles détaillés sur gutenberg (la plupart étant sur la création de block très basique),
alors que gutenberg ouvre d’innombrable possibilités.
En parlant des nouveaux possibilités, j’ai en tête la vr et j’ai justement une question à te poser :
Crois tu qu’il est possible d’ajouter la librairie React 360 (https://facebook.github.io/react-360/) au front end de gutenberg ?
oui c’est possible au niveau du frontend, tu enqueue le script dont tu as besoin comme n’importe quel autre script wordpress.