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:

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.

Drop It Plugin

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. 👏🏻

11 thoughts on “ Explorons Gutenberg sous le capot au WPTech Lyon ”

  1. 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

  2. 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.

    1. 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

    2. 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.

    1. 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.

    2. 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

      1. 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é

      2. 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

      3. 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

Leave a Reply