 Bonjour à tous, merci d'être là, c'est voilà, je suis très content d'être là, je suis très content qu'il y ait autant de monde aujourd'hui, ça fait vraiment plaisir. Alors aujourd'hui, on va faire quelque chose de très simple, le but du jeu c'est d'apprendre à créer votre premier bloc pour le nouvel éditeur de WordPress, d'accord ? Donc on est sur du développement javascript, mais vraiment un truc très très très simple, l'idée c'est de comprendre ce qui se passe dans l'éditeur, d'accord ? Alors pour me présenter rapidement, donc moi je m'appelle Vincent Dubbrek, je suis développeur WordPress en freelance, je suis formateur, orateur quand c'est possible, je suis auteur du vpkbookbook, merci pour le petit pitch d'avant de la collègue, alors donc les objectifs aujourd'hui, c'est vraiment créer un bloc hyper simple, d'accord ? Je ne vais pas vous mentir, c'est bidon, c'est un truc que vous pouvez faire avec des blocs patterns, d'accord ? Mais l'idée c'est de comprendre comment ça marche, donc on va vraiment partir sur un truc complètement simple, complètement bidon, le but voilà c'est vraiment de comprendre le fonctionnement de l'anatomie d'un bloc, d'accord ? Et aussi ce que j'aimerais c'est que vous ayez envie d'essayer, c'est-à-dire qu'une fois que la confet est terminée, vous rentrez chez vous, vous vous dites ah bah ouais, en fait c'est pas si compliqué, je vais essayer de faire un truc etc etc, donc c'est vraiment ça le but du jeu, c'est que vous ayez envie que vous vous dites ok, en fait ça marche comme ça, ok c'est pas si compliqué et go, je vais tenter mes petits bricolages, d'accord ? Donc c'est vraiment ça le but du jeu, pour cette présentation, il y a un petit dépôt GitHub qui est disponible à l'adresse là, dans lequel vous allez trouver ces slides là, donc avec tous les snippets, et vous allez trouver aussi le code du bloc, un petit peu plus avancé, parce que là on n'a que 40 minutes, d'ailleurs je n'ai pas mis mon chrono, on n'a que 40 minutes, du coup on va aller un petit peu vite et on n'aura peut-être pas fini à la fin, d'accord ? Donc moi je donne envie de vraiment à aller sur le bépot, à prendre les slides, vous allez voir tout ce qui se passe, vous avez le code commenté, vous regardez un petit peu ce qui se passe dans le code commenté, d'accord ? Pour voir ce qu'on n'a pas pu voir aujourd'hui. Et la documentation, parce que la documentation, pour la documentation officielle, elle est quand même très bien faite, il y a des bons tutos, il y a la documentation de tous les composants qu'on va utiliser aujourd'hui, donc c'est vraiment, voilà, c'est vraiment les deux ressources principales, ce qu'on va faire aujourd'hui est la documentation. Alors créer un bloc, c'est assez simple en fait, parce que Wordpress, il met à notre disposition tous les outils dont on a besoin. Donc sur votre installation locale de Wordpress, dans un terminal, vous allez simplement ouvrir votre dossier plugin, vous ouvrez un terminal, vous allez dans votre dossier plugin et vous tapez cette petite commande npx createBlog, d'accord ? Je vais vous expliquer ce que ça fait, on va le faire en live. Donc là je suis sur un site locale de Wordpress, d'accord ? Donc c'est mon installation locale, j'utilise local by flywing mais bon, peu importe l'outil, je vais dans app, public, content, plugins, vous voyez là, c'est à peu près lisible, peu près, un peu petit peut-être, j'essaie de jouer un peu, c'est pas ouf mais bon. Et donc là on va ouvrir un terminal dans ce dossier, dans le dossier des extensions, donc là je vais clic droit, ouvrir dans un terminal et là, donc je vais copier coller la commande npx createBlog, d'accord ? Et vous lui passez le nom de votre blog. Ce que ça fait, c'est que ça va télécharger, exécuter un petit script et le petit script il génère le plugin pour vous. Donc le petit script il génère l'extension, l'extension déclare un blog, d'accord ? Un blog plus ou moins vide mais ça déclare un truc. Donc là ça va télécharger sur l'oblifigé de faire que ça va aller. Donc vous voyez ça a créé un, vous voyez sur la première ligne, createNewWorldPressPlugin, donc ça crée un plugin, ça crée un fichier blog.json, on va parler après, ça crée le package.json, on va parler un petit peu après. Et après c'est un style WordPress Script, donc WordPress Script c'est un outil qui nous permet de compiler automatiquement notre blog. Donc on a vraiment zéro config à faire, on n'a rien à faire, ça va tout seul. Donc là il faut attendre un petit peu, alors dépêche toi internet s'il te plaît. Tout à l'heure ça marchait très très bien, donc c'est pour ça, je me suis dit c'est bon ça va aller, non. Ah si c'est bon là, si ça a été de clignoté ça veut dire qu'il fait autre chose, il est passé sur une autre tâche, on y est. Bon c'est l'histoire de quelques secondes, normalement ça prend jamais des minutes, ça écrit que ça va prendre quelques minutes mais c'est rare que ça prenne des minutes. Bah ouais mais ouais. Sinon je vais essayer de le refaire là-dessus. Si jamais ça plante, j'essaie de le refaire sur mon téléphone. Je vais me mettre en 4G, ça ne sera plus point d'accès mobile. Ah non c'est bon, ok c'est bon. Donc voilà et voilà là ça a compilé le blog, ça a tout installé, ça a déjà compilé le blog. D'accord, donc moi ce que je vais faire c'est que je vais aller dans mon dossier. Voilà mon super blog et je vais ouvrir ça dans l'éditeur de code. Voilà donc là j'ai mon extension, donc vous voyez si vous voulez je vous la montre dans le dossier normal, ce sera peut-être plus clair. Là vous voyez, myosomeblog c'est ici, d'accord et si je vais dans l'admin de WordPress, je l'ai déjà ouverte ici, si je vais dans l'admin de WordPress donc c'est une installe viergeant, il n'y a rien dessus. Je vous allez dans plugin et vous avez déjà le petit blog qui est ici, ok. Alors voilà donc là c'est bon, on a déjà notre blog. Alors au niveau de l'architecture pour un blog, pour ce que fait CreateBlog c'est assez simple, on a simplement un fichier PHP avec le nom du plugin et ce fichier PHP c'est le fichier racine de l'extension, ça déclare le blog tout simplement, d'accord. On a un petit package d'art JSON qui contient les dépendances JavaScript, donc ça on en prend rapidement tout à l'heure, on a un dossier source avec les fichiers source, un dossier build avec les dossiers de destination, d'accord. Ceux-ci c'est simple que ça. Vous vous travaillez uniquement dans le fichier source et le petit script que WordPress nous fournit, il compile tout ça et il vous met tout ça dans le dossier de destination. C'est le dossier de destination, le build qui est chargé par WordPress, d'accord, donc vous vous vous vous vraiment il n'y a rien à faire, c'est vous vous occupez uniquement de vos fichiers source. Alors le fichier.php, alors le fichier.php, tout ce qui fait c'est de charger le blog à partir de blog.json et le fichier blog.json il est dans le dossier build, vous voyez c'est ce qui se passe ici. Vous avez un add action init, donc sur init, vous savez un petit peu comment ça fonctionne les où de WordPress, j'espère. Quand WordPress déclenche le hook init, donc quand il est initialisé, ça fait simplement un register block type et ça enregistre le blog. D'accord, et les données du blog, elles sont contenues dans le fichier blog.json. Donc vous voyez là, bon là c'est sur la slide, si on va là dans le code, vous avez la même chose, ensemble blog, vous avez le l'entête du plug-in normal et en dessous, vous avez simplement le register block type. Ok, si on va voir le blog.json, alors le blog.json, c'est le fichier, le plus important, c'est la carte d'identité de votre blog. Dans le blog.json, vous allez déclarer toutes les données utiles, tous les fonctionnalités du blog, son nom, sa version, etc. D'accord, donc tout ça, ça déclarait là, on va y revenir plusieurs fois dans blog.json. Dans blog.json, ce qui a aussi l'intérêt, c'est qu'il y a le texte domain, il y a le editor script, donc c'est le script qui est chargé dans l'éditeur. Vous avez le editor style, c'est les styles qui sont chargés dans l'éditeur. Et vous avez les styles, ça c'est les fichiers qui sont chargés, fichiers de style, pardon, qui sont chargés à la fois dans l'éditeur et sur le devant du site. Alors, ça c'est bon, on en a parlé. Blog.json, je vais un petit peu n'en parler, je vais vous montrer. D'accord, ça contient toutes les métadonnées nécessaires pour déclarer le blog. Le nom, les attributs, donc les attributs, c'est extrêmement important, on va en parler après, c'est les données du blog, tout simplement. Les supports, les styles de blog, les variations, on met tout ça dans blog.json. Tout ce qui est déclaration, on met ça dans blog.json. Alors pour commencer, pour commencer à surveiller les fichiers source, on fait npm start, tout simplement. Donc je reviens dans mon extension ici, j'ouvre un terminal, je fais npm start, d'accord. Et tout ce que ça fait, en fait, c'est qu'on a un petit script ici dans le package.json. On a un petit script ici, vp script. Et c'est un outil mis à disposition par WordPress, par l'équipe de WordPress. Et cet outil, il va compiler automatiquement ce qui se passe dans source. Donc là, en fait, en faisant npm start, j'exécute ce script-là, vp script start. Et vp script s'occupe de compiler mon bloc et de le surveiller. Donc là, vous voyez, là, j'ai la tâche qui tourne en fond. Si je fais des modifications dans mon bloc, on va les voir automatiquement. D'accord ? Donc regardez, je vous montre vite fait. On va dans source, on va dans blog.json. Et on change, par exemple, la description. On va un peu apporter. On change la description. Si je sauvegarde, ça recompile mon bloc. Et mon bloc, il est ici, blog.json. Et vous voyez, le blog.json, il a changé, d'accord. Alors du coup, notre bloc. On va créer une page pour aller mettre notre bloc, pour voir ce que ça donne. Alors on va faire une nouvelle, test, peu importe. Et on l'a là tout de suite. Vous voyez, notre bloc, il est déclaré, il n'y a pas de problème. On l'a là. Il est là, le premier, on a marié un somme-broc avec le petit smiley. Ok ? Donc le petit smiley, pareil, le titre, le titre, le smiley, les icônes, tout ça. Tout ça, c'est les trucs que vous gérez dans blog.json. Donc là, on ne va pas s'occuper des icônes, d'accord, on n'a pas le temps. Mais voilà, c'est ça l'idée. Vous pouvez tout mettre dans blog.json, tout est par un métrable. Donc là, je vous montre mon bloc. Et vous voyez ce que ça fait ? C'est magnifique. Ça affiche une phrase, bonjour, depuis l'éditeur. Vous sauvegardez, on publish, vous allez voir en front. Vous allez voir en front et en front, vous avez, bonjour, du contenu sauvegardé en base. D'accord ? Donc là, pour le moment, notre bloc est complètement bidon. Il ne fait rien du tout. Donc nous, on va travailler sur cette base là. Mais vous avez, on a déjà un bloc fonctionnel qui est déclaré et on a zéro config à faire. Ça, c'est super. C'est les outils qui sont mis à disposition par l'équipe de WordPress. D'accord ? On n'a pas besoin de s'occuper de config, en fait. Donc ça, c'est vraiment cool. Alors, quand vous avez fini votre blog, vous pouvez faire un petit NPM run build et ça va bilder pour la production, d'accord ? Ça va minifier, etc. Et ça, vous pouvez livrer chez le client ou sur votre site. Alors index, index.js. Donc quand on va dans les dossiers source, on a un fichier qui s'appelle index.js. C'est le point d'entrée. C'est à partir de là que tout commence, d'accord ? Et si on regarde un petit peu ce qui se passe dans les index.js, donc là, je vous l'ai mis sur la gauche, on y aura regardé en vrai après. En fait, le fichier ne fait pas grand-chose. Tout ce qu'il fait, c'est il fait register block type. Donc il utilise une fonction pour enregistrer et il passe un edit and save à notre bloc. Il passe uniquement un objet avec deux trucs dedans, edit, save. Edit, c'est simplement la fonction qui est responsable de l'affichage dans l'éditeur. Donc edit, c'est votre interface dans l'éditeur. Et save, c'est la fonction qui va renvoyer ce qui est sauvegardé en base de données. D'accord ? Donc du coup, c'est ce qui va être affiché en front. C'est une façon de voir. On peut dire, ok, edit, c'est tout ce qui se passe dans l'éditeur. Save, c'est tout ce qui se passe en base de données. Donc c'est ce qui va être affiché en front. Ok ? C'est tout. Et après, évidemment, elle les importe. On a les petits imports en haut. Import, edit. Donc ça, ça va prendre la fonction edit qui est exportée dans le fichier edit.js. On fait pareil pour save. Import, importe les métadattas, ça peut être utile parce que comme ça, on a le bloc de Jason sous le coude. D'accord ? Et voilà. Mais en gros, le index.js, il fait rien. Il déclare edit, il déclare save, terminé. Ok ? Si vous voulez le voir en voyage, je vous montre ici. C'est la même chose. Donc là, index, il y a juste des commentaires en plus. Ce qui est pas mal aussi. Au niveau intérêt pédagogique, je veux dire que vous avez aussi les commentaires. Moi, je les ai laissés. C'est parce que je trouve ça pratique. Puis pour vous aussi. Donc voilà. Register bloc type, edit, save, terminé. Il n'y a rien d'autre. Alors. Ah ouais, on a deux fichiers style aussi. On a style.sys. Donc c'est des fichiers SASS. Style.sys.sys, c'est les fichiers, c'est les styles qui sont appliqués sur le devant du site et dans l'éditeur. Et edit.sys.s, c'est simplement les fichiers qui sont appliqués uniquement dans l'éditeur. D'accord. Donc vous avez deux fichiers styles différents. En gros, en général, on travaille dans style. Mais des fois, on peut avoir besoin d'un affichage particulier sur l'éditeur. À ce moment-là, on va faire les petits ajustements dans l'éditeur.sys.s. Et on se débrouille comme ça. Et VPScript s'occupe automatiquement de lire les fichiers, d'extraire la feuille CSS, etc., etc. Donc encore une fois, un zéro conflit. Vous n'avez rien à faire. Vous avez juste à travailler dans les fichiers qui vous sont fournis, en fait, qui vous sont mis en place. Note bloc. Notre bloc, il est génial. Je vous l'avais dit que ça allait être vraiment bidon. Donc on a un bloc texte, un bloc image à gauche. C'est un bloc témoignage tout simple avec une photo et un bout de texte. Donc on a un petit champ image à gauche. Et à droite, on a deux petits champs textes. Un champ pour une citation et un champ pour une source. D'accord ? D'accord, c'est quelque chose que vous pouvez faire avec des blocs patterns. Vous n'avez absolument pas besoin de développer un bloc pour faire ça. Mais voilà, c'est pédagogiquement pour l'exemple. Donc au niveau de la structure HTML, on va avoir un truc tout simple. On va simplement avoir une bloc quote avec la classe. On va avoir une div avec l'image et une div avec le contenu. Paragraphe citation terminée. D'accord ? C'est vraiment quelque chose de très, très simple. Alors les attributs. Donc là, c'est vraiment le truc le plus important. Si vous comprenez ça, c'est bon. Vous avez compris 50, 60, 80 % de ce qu'il faut pour construire un bloc. Les attributs, qu'est-ce que c'est ? Ça correspond aux données du bloc. À la fois son contenu mais aussi ses réglages. D'accord ? Quand vous allez mettre vos champs textes, vos champs textes, les données, elles vont être sauvegardées dans les attributs. Quand vous allez mettre vos réglages, vos réglages vont être sauvegardées dans les attributs. D'accord ? Donc les attributs, c'est ça. C'est les données du bloc. Et donc dans edit, ce qu'on doit faire, c'est qu'on doit fournir l'interface pour modifier ses attributs. On doit fournir les champs textes qui vont modifier les attributs, fournir le champ image qui va modifier l'attribut image. D'accord ? Donc là, on a une fonction edit. Cette fonction, elle reçoit un certain nombre de prompts. Alors je veux peut-être vous la montrer en vrai, ça sera mieux. Oui, j'ai le temps. Si je viens ici, je viens d'un edit.js. Donc pareil, la fonction, pour l'instant, elle ne fait pas grand-chose. Vous voyez ce qu'elle fait ? Alors on voit le paragraphe qu'on a vu tout à l'heure avec le petit message qui dit bonjour du côté de l'éditeur. D'accord ? Donc pour l'instant, ça, c'est ce qu'on a dans le truc. Et cette fonction, en fait, elle reçoit des prompts. C'est dommage que c'est caché par défaut, mais voilà. Elle reçoit des prompts. Et dans ces prompts, d'ailleurs, je vais vous montrer ça après. Donc je vais rajouter un petit console log. Si j'écris correctement, ça va aller mieux. Console log prompts. D'accord ? Comme ça, vous pourrez voir vraiment ce qu'il y a dedans. Je reviens un petit peu sur ma slide. Donc là, vous avez des prompts. Mais ce qui nous intéresse dans ces prompts, il y a plein d'informations mais ce qui nous intéresse le plus, c'est Attributes et Sad Attributes. Donc dans la deuxième ligne avec le const, on va simplement extraire. Ça, c'est une petite syntax d'un descripteur particulier pour dire qu'on extrait Attributes et Sad Attributes. D'accord ? Attributes, c'est vos attributs. C'est les données de votre bloc. Et Sad Attributes, c'est la fonction qui permet de les modifier. C'est aussi simple que ça. C'est la fonction qui permet d'enregistrer les attributs des blocs. Ok ? Ensuite, vous avez le Return parce qu'on doit renvoyer un composant. Et dans ce Return, vous avez la Block Quote comme on a vu tout à l'heure avec la syntax HTML. On reprendait notre syntax notre HTML. Donc on a le Block Quote. Alors Use Block Props, c'est un petit outil qui est fourni par WordPress. C'est une petite fonction qui faut importer de blocs editants. Et cette fonction, elle nous fournit tous les attributs nécessaires pour le bloc. Parce qu'on va aller voir sur le... Il y a plein d'attributs, en fait. Il y a l'ID, il y a plein d'attributs qui sont nécessaires pour l'Editor pour qu'ils s'y retrouvent. Et ils sont gérés automatiquement avec ces 3 petits points Use Block Props. Donc, encore une fois, 0 configs, on n'a rien à faire. Tout est fait. Donc du coup, je reviens un petit peu. Donc Edit, c'est l'interface pour modifier ces attributs. Donc, dans Edit, on va répliquer la structure HTML du bloc et on va mettre un champ image et des champs texte pour nos sources et nos... notre contenu. D'accord ? C'est ça la structure HTML. Donc là, je vais la reprendre. Je vais la reprendre ici. Paf. Je vais prendre ça. Tac. Je vais faire ça. Et on va même rajouter un petit console log attributes. Et comme ça, vous allez voir un petit peu ce qui se passe. Attributes. Donc, je sauvegarde. Si je ne vais pas faire d'erreur, je vais rafraîchir, ça va marcher tout de suite. On va ouvrir la console. Ça va l'aigneur. Donc dans les outils de développement, hop, vous ouvrez la console. Je vais faire un petit plus, plus. Et vous voyez, on a object, object, object. C'est mes petits consoles log. Donc le premier object, c'est les props. Donc vous voyez, dans les props, il y a plein de trucs. Il y a le client ID, il y a le contexte, il y a plein, plein, plein de trucs. Mais nous, tout ce qu'on veut, c'est les attributs, attributes et set attributes. Et là, vous voyez, je fais un console log OK. Je vais peut-être, j'ai pas rafraîché la page. Je vais peut-être rafraîcher la page comme ça, vous allez... Ah bah non, si, c'est bon. On a notre magnifique blog pour l'instant. D'accord? Avec notre champ image, qu'on va faire, et nos champs textes qu'on va faire après. OK. Alors, je reviens ici, que je n'oublie rien. Alors, attributs et blocks.json. C'est très important pour fonctionner correctement vos attributs. Il faut que l'éditeur est courant que votre blog utilise des attributs. Et donc, du coup, il faut les déclarer dans le blog d'adjacent. Donc, c'est simplement une entrée à rajouter dans le blog d'adjacent avec attributes. D'accord? Donc, nous, on va avoir 3 attributs. Il y a 3 champs dans notre blog. Il y a un champ contenu, un champ source et un champ image. D'accord? Donc, le champ contenu, il est de type string, chaîne de caractère. Par défaut, c'est vide. Notre champ source, pareil, string, vide par défaut. Et notre image, ça va être un objet parce qu'on va devoir prendre l'URL, et mettre ça dans un objet. D'accord? Qui sera vide pour le par défaut. Donc, je vais prendre ma déclaration. Je vais la mettre dans blog d'adjacent. Donc, dans le source, on travaille toujours dans le source. Si vous faites une modification dans votre dossier build, elle va être écrasée. D'accord? Et je vais rajouter ici attributes. Je reviens sur mon site. Je rafraîchis. Et là, vous voyez, mon petit console log attributs, il me donne les attributs. Il me donne les attributs avec les valeurs par défaut vide. D'accord? Donc là, ça veut dire que Wordpress, il est au courant. OK. Ce bloc utilise tel tel tel attribut. D'accord? Donc là, maintenant, le but du jeu, c'est de faire nos champs textes qui vont modifier les attributs. Pour les champs textes, on va simplement utiliser un composant qui existe déjà dans Wordpress. C'est le composant rich texte. Le composant rich texte, c'est simplement le bloc paragraph. Le bloc paragraph, c'est un petit peu plus compliqué que ça, il n'y a pas de l'importer. Et ensuite, je vais copier-coller et je vais vous expliquer ça tout de suite. Donc là, on va dans edit et à la place de mon champ texte, je mets pouf, mon petit rich texte. Là, si je sauvegarde, je vais avoir un erreur parce que j'ai oublié de l'importer. D'accord? Il ne faut pas oublier à chaque fois que vous utilisez un composant, il faut l'importer. Donc le rich texte, il vient de bloc à l'éteint. Donc on peut simplement sauvegarde. Je reviens là. En théorie, ça devrait marcher si je n'ai pas fait de bêtises. Mais c'est le problème des démo en live. Je vais rafraîchir et vous voyez, ça marche. Donc là, vous voyez, j'ai mon champ texte. Je ne sais pas si vous voyez bien, mais en fait, vous avez le playsolder. C'est super génial. D'accord? Et du coup, là, je peux mettre le curseur dedans, commencer à taper et vous voyez. Et c'est bien sauvegarder à droite. Je ne vous ai pas encore expliqué donc je reviens sur mon truc. D'accord? Je reviens sur mon rich texte. D'accord? Alors le rich texte, je lui passe une value. La value, c'est l'attribut correspondant au contenu. C'est bien, j'ai noté les commentaires. J'ai juste à lire mes commentaires. D'accord? Vous lui passez simplement la valeur par défaut. Votre bloc, quand il apparaît dans l'éditeur, ou après, il faut lui donner la valeur qu'il doit afficher par défaut. D'accord? Sinon, à chaque fois vous allez rafraîchir la page, vous allez revenir sur un éditeur vide. Donc, il faut lui passer une value. Donc là, on lui passe la valeur de notre champ. Vous avez vu, on a déclaré dans le bloc dans le JSON, on a déclaré un attribut content. D'accord? Donc là, on va chercher attributes.content. Donc on lui dit voilà, la valeur par défaut, c'est attributes.content. Je lui passe multiligne vrai, parce que je veux que ça fasse, quand on a pu se rentrer, je veux que ça fasse des paragraphes. Donc on lui passe multiligne. Le playsolder, c'est super génial. On l'a vu, c'est une chaîne de caractère. D'accord? Et un change, un change, une fonction qui est déclenché à chaque fois que vous tapez des trucs dans l'éditeur. Dans le champ plutôt, dans le champ texte. D'accord? Alors, celle-là je vais vouloir faire. D'accord? Parce que c'est peut-être un peu... Donc c'est une fonction. D'accord? C'est une fonction. Cette fonction, elle prend une valeur. C'est ce qu'il y a, le texte qu'il y a dans l'éditeur. Ok? Quand vous cliquez dans l'éditeur, vous tapez bonjour, là c'est bonjour. La valeur c'est bonjour. C'est bonjour avec de l'HTML, bonjour. Et donc cette fonction, ce qu'il faut qu'on fasse, c'est qu'on sauvegarde la valeur dans les attributs. Et pour ça on utilise setAttributes. Tout simplement. Vous voyez? On l'a pris là, le setAttributes dans la ligne au-dessus. On prend le setAttributes et on modifie les attributs du bloc. Tout simplement. Donc là notre fonction elle doit faire un setAttributes. SetAttributes. Donc cet attribute c'est une fonction. Cette fonction, elle prend un objet. Et c'est un objet qu'on va fusionner avec nos attributs. Donc en gros, nous tout ce qu'on va faire c'est qu'on va lui passer juste la clé, un objet avec la clé content pour dire vas-y, tu me fusionnes content. Tu me fusionnes cet objet-là, content, avec les attributs existants. Et ça va écraser la valeur qui est dans les attributs. La valeur de content qui est dans les attributs. D'accord? Du coup là, on va utiliser un petit raccourci j'avais à script. Ma variable en fait, je vais l'appeler content. Comme ça, ça fait content. Deux points content. Clé, valeur. Et du coup, il y a encore un raccourci j'avais à script qu'on peut faire. Quand la clé et la valeur sont le même nom, on peut supprimer. D'accord? Il y a encore un raccourci qu'on peut faire. C'est quand il n'y a qu'un seul param, on peut toujours dégager les parenthèses. Ça, c'est pas nécessaire. Là, j'ai fait une fonction flèche, machin machin. Vous pouvez même faire une fonction normale, ça passe. Il n'y a pas de problème. D'accord? Si vous n'êtes pas familiers avec ces syntax là. Parce que c'est vraiment ce que vous allez retrouver dans le corps de WordPress, dans tous les plugins, dans toutes les extensions qui déclarent des blocs. Vous allez trouver ces syntax là un petit peu plus avant. D'accord? Sinon, ça marche à l'ancienne avec function, bla bla bla. Function parenthèse parenthèse, brace brace, ça marche. Ça va? Vous avez compris un petit peu là? Ça va? C'est clair? On a les attributs d'un côté. On a 7 attributes et on utilise 7 attributes tout simplement pour sauvegarder nos attributs. Donc là, du coup, je reviens ici. Je rafraîchis. Ah ouais, alors si j'enregistre pas, ça ne va pas aller. J'update. Je rafraîchis. Normalement, voilà, notre bloc apparaît. Il a déjà son contenu et vous voyez ici dans l'attribut content, on a bien le paragraphe avec hello. Donc notre texte est bien sauvegardé. Ok? On fait la même chose en 10 secondes pour le bloc pour la source. Donc rich texte, je prends. Je copie quand l'en dessous. D'accord? Alors, le rich texte ici, on va s'occuper de la source. Donc la source, je l'ai appelée source. Multiline. Non, non, non. Je veux une ligne simple. Unchange. Alors du coup, unchange, c'est... On va changer la source. On ne va pas réécrire sur le même attribut. Si on se trompe d'attributs, ça ne va pas aller. Et le playsolder, on va mettre source. D'accord? Hop, je sauvegarde. Je reviens ici. Je rafraîchis. Donc là, j'ai source. Et je mets mon nom, tac. Et mon nom, vous voyez, il est bien sauvegardé dans les attributs ici. Dans le console. Dans le console, là, on voit bien les attributs. D'accord? Je fais update. Je rafraîchis. Et normalement, on a toujours notre valeur par défaut si j'ai pas fait d'erreur. Bon, on est bon. Ok? Alors, save. On n'a pas encore... On n'a pas encore touché à save. Save, c'est... Ça doit renvoyer un composant qui correspond à l'HTML qu'on va sauvegarder en base de données. D'accord? Donc tout ce qu'on doit faire dans save, en fait, c'est utiliser nos attributs pour créer notre rendu. Notre rendu en front, en fait. On a HTML. D'accord? C'est tout simple, un save. D'accord? Donc là, regardez, je vais le copier-coller. Vous voulez voir, ça va aller très vite. Hop, je copie-colle. Tac. Je reviens dans save. Et dans save.js. Donc là, j'ai la petite phrase qu'on avait tout à l'heure. Attendez, que je n'oublie pas. Ok, c'est bon. Donc ça, je supprime. Donc j'ai mon blog quote. J'ai mon champ image qu'on n'a pas encore fait. J'ai un truc qui va pas attribute content, reach text.content, function save props. Alors, pourquoi je suis en capital? Props. Props. Je vais y arriver. J'ai pas apporté le reach text de blog editor. Donc là, ça va pas marcher. Attends. Oui, tu l'as vu, quelqu'un a vu l'erreur, là. Dev class name content. Il y a une brace entre autres. Ok. Donc il y a une erreur sur le slide. Je vais essayer de corriger ça dans la journée. Donc, ce qu'on fait dans save, on prend les props. D'accord. C'est pareil. Il reçoit les props du blog aussi. Les propriétés, avec vous savez, avec l'ID, etc. Il reçoit ça aussi. On va prendre les attributs. Parce que nous, tout ce qu'on veut, c'est les attributs pour pouvoir faire l'HTML derrière. Donc props. On prend les attributs. On utilise useBlogCrops.save pour mettre tous les attributs, la classe CSS, etc. etc. C'est généré automatiquement par WordPress. On n'a rien à faire. D'accord. Notre champ image, pour l'instant, on va laisser un playsolder. Et dans content, vous voyez, on met reachText.content. Et on a la valeur. La valeur, c'est l'attribut content. D'accord. Et pour la source, c'est pareil. Je lui passe un tagname, d'ailleurs que je n'ai pas fait dans edit, je lui passe un tagname pour dire le contenu qui y a dans ce bloc, dans ce composant, pardon, au lieu de me le mettre dans des paragraphs, tu me le mets dans une balise HTML site. D'accord. Donc on peut lui passer un tagname pour dire au reachText, tout ce qu'il y a là-dedans, tu me le mets dans tel tag. Ok. Si je me suis pas trompé, on devrait être bon. Alors je surveille ma montre, parce qu'on va peut-être devoir accélérer un moment. Donc du coup, je vais vous montrer les snippettes et je vais commenter, mais je pourrais plus vous montrer la démo. Bah voilà, boom. Alors oui, ça c'est normal, parce que ma fonction... de la HTML, ça ne correspond plus, vu que j'ai changé save. Là, ça ne correspond plus à la Wordpress, ils ne reconnaient pas le bloc, mais c'est pas ça que je suis censé avoir. Donc du coup, on met bloc recovery, normalement ça passe. Donc bloc recovery, update. Et là, là, j'ai sauvegardé en base vraiment ce qu'il y a dans ce qu'il y a dans mon save en fait. Donc je rafraîchis. Et là, si je rafraîchis la page, voilà. Vous voyez, là j'ai mon bloc qui commence à prendre forme tout doucement. Ok. Alors, l'image. On va faire l'image rapidement, mais là, honnêtement, si vous avez compris, edit, save, attribute, cet attribute, vous avez déjà fait un énorme pas et vous pouvez déjà commencer à bricoler vos trucs. D'accord. Vous pouvez déjà commencer à développer des blocs. Alors, pour l'image, on va utiliser le composant media playsolder. Donc c'est un composant qui existe déjà dans Wordpress. C'est l'interface du bloc image. D'accord. On va faire simple. Donc c'est vraiment l'interface, la même interface que le bloc image. C'est vraiment important, sinon ça ne va pas marcher. On lui met un onSelect. Donc onSelect, c'est la fonction qui est déclenchée. Quand on clique sur le bouton, quand on a choisi l'image, et qu'on clique sur le bouton validé. Dès qu'on a choisi l'image, en fait. Donc c'est dans ce onSelect, là, on lui passe une fonction, onSelectImage. Et si vous regardez en dessous, dans le onSelectImage, c'est là où je fais mon cet attribute et que je sauvegarde la valeur de mon image. Donc là, dans mon image, je récupère son ID, je récupère son texte alternatif pour la source, c'est-à-dire l'URL, l'URL vers l'image. Alors j'essaye d'abord de la récupérer dans media, sizes, thumbnails. Donc j'essaye d'abord de récupérer la taille 150 par 150, la thumbnail par défaut de WordPress. J'essaye d'abord de récupérer ça là. Sinon, je prends l'URL source. Ouais. Merci. Alors, on va copier-coller, d'accord? Je copie-colle. Je vous invite vraiment à consulter la documentation, à essayer de modifier les paramètres. Vous avez les slides, on speed un petit peu. Alors, mon champ image. Alors, si j'y arrive, voilà. Là, j'ai mis mon media playsolder. D'accord? Donc là, pour l'instant, il faut que je prenne ma unsalact image, sinon ça ne va pas marcher. Donc là, unsalact image. Pareil, c'est une fonction. C'est une fonction. Le composant, il lui passe le media. Regardez, je vais faire un petit console log media, comme ça, vous allez voir tout ce qu'il y a dedans. Console log media. Excusez-moi. Il y a un truc important? Il faut l'importer. Ouais, il faut l'importer. Oui, sinon, ça ne va pas marcher. Alors, si je ne dis pas de bêtises, il vient de bloquer des temps aussi. Donc, il est là. Je l'importe ici. Media playsolder. J'ai importé le media. J'ai mis ça. J'ai ma callback. On est bon. On est bon. Je sauvegarde. Je reviens sur mon blog. Je rafraîchis la page. Et vous voyez, paf. Alors, c'est pareil. Le media playsolder, il a plein de paramètres. Donc là, on peut lui passer un type pour dire que je ne veux que des images. Dans la bibliothèque, tu ne me montres pas les fichiers. Tu ne me montres que les images. Et le unselect, voilà. C'est là-dedans qu'on fait le set attributes. Ok? Donc, du coup, ça donne ça. Donc, je peux faire what? It means your library. Je vais dans ma media. Et j'ai ma superbe image. D'accord? Je fais select. Et vous voyez, le console log, là, il s'est passé des trucs. Piff. Je viens là. Non, ce n'est pas celui-là. C'est mon console log media. D'accord? Vous voyez un petit peu? Donc, vous voyez, il y a plein de trucs. Donc, dès que j'ai cliqué sur le bouton sélectionner l'image, ma fonction de rappel, elle s'est déclenchée. Il y a le petit console log et ça sauvegarde l'attribut. Et le petit console log, donc du coup, vous voyez, il y en a plein d'infos sur l'image. Il y en a plein d'infos. Donc moi, j'essaie de récupérer. Alors, je me souviens plus que j'essaie de récupérer. J'essaie de récupérer l'ID, l'ALT, les dents, sizes, thumbnail, et j'essaie de prendre cette URL-là. Ok? Quand on a le console log, c'est quand même pratique parce qu'on peut vraiment voir tout ce qu'il y a dedans et après, on va chercher ce qu'on veut. Donc là, c'est ça l'intérêt. Donc là, je sauvegarde. Si je vais dans mes attributs, vous voyez mes attributs, tout est sauvegardé. Il n'y a pas de problème. Tout est sauvegardé. J'ai pris mes infos que je voulais. Seulement, là, je rafraîchais la page. Ça m'affiche encore le playsolder. D'accord? Donc, si j'ai l'image, tu m'affiches l'image. Si je n'ai pas l'image, tu m'affiches le playsolder pour que je puisse mettre une image. D'accord? Donc, du coup, ça, hop. Alors ça, c'est le edit. Blah, blah, blah. Oui. Alors c'est ce que je suis en train de vous expliquer. Donc ça, c'est notre edit. On est dans un return. On doit renvoyer un composant. On est dans un return. Dans un return, on ne peut pas faire de if. On ne peut pas faire de logique. D'accord? Donc, ce qu'on utilise, c'est qu'on utilise des expressions JavaScript, qui sont professionnelles. D'accord? Donc là, ce qu'on dit en fait, c'est qu'on fait, OK, si tu as attributes.image.id, affiches-moi l'image. Sinon, affiches-moi le media playsolder. D'accord? Et quand on a une image, en fait, ce que je fais, c'est que je fais une petite dieu. Je mets mon image dans laquelle j'étale mes attributs. Donc c'est ma source, je ne sais plus ce que j'ai récupéré. Ma source, le texte alternatif et l'ID. J'étale tout ça. D'accord? J'étale tout ça dans les attributs. Et après, et le bouton, il permet de défacer l'image. Vous voyez ce que je veux dire? Il faut aussi penser à ça. Il y a une image, si je veux changer l'image, je fais comment? Donc il faut mettre un bouton pour supprimer l'image. Le bouton, vous voyez, un clic, il fait un delete image. Et si vous regardez un delete image, qu'est-ce que ça fait? Ça fait un set attribute et ça remet l'image. Ah, ça va là par défaut nul. C'est tout. OK? C'est bon? Alors je prends le un delete image. En fait, je vais tout prendre. Non, le select, déjà, là il me faut ces deux lignes-là. Hop. Alors que... En speed. En speed, on l'a fait. Je sais plus ce que j'ai pris. Edit. J'ai pris le image attribute. Donc là, on est là. Donc je vais faire ça. Image attribute. Un delete image. Donc je vais l'apprendre, la copie est collée, paf, paf. Donc là, j'ai ma fonction et là, j'ai mon petit terner. Alors, pas quand il faut que je fasse attention donc là. Voilà. Si on a une image, on m'endive avec un bouton et sinon, je prends mon media playsolder et je le mets là. Alors si j'ai pas fait d'erreurs sur mes slides, ça devrait marcher. Et si ça marche pas, on va débugger et on a le temps. Alors je rafraîchis. Bam! Button is not defined. Ça vous l'aurez des dizaines de fois. Des dizaines, des centaines de fois. J'utilise un composant button qui évidemment, j'ai oublié n'importe. Donc d'accord. Donc j'ai oublié le petit truc. Alors button, si je dis pas de bêtises. Ah, je l'ai pas mis. J'ai pas mis le petit... Alors button, il faut l'importer. Donc on va faire importe. Button. Et button c'est de at WordPress slash components. Si je dis pas de bêtises, on fait une prière. On fait une prière, on va rafraîcher la page. Et voilà. Alors et vous voyez, donc là j'ai ma superbe image et j'ai un bouton. Alors il est pas beau le bouton. Pareil, j'ai pris le composant button de WordPress, mais je ne l'ai pas passé les paramètres. Je ne l'ai pas fait de style. Là, là, là, on n'aura pas le temps de faire de style. D'accord? Donc là, voilà. J'ai mis le bouton en vrac comme ça. Et si vous cliquez dessus, ça remet simplement l'attribut image à object-vide. Touc! Voilà. Et du coup, notre playsolder, il s'affiche. C'est facile, hein? Ok? Je sauvegarde. Je sauvegarde. Je reviens sur le devant du site. Bah non, on n'a pas encore touché à save, donc il n'y a rien qui aura bougé. Alors pour save. Alors pareil, on a le temps. Ouais, on a le temps large. Alors pour save. Donc dans l'éditeur. Ah oui, donc là, voilà. C'est pour ceux qui ne pouvaient pas suivre la démo. J'ai mis une petite ce qui se passe dans l'éditeur. Alors là, sur l'exemple, il y a déjà les styles de fait évidemment. C'est pas joli. On n'est pas encore là, mais voilà. Dans save, j'ai oublié une slide sur save. C'est trop bien. Alors dans save, du coup, ce qu'il faut faire c'est qu'il faut afficher notre image. D'accord? Là, maintenant, notre image elle est bien sauvegarde dans nos attributs. Ce qu'il faut, c'est qu'on affiche notre image ici. MGR. Donc là, on va remplacer ça. D'accord? Et pareil, on va utiliser une astuce JavaScript. On va dire, ok, si tu as une image, alors tu m'affiches. Pardon. Tu m'affiches mon image. On utilise un et logique. D'accord? On est dans un... Ah ouais, non, je peux pas. Voilà. On est dans un return. On peut pas faire de logique, mais on peut évaluer des expressions JavaScript. Du coup, on fait une expression. On fait un et logique. Pour évaluer le et, oui, c'est un et. Pour évaluer le et, on essaye d'abord d'évaluer ce qu'il y a à gauche. Si c'est faux, on sort. Si c'est faux, on essaye même pas d'évaluer ce qu'il y a à droite. Par contre, si c'est vrai, s'il y a un ID, on va l'évaluer à droite. Et en évaluant ce qu'il y a à droite, il l'affiche. Donc on fait un et logique et ça permet de faire un affichage conditionnel. Donc image. Et là, je vais passer source. Donc l'attribut source de mon image, ça va être attributes.image.src.brl. Je ne sais plus comment je l'appelais. Dot dot dot. Dot dot dot. Ouais, c'est source. Dot src. Alors. Donc je rafraîchis. Donc là, vu que j'ai modifié, voilà, vu que j'ai modifié un fonction save, il me dit, non mais save, ça ne correspond plus. Pas de problème. Ça va correspondre. Je vais mettre une image. Si je n'ai pas fait de bêtises, ça devrait marcher. Save. Select. Update. Je reviens là. Je rafraîchis. J'ai une 404. Qu'est-ce que source... Oh là là là là. Alors, ça ne marche pas parce que j'ai passé ça comme une chaîne de caractère. Du coup, il me met la chaîne de caractère. C'est pas ça qu'il faut faire. Ici, il faut évaluer ce qu'il y a. Donc il faut faire une petite expression JavaScript. D'accord? Donc ici, c'est pas déguimer qu'il faut passer ces braises pour dire au JavaScript. Évalue-moi ça. D'accord? Sinon, il me met comme chaîne de caractère. Donc là, voilà. Ça, c'est pareil. C'est une erreur que malheureusement je fais régulièrement. Et vous la ferez aussi. Donc edit. Alors hop. Donc voilà. Donc j'ai toujours l'erreur qui me dit, mais ça ne correspond pas. Hop. Save. Je refresh. Et là, j'ai mon image. Ok? D'accord? 5? 10? 2? Ok. Bon, bon. Alors concrètement, alors je vous invite vraiment à regarder les slides parce qu'après, là, concrètement, si vous avez compris comment ça fonctionne, attributes et attributes, que vous avez compris, edit, save, comment ça marche, la petite danse. Si vous avez compris que quand j'utilise un attribut, il faut que je fasse attention que je le déclare dans blog.json, etc., si vous avez compris tout ça, honnêtement, vous avez compris 80% de ce qu'il faut pour commencer à développer vos premiers blocs. D'accord? Après, je vous invite à regarder les slides. Dans les slides, je vous explique un petit peu comment ça fonctionne les supports. C'est-à-dire, vous savez, pour toutes les fonctionnalités de base de WordPress, la typographie, les tailles de polys, etc., etc. Ça se déclare dans blog.json. Terminé, ça marche. D'accord? Les styles, comment déclarez des styles différents de blocs? Les variations, j'explique un petit peu comment faire tout le bar. C'est pareil, c'est des composants que WordPress fournit, suffit de les utiliser. Faut juste faire attention à gérer vos attributs vous-mêmes. Le composant, en lui-même, il donne le bouton et vous, dans le bouton, vous devez lui passer le petit on-change et faire votre cet attributs vous-mêmes. Vous devez gérer les attributs vous-mêmes. D'accord? Mais sinon, tout le reste, WordPress, il nous fournit énormément de composants. Je vous invite à aller voir dans la documentation. Ça va tout seul. Vous ouvrez un inspector controls, panel, panel body, et dans votre panel body, vous mettez des contrôles. Et tout ça, c'est des composants qui existent déjà dans WordPress. Il y a le toggle control qui va créer un petit toggle. Il y a le texte control qui va créer un petit chant texte, etc. Mais c'est à vous de faire manuellement la petite sauvegarde des attributs, le petit set attributes. D'accord? Voilà, donc c'était pas mal. Merci beaucoup pour votre présence. Merci Vincent. Merci beaucoup. Je vous rappelle juste le petit lien. D'accord? Je vous rappelle juste le petit lien pour le GitHub. Vous allez vérifier ça. Si vous avez des questions, vous pouvez m'envoyer des mails. Il n'y a pas de problème. D'accord? Et merci beaucoup. Si on réponse, s'il y a des questions, on en a encore quelques minutes. Profitez-en. Oui. Désolé. Ah je me dis... Ah bah non, du coup, il faut que je reste au pupitre. Alors je vous écoute. Ah... Oui. Oui. Oui. Bon, bonjour. Non. Oui, je suis là. Oui, bonjour. C'est des blogs, on peut les réutiliser dans Elementor ou pas? Sans me faire... Alors, je suis absolument pas un expert en Elementor. Je... Alors là, c'est des blogs pour le nouvel éditeur. Après, est-ce que Elementor propose de mettre un bloc de l'éditeur normal dans C-widget à lui? Honnêtement, je ne sais pas. D'accord. Je... Je ne connais pas du tout Elementor. D'accord. Je suis désolé. D'accord. Merci beaucoup. C'est pas... Moi, j'avais une question. J'ai... C'est quand même assez compliqué et verbeux, beaucoup de textes pour juste faire un petit bloc, tout ça. Oui. Moi, j'ai découvert, il n'y a pas très longtemps que le thème.json pour créer des thèmes aujourd'hui dans WordPress, c'était assez intéressant. Oui. Avec déclarations de settings, de composants, etc. Oui. Est-ce que le thème.json demain permettra de créer des composants, peut-être sans écrire des idées de l'essai et de l'héritage ? Ça, ça va être compliqué, je pense. Ok. Par contre, tout ce qui est réglage, si je ne dis pas de bêtises, presque tout ce qui est dans le bloc dans JSON, tu peux le mettre... Le mettre au niveau du thème. Ouais, tu peux le mettre au niveau du thème dans ton film, dans JSON. Et du coup, ça surcharge un peu les réglages du bloc par défaut. Ok. Et du coup, c'est quand même déjà pratique, parce que tu peux tout centraliser dans ton thème. Et est-ce que ça, ce que tu nous as montré, c'est stable, c'est état, c'est quoi ? Non, ça, c'est stable. Ok. Ouais, ça, il n'y a pas de problème. Ok. Ça, il n'y a pas de problème. Merci. On va prendre une dernière question. Bonjour, merci. Comme beaucoup d'entre nous, j'ai commencé avec ACF. ACF permet aussi de faire des blocs. Oui. Quel est le grand avantage de cette façon-ci par rapport au bloc ACF classique ? Alors, le bloc ACF, si je ne dis pas de bêtises, il fait un... il fait un rendu en PHP, un truc comme ça. Donc, il y a... un petit côté requête, tout ça. C'est du PHP. Là, c'est de l'HTML sauvé en dur. Donc, c'est de l'HTML sauvé en dur. Parfait, il est rendu sur le front. Alors, du coup, l'avantage, c'est que c'est statique. Le désavantage, c'est que c'est statique. Non, mais voilà. Un rendu ACF, par exemple, si je ne dis pas de bêtises, c'est une callback PHP. Donc, du coup, dans ta callback PHP, si tu la modifies, tes thèmes en front, ils vont changer... tes thèmes, pardon. Tes blocs sur le devant du site, techniquement. D'accord ? Alors qu'avec un bloc qui a une fonction save et la fonction save qui sauvegarde de l'HTML, ça ne va pas marcher comme ça. Il faut que tu modifies ton save. Après, il faut que tu hailles sur les pages où tu as utilisé ton bloc, etc. Donc, il y a vraiment des avantages, des inconvénients à faire votre bloc avec ACF, à sauvegarder votre contenu comme moi, là, j'ai fait en statique, comme fait la majorité des blocs du corps, et la callback PHP. Donc, la callback PHP, ça offre une certaine souplesse, il y a une petite danse PHP. Voilà. Ça marche bien aussi ACF. Ça marche pas mal. Merci beaucoup Vincent. Merci à vous. Merci à vous.