 Ouais on a des petits problèmes techniques pour préparer le workshop mais en fait avant de commencer si vous voulez je peux répondre aux questions sur Glutenberg en attendant de commencer le workshop. Donc si vous avez des questions en attendant qu'on soit prêt voilà. Est-ce que après l'intégration dans le corps il est prévu des fonctions de base pour indiquer au plugin ou au thème la présence ou pas de Glutenberg s'il est activé par des coups. Par exemple, on plaitise Glutenberg active ou tout comme ça. C'est une bonne question, je ne sais pas mais je pense que tu peux checker la présence de n'importe quel plugin mais après le plugin Glutenberg n'existe pas. Oui mais ça sera plus en un plugin c'est pour ça. Voilà il existera dans le corps donc il sera toujours là. Oui mais après est-ce qu'il est active sur la page de l'article ou il sera toujours active par défaut donc c'est au plugin qui désactive à mon avis de fournir. Ah ça c'est dans l'option. Après il y a des fonctions pour savoir s'il y a un article écrit avec Glutenberg ou pas. Ça ça existait. Vous avez d'autres questions ? Oui on va le voir dans cet atelier mais on peut faire une white list comme on peut faire une black list c'est un peu comme on veut c'est à dire qu'on peut dire j'autorise ça comme on peut dire je n'autorise pas ça donc si tu autorises une certaine liste voilà que cette liste. Pour le SEO il n'y a rien qui est différent de l'éditeur actuel mais par contre ce qui est important dans Glutenberg c'est qu'on a des blocs qui génèrent un HTML qui est bien formaté pour être SEO friendly et aussi cette notion de bloc qui rajoute de la sémantique à l'article ce qui va permettre à des plugins de savoir exactement ce qu'il y a dans l'article et du coup de proposer des options SEO un peu plus avancées. Si on regarde le nombre de contributeurs total il y a bien une cent cinquante contributeurs ou quelque chose comme ça après ce qui travaille en tout le temps sur Glutenberg on doit être peut-être je dirais une dizaine et six d'automatiques en fait je vais directement commencer à développer en attendant que ça arrive on va créer un nouveau dossier en fait j'ai un dossier de plugins oubliant les autres fichiers qu'il y a dans plugin actuellement on va juste commencer avec un dossier vide d'un plugin je vais créer un dossier on va faire ES5 parce que ça sera du code ES5 je crée un nouveau fichier je vais l'appeler index.js c'est bon là on va essayer directement de créer un bloc finalement dans l'automatique on va voir que c'est pas si compliqué Glutenberg met à disposition de nombreuses variations globales qu'on peut utiliser pour enregistrer de nouveaux blocs donc la fonction principale c'est wp.blocks.registerBlockType il faut lui donner un nom à ce bloc là en fait j'ai attaqué direct par la création de blocs parce que le bloc c'est la principale manière d'étendre Glutenberg en finale et d'étendre WordPress en général dans quelques années donc on va créer des blocs et après je par la suite je vais vous montrer d'autres manières d'étendre Glutenberg un peu plus avancé notamment grâce à mon repository. Alors pour enregistrer un bloc il faut lui donner un nom à ce bloc et on a une convention il faut plutôt faire quelque chose comme ça myplugin slash mon bloc que je vais appeler notice et là je vais faire welcome paris donc ça c'est le nom de mon bloc finalement et maintenant je vais définir quelques options donc quand je fais des accolades comme ça c'est un objet javascript standard et là on va définir des différentes options qui vont nous permettre de manipuler le bloc de l'afficher etc vous va commencer par lui donner un titre ma super notice des informations un peu génériques comme la catégorie il ya une il ya une liste de catégories disponibles dans Glutenberg on peut choisir lundel moi je vais faire comment et je choisis une icône pour mon bloc pour quand il s'affiche dans l'inserteur on voit l'icône en question alors qu'est ce que je vais prendre comme icône on va faire info on va voir si info ça marche on verra et donc ça c'est des informations génériques de mon bloc et il ya deux fonctions importantes dans bloc c'est la fonction edit c'est une fonction qui va recevoir des props je vais vous expliquer ça et une fonction save là j'ai des slides en fait que je peux pas vous montrer mais non qu'est ce qu'un bloc ça permettra de comprendre le code que je vais écrire plus facilement donc c'est comme ça que fonctionne un bloc finalement donc on a le contenu html de notre de notre post de notre page c'est le post content c'est ce contenu il est parcé et on construit des objets une liste d'objets c'est chaque objet correspond à un bloc et qu'est ce qui définit un bloc il a un nom il a des attributs les attributs c'est toutes les informations modifiable au sein de ce bloc il a un flag qui dit si le bloc est valide ou pas pas très important pour le moment et il a un identifiant unique donc une fois que le contenu est parcé on a une liste de blocs comme ça et après ces objets là on va les afficher dans le dom donc c'est la méthode render il va on va juste les afficher ça va donner la représentation visuelle du bloc et une fois qu'on modifie l'utilisateur modifie fait des interactions avec cette cette visualisation du bloc l'objet du bloc il est mis à jour donc il y a une sorte de cycle au moment on affiche le bloc on fait des interactions l'objet il est mis à jour et lorsqu'on finit d'écrire son article on va l'enregistrer donc au moment de enregistrer l'article on va prendre la liste d'objets qu'on a la liste de blocs et on va la sauvegarder en tant qu'HTML donc en fait la donnée principale qu'on manipule lorsqu'on crée un bloc ou lorsqu'on édite un bloc c'est finalement un objet JavaScript assez simple qui correspond aux attributs des blocs on va le voir donc c'est juste une intro rapide au fonctionnement de blocs et on va voir plus en détail il faut avoir ça en tête au fait lorsqu'on crée un bloc et ça nous permettra de créer plus facilement donc il y a des questions à se poser au moment de vouloir créer un bloc donc quel est le markup le html de mon bloc qu'est ce que je veux générer comme html avec mon bloc une fois je réponds à cette question ça va me permettre de remplir la save function de qu'on va voir juste après d'autres questions importantes à se poser c'est quelles sont les parties modifiables par exemple si je peux modifier le contenu du cgm div par exemple si je peux modifier le contenu du div ben ça ça va être un attribut si je peux modifier la classe ça va être un autre attribut si je peux rajouter une image par exemple le source de l'image c'est un attribut donc toutes les parties modifiées à du bloc c'est des attributs et la troisième question c'est comment représenter ce bloc dans l'éditeur ça va nous permettre de créer la edit function bon je vais vous parler alors donc là je cherche le lien en fait vers le plug-in mais il n'est pas là c'est pas grave maintenant on va revenir au code on a ces questions là voilà ces questions là en tête on revient au code qu'on crée donc la première des choses que je vous disais c'est quel est le markup qui va générer par notre bloc donc moi l'exemple qu'on va prendre c'est qu'on va afficher une notice qui veut être genre une notice d'erreur une notice d'information une notice d'avertissement donc ce qu'on va faire c'est un return et là je vais utiliser quelque chose que je vais définir ici l'e l égale élément point create element donc ça c'est une fonction qui va nous permettre de créer des divs des markup des divs des images tout ce qu'on veut tout le html qu'on veut donc elle est assez simple première valeur c'est ce qu'on veut créer moi je veux un diff deuxième valeur si je veux lui rajouter des attributs des classes des id des trucs comme ça on va commencer avec rien du tout et la troisième valeur c'est le contenu du livre pour le moment je vais mettre du contenu statique le contenu de la notice la edit function c'est ça c'est le save c'est ce qui va être enregistré dans le html maintenant je vais m'occuper de ce qui va être affiché au niveau de l'éditeur alors en général c'est très proche du save au début donc ce que je vais prendre et je prends de la même chose que j'ai écrit dans le save je le mets dans edit qui va me permettre d'afficher la même chose au niveau de l'éditeur et au niveau du front lorsque je sauvegarde mon bloc donc je vais prendre ce bout de gs que j'ai écrit qui est finalement pas très compliqué on va essayer d'ouvrir goût under j'espère qu'il est bien installé voilà j'ai le content j'ai ouvert la console mais ça a caché le moment je passe plus tôt comme ça en fait je vais coller juste le gs que j'ai écrit je vais le coller directement ici dans la console ce qui va se passer c'est que gluten blog va rajouter ce bloc en fait il est disponible ici il cherche notice maintenant ma super notice bah il est là je l'insère et voilà j'ai directement ce que le div que j'ai créé avec contenu de la notice maintenant on va pousser le truc un peu plus loin qu'est ce que je veux faire finalement je veux modifier le contenu de cette notice je vais pas écrire contenu de la notice en dur pour cela il nous faut déclarer un attribut vous voyez bien le code attribute on va déclarer un attribut on va l'appeler contenu ça sera un type array je vais vous expliquer après pourquoi c'est un tableau allez on va faire un petit peu on va faire simple on va faire un petit truc pour commencer ouais mais je vais faire mais c'est une bonne idée je vais faire un c'est une chaîne de caractère finalement le contenu et où est ce qu'il est le contenu on va faire un source html et je peux donner un sélecteur donc div ça veut dire que je vais définir un attribut qui est contenu qui est de type chaîne de caractère et c'est le html du sélecteur div c'est à dire que dans la safe function j'ai un div son contenu son inner html ça va être la valeur qui va stocker dans cet attribut contenu donc au moment du parsing ce cet attribut va être rempli avec la valeur du contenu maintenant comment on modifie ça et comment sauvegarde le nouvel attribut donc je vais modifier un peu ma safe function je vais rajouter ce qu'on appelle les propres les propres c'est des propriétés finalement à la safe function qui contient plein d'informations que Gutenberg met à notre disposition par exemple si je veux récupérer un attribut de mon bloc courant je fais une variable il gale propres point attribute point contenu donc là j'ai récupéré mon attribut et je vais le mettre directement ici donc au lieu d'avoir du contenu en dieu maintenant je vais avoir du contenu qui va évoluer que l'utilisateur pourra rentrer du même on n'a pas encore défini comment l'utilisateur va rentrer le contenu ça ça va se passer dans la fonction edit maintenant dans la fonction edit au lieu d'avoir du contenu on dure comme ça contenu de la notice on a différents composants que Gutenberg met à disposition qui vont nous permettre de rajouter ce type de truc qu'on fait assez souvent finalement là un composant que je vais utiliser je vais juste le déclarer plus haut comme ça c'est plus simple à utiliser c'est plain texte il est disponible ici point plain texte et donc maintenant à l'intérieur de ce div je peux afficher d'autres composants c'est à dire en fait cette fonction el qu'on utilisait tout à l'heure elle est un peu recursive c'est à dire le contenu d'un div il peut être d'autres éléments on va continuer donc je vais rajouter un plain texte par contre celui là il a des propriétés à définir c'est à dire que la valeur du plain texte c'est un composant qui va nous permettre de modifier une valeur donc il faut lui donner cette valeur il faut lui dire qu'est ce que tu fais en change quand cette valeur un modifier qu'est ce qui se passe donc la propre value c'est pour lui dire quel valeur il va modifier donc il va modifier pareil que j'ai fait là je vais le refaire ici et là donc la valeur actuelle qui est affichée dans plain texte et contenu et en change c'est qu'est ce qui se passe pour ce que cette valeur est changée donc là je vais faire une fonction je reçois la nouvelle valeur contenu un peu de franglais et j'ai une autre propriété une autre fonction qui est mise à disposition par guttember qui s'appelle set attributes qui va nous permettre de modifier les attributs donc là je vais faire je vais créer un event handler au fait je vais le faire plus haut changer le contenu donc si je reçois une nouvelle valeur c'est une fonction new contenu qu'est ce que je fais avec cette nouvelle valeur je lui dis drop point 7 attribute modifie moi l'attribut contenu et tu mets dans tu mets cette nouvelle valeur new contenu et du coup ce event handler je peux le mettre directement dans mon plain texte voilà on est à peu près prêt je pense donc là on a notre contenu qui s'affiche à partir de l'attribut et au niveau de edit function j'ai un composant qui va me permettre d'éditer cette valeur et contre je change cette valeur je modifie la valeur de mon attribut voilà ça c'est les flèches que je vous ai montré au départ dans le schéma alors je prends ce code s'actualise la page de guttember parce que j'ai déjà le le même bloc donc il faut pas que je l'étrage et je mets je colle mon code ici un expected identifier quelqu'un vu l'erreur il manque un verre voilà c'est bon donc là si je vais rajouter ma notice super notice voilà elle est vide et je peux taper du texte dedans ma super notice si j'enregistre maintenant mon article et je peux aller au mode code je peux voir directement ma super notice qui est là ça c'est ce que j'avais fait tout à l'heure c'est le html a été généré et guttember génère une classe unique à partir du nom de du bloc automatiquement pour permettre au thème de styler ces blocs s'ils le veulent je reviens à mon éditeur visuel ça je dirais genre j'enregistre maintenant ce qu'on va faire c'est ok je peux aller voir déjà d'ailleurs ce que ça donne en résultat donc voilà ma super notice que j'ai tapé on va rajouter une autre option maintenant vous avez vu quand j'ai utilisé plein texte ça veut dire que le contenu ma notice peut être que du texte ça peut pas du html avec des balles de strong et italique des trucs comme ça donc si je veux utiliser une texte formaté il faudra au lieu d'utiliser plein texte faudra que j'utilise un autre composant qui est mis à notre disposition par guttember qui s'appelle rich texte donc il s'utilise quasiment de la même manière juste de remplacer plein texte par rich texte ça à la différence c'est que la valeur de rich texte c'est pas une chaîne de caractère c'est un tableau parce que ça correspond en fait à un arbre d'éléments donc vous n'utilisez un tableau et la source c'est pas le html mais c'est une source spéciale qu'on appelle children qui va construire ce tableau au moment du parti à part ça tout le reste normalement ne change pas je reprends mon code maintenant s'actualise ma page j'ouvre ma console je colle mon texte et voilà donc maintenant si je rajoute ma super notice il n'y a rien qui a changé mais ça c'est du html si je fais par exemple quelque chose comme ça ça crée du code si je fais alors maintenant par contre on n'a pas de barre d'outils qui va nous dire comment rajouter du gras de l'italie que je veux dire comme ça finalement ça c'est assez facile la barre d'outils au fait il faut l'afficher que quand le bloc est sélectionné pour pas pour pas polluer l'éditeur donc on a une information qui nous dit si le bloc est sélectionné ou pas il est pas actuel mais directement il s'électe et il faut rajouter ce juste paramètre au rich tech pour lui dire quand est-ce qu'il va afficher la barre d'outils ou pas maintenant si je prends ce code et je le remets ici je rajoute ma notice comme toujours ça n'a pas fonctionner ah si parce que je suis en mode mobile bon l'écran il est un peu petit donc en mode mobile la barre d'outils elle est mais je pense au fait non c'est pas de mode mobile c'est tout ça donc en fait la barre d'outils on a le choix d'engoute un bar on peut ou bien l'afficher à côté du bloc ou bien l'afficher figé en haut si on est plus habitué à tiny mce ou de trucs comme ça ou la barre d'outils finalement elle est toujours en haut donc là pour le je l'ai affiché à côté du bloc plus simple donc là par exemple je peux faire ça en gras ça c'est la différence entre rich tech et plain tech une autre option de personnalisation que je peux rajouter c'est on va utiliser l'inspecteur maintenant on a vu comment rajouter les formatages de la barre d'outils je peux rajouter en fait d'autres options ici par exemple on va pouvoir choisir si on choisissait si c'est une erreur ou un avartissement et ou un info et on va rajouter une classe spéciale dépendant de ce attribut là bas en fait on a besoin d'un autre attribut qui est le type de la notice pareil c'est un type chaîne de caractère par contre celui là je vais pas lui mettre de sources quand je mets pas de sources ça veut dire qu'il sera enregistré dans les méta informations de bloc une sorte de commentaire que je vais vous montrer tout à l'heure et pour afficher quelque chose dans l'inspecteur il y a un élément qui est aussi mis à disposition par gouttembert qui s'appelle inspecter control et pour modifier les inspecteurs contrôle on a aussi plein d'élément tout prêt on n'est pas obligé d'utiliser ces éléments que je vous montre mais c'est pour vous simplifier la vie sans déjà tout près au lieu de faire du réacte pur ou vous allez voir comment créer des sélectes etc vous pouvez utiliser ces trucs qui sont déjà mis à disposition par gouttembert par exemple le select control c'est pour faire une select box assez rapidement par contre je crois que celui là il est dans content donc ce que je vais faire et que je vais rajouter finalement ici dans le contenu de mon biv je peux rajouter à n'importe quel niveau au fait parce que ça n'a pas d'impact mon inspecteur contrôle il n'a pas d'option et il contient le select control il a quelques options qu'on va remplir et il n'a pas de contenu alors les options je vous avoue que je ne les ai pas en tête comme ça mais on va les retrouver assez rapidement je vais vous expliquer ce que c'est donc un label pour mon contrôle c'est le type de nos types par exemple type de nos types ok et en fait vu que j'utilisais jsx dans l'autre il faut que je modifie légèrement comment j'écris mes options ici voilà donc la valeur en fait c'est le type et le type il vient d'où du coup c'est le nouvel attribut qu'on a créé prop.attribute.tip et on peut choisir parmi ces différents types défaults venger warming success je vais les laisser tel quel et quand on change le type il faut qu'on change l'attribut donc on va créer un event handler comment on a fait tout à l'heure pour le contenu et je vais l'appeler changer type je crois que je vais changer type donc new type c'est pareil donc lorsque le type est changé j'appelle cette fonction et ça va changer l'attribut type je pense que je suis bon ah oui non là on n'est pas obligé ici on n'a pas besoin de ça et là aussi on n'a pas besoin de ça donc là on a rajouté au fait cette partie là c'est comment on va modifier ce type avec l'inspecteur contrôle maintenant il faut qu'on fasse ce qu'on va faire avec ce type au niveau de l'affichage final de ma notice donc finalement ça va rajouter une classe name on va faire une classe name donc je récupère mon type point attribute point type et je vais rajouter une classe à mon div dépendant de la valeur de ce type là donc classe name c'est par exemple notice viré et je rajoute le type voilà je vais lui rajouter une valeur par défaut je crois que j'avais mis default et on devrait être bon on va essayer la console on colle notre bloc voilà pas de pas d'erreur merci à tout ma super notice je peux toujours faire du texte comme je veux et là je peux modifier ça fait rien pour le moment mais je peux modifier le type de la notice et ce que ça fait c'est que on va voir l'éditeur de code et en fait ça a généré une classe ici on voit notice danger on pourra styler différemment et dans le éditeur et au niveau de l'affichage 31 combien de temps il nous reste juste pour savoir 15 alors on pourrait je pourrais vous montrer comment rajouter les styles mais je préfère parcourir le code parce que sinon ça prendra trop de temps et après je vous montre où est-ce qu'ils sont disponibles tous ces bout de code donc on était à peu près à ce niveau là le bout de code que je vous montre maintenant il est très proche de ce que j'ai écrit sauf que il est fait en us 6 quelques petites différences au niveau de la syntaxe mais rien de bien compliqué on voit bien que j'ai mon rich texte ici j'ai un plain texte pour un sub sub message dans mon exemple en fait j'ai deux blocs que je peux une de l'input finalement dans le même bloc et si mon bloc est sélectionné j'applique l'inspecteur contrôle qu'on vient de créer avec les différents types et et chose que j'ai rajouté ici c'est que j'importe un style bon cette syntaxe elle a l'air un peu peut-être difficile si vous connaissez pas os 6 web packs tout ce truc là mais en fait c'est juste pour dire ben en fait ça c'est le style de mon bloc je peux les je j'aurais pu l'écrire facilement dans un fichier point css tanda et on y jusqu'à présent quand on a recréé le bloc en fait on rajoutait dans la console bon c'est bien pour la démo mais lorsqu'on veut mettre le bloc disponible dans un plugin ou dans un fin dans l'installation wordpress il vaut mieux avoir un code PHP qui va charger tout le temps ce bloc c'est java strip et le style qui va avec donc là je vais vous montrer comment on fait ça donc dans l'exemple ici c'est l'exemple 3 à 20 j'enregistre un script donc ça c'est une fonction wordpress classique où je lui dis j'ai un script mon javascript il est disponible à cette adresse de mon plugin et je vais utiliser finalement ces trois scripts qui sont déjà disponibles c'est les dépendants sont déjà disponibles dans wordpress vous avez remarqué que j'utilisais wvp.blocks, wvp.element, wvp.component ça c'est des scripts que Gutenberg met à disposition qu'il faut rajouter en dépendance associé et je vais enregistrer un style donc je vais lui dire j'ai un fichier de style à cet endroit là et c'est tout et j'enregistre mon bloc au niveau du PHP je lui dis à bain voilà mon bloc il s'appelle comme ça je répète le même nom que j'avais mis dans le js sans script c'est ce script là c'est le même nom en fait qui est là c'est la même chose c'est l'identification du script et le style de mon bloc c'est ce style là et j'appelle cette fonction au moment de limite un hook pour pour ajouter ça donc c'est tout ce que j'ai besoin pour finalement bootstrapper mon pour mettre à disposition mon bloc au niveau de l'éditeur maintenant si je vais voir comment je l'ai nommé ce truc là je l'ai nommé advanced static bloc donc je pense que le plugin doit être activé on va vérifier j'active le plugin et là si je reviens dans Gutenberg j'actualise la page là je peux chercher voilà le moment advanced static bloc il est là et au fait c'est la même chose qu'on avait fait mais j'ai juste rajouté un peu de style et j'ai rajouté comme je vous ai dit deux inputs donc par exemple un message et un sous message ou quelque chose comme ça et si je vais dans l'inspecteur qu'on a fait tout à l'heure alors c'est là je modifie je mets danger là la couleur a le change selon la classe name qu'on a venu que j'ai un style qui va avec mon bloc maintenant et lorsque je prévisualise pareil on voit bien qu'il s'affiche correctement à ce niveau là alors passons à l'exemple suivant maintenant maintenant en fait c'est la deuxième partie du workshop au lieu de coder en direct je vais vous montrer différents exemples parce que sinon ça prendra trop de temps alors qu'est ce qu'on peut faire avec un bloc on peut faire un dynamic bloc c'est quoi la différence avec un bloc comme on a vu jusqu'à présent ce type de bloc l'affichage il est généré lorsqu'on affiche l'article dans le front-end il est généré dynamiquement c'est-à-dire que son contenu il évolue avec le temps on peut pas enregistrer le html statiquement dans le post-content donc qu'est ce qui est différent finalement au niveau du code pas grand chose à part que le save function il retourne nulle ça veut dire qu'on enregistre pas html au niveau du post-content ça va être fait au niveau du back-end au moment de l'affichage je vais vous montrer comment et au niveau du edit function ici je vais faire je vais simuler l'affichage du front-end vu que ça évolue avec le temps là je suis en train de créer un bloc qui fait au fait qu'il affiche le dernier article donc je fais un appel vers l'API là aussi j'utilise des trucs qui sont déjà disponibles qu'on peut utiliser dans wordpress je ne vais pas aller dans le détail maintenant mais en gros si on utilise ça ça va juste appeler cet API là vers l'API de wordpress et ça va nous donner le résultat dans la prop dans cette variable post et on pourra l'utiliser ici pour dire bah en fait c'est en train de charger maintenant c'est chargé voici le dernier article et voici sont rendus donc ça c'est au niveau de l'éditeur parce que je suis toujours dans la edit function du bloc la dernière partie qui reste pour cet exemple là vu que c'est un bloc dynamique il faut ajouter le code PHP qui génère cet affichage là au moment où on affiche notre bloc au niveau de du front-end donc c'est quelque chose de similaire qu'on avait enregistré le script tout à l'heure on avait vu qu'on avait enregistré le style on va rajouter une nouvelle fonction ici qui s'appelle render callback en fait c'est équivalent au save mais qui se passe au niveau du backend donc c'est aussi si vous connaissez les short codes c'est assez similaire c'est une fonction voilà donc c'est le render callback en fait c'est cette fonction là qui est définie ici elle va recevoir les attributs du bloc et moi je veux afficher le dernier article donc ce que je vais faire c'est que je vais utiliser les fonctions WordPress classiques WPE get written post qui va me récupérer les récents articles je veux que le dernier et j'affiche le div qui correspond à cet article là donc on peut faire la démo rapide de ce bloc là c'est 4 quelque chose dynamique bloc donc voilà j'ai une représentation au niveau de l'éditeur qui correspond à peu près à ce qu'il va être affiché au niveau du front-end par le PHP bon là ça ne marche pas trop je dois avoir un bug quelque part ou alors j'ai peut-être pas enregistré non je pense que c'est pas enregistré donc ça c'est pour le dynamique bloc je passe rapidement il y a les meta-blocks alors ça c'est pour le contenu structuré c'est à dire que certains développeurs de thème ou etc ils veulent pouvoir requitter des informations sans aller chercher dans le html c'est des choses qu'on faisait avec des plugins comme accf ou quand toujours avec des plugins comme accf ou un truc comme ça donc là on peut le faire directement avec un bloc on peut lui dire ben en fait la source de cet attribut cet attribut description je vais l'enregistrer dans meta meta ça veut dire que c'est un post meta et je vais le nommer short description donc ça veut dire que le save il retourne toujours nul c'est à dire que le contenu de mon bloc il va pas aller dans le post html mais il va être enregistré cet attribut va être enregistré en meta et au niveau du edit ça se passe toujours de la même manière ce que c'est juste d'appeler cet attribute comment faisait on modifie la valeur cet attribut et lorsqu'on modifie elle va être enregistrée en meta au niveau du backend il ya une petite subtilité à faire rien de bien compliqué juste dire ben en fait le meta que j'utilise il est disponible avec la rest api parce que vous utilisez la rest api et c'est tout je lui donne un string je dis que c'est une valeur unique donc maintenant en fait lorsque j'utilise le bloc ici je rajoute c'est 5, meta, meta avant j'ai mis 4, si je remplis la valeur finalement de cette description ici au niveau de mon html au niveau de mon html c'est le dernier dynamic block non meta bloc bon il ne s'est pas bien enregistré je sais pas pourquoi ah si si en fait il s'est bien enregistré on voit rien parce que c'est enregistré en post meta c'est pas au niveau du html par contre je reviens à l'éditeur visuel et j'actualise la page c'est toujours là c'est pas parti c'est récupérer automatiquement des méta et c'est rempli ici ça ça permet à une utilisation avancée où on veut utiliser des méta et les stylés un peu où les placer dans différents endroits dans des templates des trucs comme ça quelqu'un me demandait aussi tout à l'heure comment on contrôle la liste des blocs disponibles alors dans le plugin j'ai deux exemples j'ai une blacklist et une whitelist en fait une blacklist ça veut dire que je vais enlever des blocs une whitelist je vais autoriser que ces blocs là donc c'est assez facile on a une fonction qui s'appelle enregistre bloc type en fait quand je fais importe format stress blocs ça veut dire que je peux l'utiliser en tant que wbp.blox.enregistre bloc c'est la même chose il suffit juste d'appeler cette fonction là en lui passant le bloc que je veux désactiver finalement et donc moi ici par exemple je veux désactiver pullout et vers ça c'est des blocs qui sont disponibles par défaut dans l'automne bas et en fait si je joue ce script là il va les désactiver alors ils sont commentés en fait les deux scripts de remove mais on peut tester je désactive le bloc vers et pullout j'enregistre là si je serre vers en fait il est plus là par contre je remets je commande le script qui désactive vers voilà il est là donc la même chose avec une white list c'est à dire que au lieu de désactiver cette fois je vais autoriser donc là j'ai un tableau où j'ai quatre blocs je veux autoriser que ces quatre blocs dans mon éditeur pas d'autres blocs donc en fait ce que je fais c'est assez simple finalement c'est je parcours tous les blocs genre je supprime tous ceux qui sont pas dans ce list c'est aussi simple que ça bon je vais passer la démo de ça parce que voilà c'est pas très intéressant oui on peut charger par exemple ce script que pour un certain template de page ou des trucs comme ça c'est des choses qui sont général au niveau du PHP ou tu vas dire bah en fait c'est ici je suis en train de charger goot number pour telle page je charge ce script un exemple un peu plus avancé maintenant c'est extend the block c'est à dire on va prendre un bloc existant d'Angluttenberg et on va lui rajouter des fonctionnalités alors ça c'est un peu avancé en général c'est ça se fait avec un hook de la même manière qu'on a des hooks au niveau du backend là on a des filters au niveau du front end c'est similaire à peu près donc là mon hook il s'appelle register block type c'est à dire au moment de l'enregistrement d'un bloc bah je vais le modifier finalement je vais le modifier certains c'est j'attrapeux donc qu'est ce que fait ma fonction qui modifie les attributs c'est cette fonction là dans mon exemple ici je rajoute une caption c'est à dire un input à mon bloc de code j'ai un bloc de code par défaut d'Angluttenberg je vais lui rajouter une caption pour donner un titre par exemple à ce code ou un truc comme ça donc ce que je fais c'est que si si je suis en train si mon bloc c'est pas le code je fais rien si c'est le code je rajoute un nouvel attribut qui est caption comment on invite tout à l'heure en fait je reprends les attributs du bloc classique et je lui rajoute le nouvel attribut au niveau du edit function je lui dis et ben en fait je laisse le edit function tel quel était la edit function du bloc donc ça permet d'appeler l'edit function qui est déjà défini et je lui rajoute un nouveau rich texte pour éditer pour modifier ce nouvel attribut que je viens de créer la caption et au niveau du save ben en fait je laisse le save tel qu'il était mais je rajoute un autre div après ou pardon où je vais afficher la caption donc ça c'est un exemple que c'est pas très facile je vous avoue il faut bien connaître la création de blocs pour pouvoir arriver à ce résultat là mais ici à disposition vous pourrez vous pourrez voir et naviguer sur le code et voir comment c'est fait alors ça c'est encore très nouveau c'est un exemple que j'ai mis pour montrer comment peut étendre guttumbug autrement qu'avec des blocs c'est à dire qu'on fait maintenant peut-être avec des metabox pour affaire des sidebar donc là j'ai un exemple de sidebar plug-in en fait je pense que je pense que les fonctions de ce truc là ont changé dans guttumbug donc cette version là ça va sûrement pas marcher donc je vais viser de le faire par contre ça permet en fait si on regarde un guttumbug il y a cette sidebar là en fait les plug-in ils ont la possibilité d'enregistrer leur propre sidebar avec leur propre contenu image-tival dans mon exemple ici par exemple j'affiche le membre de blocs différents que j'utilise par exemple si j'utilise deux paragraphs et un titre je vais afficher un paragraph j'utilise deux fois un titre j'utilise une fois enfin on peut laisser livre cours à son imagination pour faire un peu tout ce qu'on veut voilà j'utilise un module qui s'appelle le data module actuellement lorsqu'on veut étendre l'éditeur tiny mce si on veut récupérer les données en live sur l'éditeur le contenu ou le titre ou des trucs comme ça finalement ce qu'on fait que les développeurs de plug-in font ils vont chercher en fait ces données dans le dom on veut dire ah ce texte a réala il contient le titre je vais récupérer sa valeur ça c'est pas très évolutif et c'est pas enfin voilà ça peut casser à tout moment alors ce qu'on a fait dans Gothenburg c'est que tous les données en fait les blocs le titre tout tout c'est disponible au niveau d'un module javascript qui s'appelle le data module et qui est assez simple à utiliser par exemple je veux récupérer je vais vous montrer en live le troisième je veux récupérer le titre je vais taper un titre ici je vais récupérer le titre de cet article dans un dans un plugin en fait si c'est de faire data sélect que je sélectionne de la donnée core editor je veux les données de l'éditeur et je pense que l'éditeur title pas sûr ou éditeur title ah oui en fait je peux faire ça et voir la liste d'études disponibles get edited post type get document et en fait ça édite post attribute en fait édite post attribute je veux le titre de de l'article et voilà ça me retourne test test je suis content get bloc count par exemple c'est le nombre de blocs j'en ai 7 dans mon article ça ça permet de faire des trucs assez évolués là aussi il faut laisser les livres de cours à son imagination un exemple par exemple un exemple rapide c'est on peut dire qu'il y a des plugins qui rajoutent des publicités dans dans represse et j'ai vu cet exemple il était intéressant on peut dire par exemple après chaque quatre blocs je rajoute automatiquement un bloc de publicité ou quelque chose comme ça je peux souscrire au fait à la modification de blocs je veux dire à chaque fois qu'il y a un nouveau bloc je regarde est-ce que c'est modulo 4 ou modulo 5 ben je rajoute mon bloc à ce endroit là enfin voilà on peut faire plein de trucs juste avec du JavaScript assez simple finalement juste en utilisant ce data module on récupère les données on peut savoir quand est-ce que les données elles changent avec le temps etc donc voilà alors tout ce que j'ai vu je vous démontrer ces différents exemples ils sont disponibles dans un repository qui est qui est qui était censé être dans mon slide mais voilà je n'ai pas envoyé les derniers slides à mat donc je vous démontrer voilà c'est celui là donc notez bien ce lien you get up you know react bouton blog extensibility workshop j'ai un petit rythmie en français pour expliquer comment est organisé ce plugin en fait ce fait ce repository c'est un plugin que vous pouvez installer et jouer avec modifier faire tout ce que vous voulez et là j'explique comment ces différentes étapes elle s'en fait etc il y a un autre truc aussi dans le plugin que j'ai pas eu le temps de montrer c'est le thème il y a un dossier de thème en fait c'est un thème tout basique mais qui montre ce qu'on peut faire avec les thèmes avec le thème c'est-à-dire qu'il va changer ce thème va activer des fonctions avancées de goûte un beurre qui sont par exemple le white alignment et il va définir une palette de couleurs bien précises pour le temps c'est-à-dire que quand on va choisir les couleurs dans un texte de paragraph etc on pourra pas choisir n'importe quelle couleur il y aura des couleurs définie par le thème il permet aussi d'en rajouter des styles au niveau de l'éditeur et au niveau du frontin c'est-à-dire qu'il rajoute des styles spécifiques à certains blocs et il fait la même chose au niveau de l'éditeur comme ça l'affichage au niveau de l'éditeur il correspond à l'affichage au niveau du frontin donc voilà c'est c'est vraiment j'ai essayé de mettre des commentaires dans le code donc vous essayez de naviguer dessus c'est vraiment tout lite mais c'est juste pour expliquer qu'est ce qu'on peut faire avec un thème sur du thème vert voilà