 Bonjour à tous, alors je m'appelle Benjamin Grolo, je suis développeur WordPress et WooCommerce, je suis designer de formation et je suis originaire d'un petit village dans le menéloir qui s'appelle tout le monde et c'est ma première conférence donc je suis un peu, je suis pas l'homme le plus sain de la terre mais ça va bien se passer. Donc ce qu'on va voir aujourd'hui les objectifs c'est comprendre que Gutenberg et WordPress ce ne sont que des outils et au final on peut tout faire à partir du moment on est une certaine logique de décomposition et ensuite on va voir qu'en réfléchissant vraiment pour Gutenberg on peut réussir à créer des blocs qui sont réutilisables ou vraiment créatifs ou les deux. Donc la première étape c'est de réussir à bien décomposer les pages pour vraiment créer quelque chose qui soit facile dans l'éditeur donc on va prendre un exemple très simple c'est la page de présentation du MacBook Pro et on va voir qu'en fait on peut tout faire avec les blocs qui sont natifs dans l'éditeur ou presque. Donc là on aurait un bloc vidéo, un bloc titre, un bloc paragraphe, encore un bloc paragraphe, des boutons ou des liens. Là on a un premier bloc qui est vraiment custom c'est le Mac qui s'ouvre au scroll ou là il faudra un petit peu de WebGL éventuellement, un titre, des colonnes, des images dans les colonnes, des titres etc. On repasse sur des paragraphes, des boutons, enfin vous avez compris la mécanique. Là on aurait un groupe, il y a un petit arrière plan qu'on voit donc pour gérer l'arrière plan on pourrait mettre un bloc groupe et à l'intérieur on pourrait mettre titre, paragraphe etc. Et là on a un nouveau bloc qui pourrait être custom c'est une progresse bar. Donc on va voir que au final la progresse bar c'est pas grand chose. Donc pour faire toute la page de présentation on aurait besoin d'un bloc progresse bar, d'un bloc carousel qui est tout en bas de page et du bloc où le Mac s'ouvre au scroll qui est un petit peu plus complexe mais c'est tout. Le reste c'est des blocs qui sont natifs dans WordPress. Pensez re-utilisables. Si on crée ces trois blocs il y en a forcément qu'on peut re-utiliser. La progresse bar notamment c'est juste du style. Le reste c'est un attribut HTML, enfin une balise HTML et on en fait ce qu'on veut. Le bloc carousel il y en a à peu près sur tous les sites où presque les designers adorent ça. Et ensuite on a le bloc vraiment créat où là effectivement c'est du custom et on ne sera pas amené à le re-utiliser. Mon constat c'est que les blocs utilisés au sein des agences c'est souvent les mêmes, voire tout le temps. Et que la structure de ces blocs change rarement ce qui va changer c'est le style, les couleurs, les typographies. C'est juste ça. Ça nous donne de belles opportunités. On peut gagner énormément de temps si on arrive à mutualiser tous ces blocs et en faire quelque chose qu'on peut re-utiliser sur plusieurs sites. On gagne du temps au niveau de la personne qui saisit les contenus. Si elle habituait à saisir à chaque fois les mêmes blocs c'est beaucoup plus facile pour tout le monde que ce soit en interne ou vos clients. Là maintenant ça est facilité. C'est beaucoup plus facile de maintenir un plugin ou un bloc que d'en maintenir 50. Et au final l'expérience d'utilisation est quand même je pense bien meilleur sur l'éditeur Guthinberg que sur ACF par exemple. On remplit au final un formulaire. On a les premiers blocs, c'est les blocs classiques. Les classiques c'est le client qui nous dit je veux et là vous pouvez insérer à peu près tous ces mots là. Des accordéons, des FAQ, du contenu enrichi. Des formuleurs, des fils d'Ariane, des carousel comme on a dit, des galeries photos même s'il existe un petit peu de represse. Et un bloc conditionnel si jamais l'utilisateur il est connecté j'aimerais bien qu'il le voit sinon il ne le voit pas. Donc ça je parle du principe qu'on ne va pas le voir aujourd'hui parce que c'est quelque chose qu'on peut mettre en place assez facilement comme on l'a vu avec Vincent et qu'on peut faire très rapidement au sein des agences. Si on continue sur les blocs qui sont régulièrement utilisés on peut avoir les cartes. Souvent les clients ils aiment bien dire j'aimerais bien qu'on voit mon magasin où il est situé ou tous mes points de vente etc. Ça on peut le faire très facilement avec l'ifletmap qui est donc une solution qui permet de pallier à Google Maps qui open source et on peut voir que si on rend quelques attributs donc la longitude et la latitude de départ on peut avoir un bloc qui se construit tout seul et que dans ce bloc là on peut mettre des marqueurs. Donc si on regarde l'anatomie du bloc on va avoir le bloc parent qui contient la map et on va avoir ensuite des blocs enfants ça va être les marqueurs ça va être les cercles ça va être les pop-up quand on clique sur les marqueurs et tout ça on peut le gérer d'Angus Timber. Je suis désolé on rentre un petit peu dans la technique. Le bloc parent en fait il y a déjà des composants qui sont fournis par une librairie qui s'appelle React Clifflet et on a juste à rentrer les bonnes propriétés donc le center c'est ce qui permet de définir le centre de la map au moment où elle se charge. Le zoom c'est le niveau de zoom et là j'ai mis le style en dur mais on pourrait très bien faire un attribut aussi et pouvoir le sélectionner au début. Ensuite on a le taille de layer où on choisit quelle allure à notre carte et après on veut utiliser l'inner blocs. L'inner blocs c'est quelque chose qui est vraiment très très puissant une fois qu'on a commencé à comprendre comment ça fonctionne c'est à dire que vous allez pouvoir mettre n'importe quel bloc dans des blocs et ensuite on a les blocs enfants donc le bloc enfant est très très simple puisqu'on importe le composant marqueur de React Clifflet. On lui passe les attributs qu'on veut et grosso modo le marqueur est fait. Et tous les blocs sont fournis par React Clifflet comme on disait. La deuxième étape c'est de penser en dehors de la boîte. Ok WordPress c'est un éditeur pour faire des sites avec des pages assez basiques souvent ou pas. Mais au final on peut aussi créer des blocs très gratifs par exemple. Là j'ai un exemple d'un bloc l'OTGS donc l'OTGS c'est une librairie qui permet de convertir des animations after effect en G-zone et de pouvoir après les afficher sur le site donc c'est beaucoup moins l'heure qu'une vidéo. Et dans l'éditeur ça s'étalure là et au final après je peux jouer avec mes attributs pour choisir son affiche ou non l'animation en boucle ou sur vol en lecture automatique ou pas. Et tout ça c'est quelques lignes de code puisqu'on utilise la librairie l'OTI qui est fourni, enfin la librairie React qui est fourni par l'OTI. On oublie aussi que WordPress au final c'est un éditeur de contenu et qui fait que gérer du contenu. On s'en fiche du contenu qu'on lui fournit. Ça peut totalement être une application qu'on crée à l'intérieur. Donc par exemple je me suis amusé à faire de la 3D avec Gutenberg donc la 3D qu'est-ce qu'il y a on va avoir un bloc scene et des objets à l'intérieur donc les objets ça peut être des lumières ça peut être des mèches ça peut être des cubes ça peut être ce que vous voulez donc ça c'est le petit schéma donc on a une caméra qui rend la scène et les lumières qui illuminent les objets sont quoi on a un écran noir. Donc le bloc scene qu'est-ce que ça va être ça va être un bloc parent où on affiche un canvas donc le canvas c'est 3js qui est une librairie qui permet d'afficher de faire de la 3D dans le navigateur avec WebGL donc ça va être rendu à ce niveau là de dix vrais franvas et à l'intérieur on va juste avoir des inner blocks donc les inner blocks c'est quoi ça va être nos lumières ça va être nos cubes ça va être nos objets qu'on peut importer le blender etc. L'avantage de Gutenberg c'est qu'il utilise React donc derrière on peut utiliser absolument tous les hooks de React on va notamment avoir use ref le problème que j'ai eu quand j'ai commencé à créer ce bloc c'est qu'à chaque fois que je rendais le bloc il me crée un nouveau rendu donc je me suis retrouvé avec dix vrais rendus 3D les uns sous les autres use ref permet de faire référence à un seul objet et donc de le mettre à jour au fur et à mesure donc là je crée ma scène donc c'est 3js c'est une librairie qui est très accessible parce qu'elle est très elle est très bien écrite donc dans le use effect le use effect qu'est ce que c'est c'est un hook React qui permet de mettre à jour seulement quand des valeurs changent donc les valeurs qu'on va surveiller c'est ce qu'on voit en bas donc la valeur de alpha qui va définir si mon rendu il est transparent ou non ensuite les valeurs de taille donc ce qu'on fait au début on lance la scène donc on initialise un nouvel objet on fait référence comme on voyait juste avant avec le use ref à canvas ref ensuite on fait les fonctions qui permettent d'animer la scène et donc de rendre avec les lumières les objets à l'intérieur etc et ensuite ce que je fais c'est que je passe le la scène en attributs passer cette scène en attributs ça va me permettre de pouvoir la récupérer dans mes inner blocks et donc de pouvoir ajouter des objets à cette scène c'est un petit peu mécanique mais vous allez voir après le bloc cube c'est on l'a vu avec Vincent tout à l'heure c'est un rigide sur bloc type tout simple une méthode édite une méthode save et par contre on utilise le contexte de WC Lyon canvas qui est au final ce que j'ai passé au niveau de cette attribut de canvas en fait ça va nous permettre d'utiliser un attribut d'un autre bloc donc ça c'est mon bloc cube on initialise une nouvelle géométrie la géométrie c'est vraiment les arrêtes de votre de votre objet 3d ensuite on lui ajoute un matériau un matériel matériau je ne sais pas et ensuite on crée le cube en disant à partir des arrêtes si on applique le matériau par dessus il faut rendre ça on utilise toujours le use effect et vous voyez qu'ici ce qu'on fait c'est qu'on ajoute le cube à la scène à la scène de 3js donc ça nous donne ça alors le contraste n'est pas ouf donc là on a un cube qui fonctionne si on change la couleur dans dans guttenberg ça fonctionne il n'y a pas de soucis on peut changer la couleur de la lumière le rendu c'est en temps réel alors je suis d'accord les cubes c'est bien mais personne n'en veut sur son site ça sert absolument à rien par contre ce qu'on peut faire c'est qu'on peut créer des blocs qui permettent d'afficher des objets qui proviennent de blender par exemple et là on va avoir une toute autre utilité c'est à dire que sur le site de l'aura merlin la vis que je veux acheter je suis pas sûr d'avoir le bon tournevis ou que ça correspond exactement à ce que je veux bah si j'avais l'objet en 3d ça serait plutôt cool les lunettes pareil les lunettes on a deux trois vues ça serait cool de pouvoir naviller autour et de voir exactement à quoi le ressemble on peut aller encore plus loin pardon ça c'est un configurateur 3d donc c'est à dire que je peux me personnaliser ma veste aux couleurs de mon club ou de mon entreprise etc et ça on peut très bien l'imaginer dans un contexte totalement guttenberg donc si on réfléchit un petit peu on a donc le bloc 3ds qui est complètement custom à droite là on aura un autre bloc custom et en faisant référence au contexte dont on parlait tout à l'heure on pourrait très bien utiliser enfin réussir à obtenir tous les objets qui sont à l'intérieur de l'objet 3d et ensuite au milieu on aurait quasiment que des blocs natifs de bord presse rappel numéro 2 guttenberg peut exister en dehors de bord presse pardon c'est important de le préciser c'est une libraire qui est vraiment à part on l'utilise très souvent dans un contexte hors presse mais au final dans un symphonie dans ce que vous voulez ça fonctionne aussi et donc je me suis amusé à créer mes factures sous bord presse donc la facture qu'est ce que c'est au final il n'y a que quelques parties variables donc on va voir les informations clients on va voir les lignes de ce contacture on va voir le numéro de facture ce qui arrive sur le compte en banque en bas à droite et la date j'espère qu'il n'y a pas de juriste dans la salle sinon je vais me taper sur les deux donc le bloc information client ça pourrait être relié à un custom post type client où on aurait toutes les informations sur l'adresse etc ça serait un bloc dynamique comme on disait tout à l'heure on n'est pas obligé de tout faire en réacte et on peut très bien rendre des informations en php derrière c'est juste la fonction safe qui change un petit peu on retourne nul et au final derrière on peut se bloquer enfin se on peut définir un callback pour rendre le bloc et donc là on aurait juste un id qui serait retourné comme ça on pourra aller chercher des informations avec des gait post meta ou ce que vous voulez ce qui est déjà j'allais par wordpress dans la facture c'est l'objet on pourrait utiliser le titre de la publication et la date de la facturation bah ça c'est la date de la publication et on en parle plus par exemple donc le contenu de la facture ça va être un bloc qui contient uniquement des inner blocs il n'y a rien d'autre donc c'est un bloc qui va être très très simple puisque en fait ce qu'on va faire c'est qu'on va lui autoriser certains blocs qui qui est défini dans la constante à le web blocs et ensuite on va lui définir un template donc le template ça permet de définir tout simplement les blocs qui sont là au départ de quand on ajoute le bloc c'est tout on peut le bloquer ou non après ou sur la doc c'est pas mal renseigné et ensuite à l'intérieur de ce bloc contenu de facture ce que je veux avoir c'est vraiment la ligne de facturation où là effectivement c'est un petit peu plus compliqué enfin c'est pas très compliqué mais on a plus de contenu à renseigner donc on va avoir le titre on le voit ici dans les attributs on va avoir la quantité si on facture 5 t-shirts si on en facture 10 la réduction le prix on pourra en avoir bien d'autres mais c'est pour faire un exemple assez précis et donc après moi j'ai organisé ça avec plusieurs composants donc le premier c'est pour le titre j'utilise le chant riche le composants rich texte donc ça on a vu avec vincent comment ça fonctionnait la seule petite nouveauté c'est les formats qui sont autorisés moi j'autorise le bol d'élite à l'ic comme ça je m'épargne certains cas particuliers le contenu on veut utiliser l'inner blocs tout simplement parce que si je veux avoir des listes ou des paragraphs à l'intérieur ben je vais pas réinventer la roue et je vais utiliser ce que wordpress fait directement et ensuite j'ai toujours le template pareil avec le paragraph avec un contenu par défaut comme ça vous allez voir que quand on affiche le blocs il sera là par défaut ensuite on a le les chiffres donc les chiffres y a un composant number control qui permet de bas en fait c'est un input type number et donc on va pouvoir définir la quantité le prix et donc au final ça nous fait un bloc vraiment on fait ce qu'on veut il y a le titre qui est en haut après je peux mettre donc du texte ou des listes et ensuite à droite je peux régler le prix et la quantité comme j'ai dit tout à l'heure le gros avantage c'est qu'on peut utiliser les hoops de réacte donc là par exemple ce qui est cool c'est que ce qui serait cool c'est de pouvoir calculer le total de ma facture à partir des blocs qui sont à l'intérieur de mon composant contenu donc ce que je fais tout en haut avec le use select le use select ça me permet de sélectionner des entités on va dire et donc je peux récupérer tous les blocs qui sont à l'intérieur enfin tous les inner blocs à l'intérieur du bloc par an c'est ce que je fais tout en haut ensuite j'utilise le hook use memo le hook use memo ça permet de mettre en cache une certaine valeur et de ref, enfin de recalculer uniquement si une valeur change donc là ce que je fais dès lors qu'il y a une valeur de invoice line qui change donc qui correspond à minor blocks je recalcule le total et donc au final ça nous donne un bloc facture très très simple mais qui fonctionne correctement si on change les quantités etc tout fonctionne nickel on pourra aller au-delà évidemment on pourra ajouter des contrôles pour définir si c'est une option si c'est s'il y a des réductions s'il y a des réductions à partir d'un certain nombre de quantités etc on pourrait le relier à un custom post type produit pour les produits récurrents si par exemple je vends de la maintenance régulièrement c'est ça rien de retaper tout le temps on crée un custom post type produit on va le chercher puis on affiche les informations ici on pourrait générer des PDF à la volée évidemment on pourrait définir un template à la création d'un bloc fin d'un post facture par exemple pour avoir directement tous les blocs prédéfinis qui sont renseignés par exemple on pourra avoir directement le bloc client haut le bloc contenu et après le bloc condition générale demande par exemple et on pourrait aussi avoir un bouton qui permet de transformer directement le deviant facture mais ça après c'est du represse plus classique c'est tout pour moi si vous voulez créer vos blocs je vous conseille vivement la formation de maxime qui est organisateur aujourd'hui sur capitaine wp.io l'agent stand-up et la créé un blog l'agent stand-up a créé un petit blog qui ressemble toutes les bonnes pratiques glutenberg qui est vraiment très bien fait qui permet de comprendre un petit peu comment ça fonctionne et d'aller le plus loin possible il y a le cours de zack gordon aussi qui fait tout ce qu'est js pour voir presse qui est hyper intéressant c'est une mine d'or en anglais par contre il y a la documentation même si elle est encore un complète je trouve sa temps à s'améliorer et le talk de vincent juste avant pour commencer à créer vos blocs donc le seul conseil que je peux vous donner c'est penser à décomposer au maximum plus on décompose plus on peut réutiliser mais en fait si on crée un bloc par plug-in c'est ultra simple après les reutilisés dans les différenciaux pensez évolutif des fois juste avec des noirs blocs on peut faire quelque chose de très facile et en fait wordpress glutenberg et peu importe on peut mettre le nom qu'on veut ça reste que des outils et si on sait à peu près les apprendre correctement on peut faire des choses fantastiques avec voilà