 Avec les Meetup WEP Paris, j'ai lancé une série d'ateliers consacrés au FSE de WordPress. C'est déjà la troisième édition. Récemment, je me suis demandé pourquoi je ne pourrais pas étendre cet apprentissage à une audience plus large grâce à YouTube. Ainsi est née cette série de live pour te faire découvrir ce changement majeur de WordPress avec le FSE ou Full-Site Editing. Moi, c'est Grégoire Noël et si tu ne me connais pas encore, sache que je suis dans le jeu des thèmes depuis plus de 15 ans. Avec ces live, je souhaite partager mon savoir-faire dans cette nouvelle ère de WordPress. Alors comment ça va se dérouler, c'est simple. 40 minutes pendant lesquelles je plonge en direct dans le monde du FSE suivi d'un créneau de questions-réponses pour éclaircir tes doutes. N'oublie pas de jeter un œil aux notes de la vidéo. Tu y trouveras des liens pour t'inscrire à mon prochain live en septembre et un sommaire complet pour te guider. Prêt, c'est parti ! Alors le FSE, c'est quoi ? C'est une logique où on va travailler sur les thèmes, on n'est pas obligé de coder et on va en direct créer ces modèles depuis le back-office. Et tous les blocs vont être intégrés dans les parties qui avant étaient réservés à ce qu'on appelle le contenu principal, ce qu'on a dans une page ou un article. Là avec le FSE, on intervient sur l'entête, sur le footer et on a la même logique que le templating de WordPress. Donc le templating de WordPress, ça ressemble à ça, je vais vous montrer. Alors vous connaissez tout ce modèle. Moi mes élèves, je demandais qu'ils l'affichent sur leurs frigos. C'était quelque chose qui était à Connet Parker. On ne verra pas ça en détail aujourd'hui. Mais en tout cas, sachez que le templating, c'est exactement le même dans un thème FSE. C'est la même chose qui est respectée. Là, l'idée, c'est qu'on va voir qu'il y a deux approches. Soit on travaille directement dans le back-office et on fait tout dans le back-office ou alors, et ça c'est plutôt ce que je recommande, on peut régulièrement enregistrer dans son thème tout ce qu'on a fait depuis le back-office. Et pour ça, il y a une petite extension qui est très pratique, qui s'appelle Create Block Thème, qui fait un peu office pour moi de versioning. C'est-à-dire que je vais faire tous mes changements dans le back-office. Je vais valider mes modèles et puis après, je vais actualiser mon thème. Donc il va être là, cette fois-ci, on dure. Et du coup, ça va valider et enregistrer en dure tout ce que j'ai fait dans le back-office. Là, ce qui est intéressant, c'est qu'à un moment, si on commence à faire des bêtises dans le back-office, à tout moment, on peut revenir en arrière. On verra qu'il y a un moyen très simple pour réinitialiser ce qu'on aurait fait dans le back-office. Donc là, je vous propose qu'on fasse un thème de zéro et puis qu'on commence à monter les réglages. Alors, ça va vraiment être une initiation. Mais après, je compte faire un live comme ça une fois par mois. Et puis, on va refaire un peu ce qu'on fait avec les meet-ups. Alors, c'est vrai que tout le monde ne peut pas venir à Paris pour les meet-ups. Donc, j'ai envie de faire ça un peu en parallèle. Mais avec le même esprit, c'est-à-dire que petit à petit, on va monter en compétences ensemble. Donc là, j'ai un site qui est déjà installé. Donc, ça, c'est 2023. Il faut savoir que quand vous avez un thème qui est FSE, il y a beaucoup plus d'options de design que ce qu'on trouve dans le thème de base. Vous avez quelques réglages FSE sur un thème qui ne serait pas entièrement avec des blocs. Mais dès que le FSE est activé, on a beaucoup plus d'options au niveau du design. Donc là, je vais partir dans le back-office. Je suis connecté déjà au site. Je suis sur un site local. Donc là, j'ignore. Et puis, je vais aller dans extension. Donc, j'ai déjà installé cette extension qui s'appelle Create Block Thème. Donc, s'il n'y avait pas déjà installé, je vous conseille vivement de l'installer. Donc, il suit faire ajouter. Ensuite, vous faites Create. Attention, il faut mettre bien le CK pour qu'il puisse retrouver facilement. Il est déjà installé, Create Block Thème, et puis, vous l'activer. Une fois qu'elle est activée, cette extension, elle ajoute deux menus. Elle ajoute le menu Create Block Thème et le menu Gestion des Polices. Alors, ce qui est intéressant avec cette méthode, c'est que vous pouvez récupérer n'importe quel police Google et il va les intégrer localement dans votre thème. Ensuite, on peut aussi ajouter une police de caractère qui serait une police sur mesure. Donc là, je vais aller dans Apparence Create Block Thème. Et on va voir quelques options. Je vais me concentrer vraiment sur l'essentiel parce qu'on n'a pas beaucoup temps, donc je vois qu'on aille un peu plus vite. Par exemple, là, je peux exporter 20-20-free. C'est-à-dire, je prends tout ce que j'ai fait dans le back-office et j'exporte avec les réglages de 20-20-free. Ensuite, je peux créer un thème enfant. Ça a plus tellement de sang. Je ne vais pas développer avec les thèmes FSE, mais ça serait possible. Je peux le cloner avec ce que j'ai fait pareil dans le back-office. Je peux l'actualiser. Ça, c'est le menu qu'on va voir le plus souvent parce que ça permet de valider ce qu'on aurait mis en place dans le back-office. Donc ça, c'est très intéressant. Et c'est dans ce sens-là que je vous dis que ça se rapproche beaucoup du versioning parce qu'on peut soit réinitialiser ce qu'on a fait dans le back-office très facilement ou le valider en dur dans son thème, dans les fichiers. Bien sûr, si vous faites du versioning, si vous avez guide derrière, vous avez deux niveaux de contrôle. C'est-à-dire qu'avant de le valider vraiment dans le guide, on ne va pas avoir guide ce soir, je le vois surtout de suite, on pourrait avoir une deuxième validation avec guide. Ensuite, on peut créer un thème vierge. C'est ce qu'on va utiliser. Et ça, on le verra dans un autre atelier. On peut créer une variante de style. Donc ça, ça permet de faire plein de réglages dans le back-office. Et on va enregistrer comme une variante. Donc du coup, il va créer un nouvel ensemble de réglages qu'on pourra changer facilement dans le back-office. Donc là, j'ai fait créer un thème vierge. Je suis donné un nom. On va faire un site de boulangerie. Et après, je vais prendre HTTPS. Alors normalement, si vous aviez une page dédiée pour votre thème, c'est cette URL-là qu'il faudrait utiliser. Je ne vais pas prendre un fichier. Vous allez voir qu'il génère automatiquement un visuel pour nous. Et je clique sur générer. Donc là, si maintenant je vais dans thème, j'ai le nouveau thème qui apparaît et je vais activer. Alors par défaut, les styles sont assez brut. Vous allez voir qu'on n'a même pas de police de caractère. Je vous montre à quoi ça ressemble. Donc ça ressemble à ça. Donc c'est la police par défaut. Et puis, ça affiche les derniers articles. Maintenant, ce qu'on va faire, c'est que je vais vous montrer tout de suite la gestion des polices. On va changer de police et puis ça permettra d'appliquer le premier réglage. Alors je prends une police. Pour l'instant, c'est la police système. Mais on va ajouter une Google Font. Donc là, je vais cliquer sur Ad Google Font. Je ne vais pas m'embêter. Je vais prendre la Roboto. Alors attention, quand vous intégrer une police, il ne s'agit pas d'intégrer tous les fichiers. En général, on a une police pour la version normale, donc qui est entre 300 et 500. Une police pour le gras et puis une police pour l'italique. En général, la police pour l'italique, c'est la même que la police normale. Donc là, je vais prendre la 300 parce que je ne veux pas avoir une police de 400 qui est un peu trop gras pour moi. Sachez que si vous avez la 300 et la 400, il prendrait les 400. Si vous avez que la 300, quand on va choisir normal, il va prendre le plus près, donc ça sera la 300. Donc je vais prendre 300 italiques également et puis je prends une graisse un peu forte pour les titres. Donc là, j'ai trois police. Ils me donnent le poids à droite et je vais faire Ad Google Font tout votre thème. Donc là, il va télécharger les police et il va les intégrer directement dans mon thème. Elles seront disponibles dans le réglage. Donc là, je vais repartir dans gestion des police. Je vais laisser pour l'instant système fonte et je voudrais maintenant l'appliquer à mon thème pour que ça change l'aspect. Donc là, pour l'instant, j'ai ça. Donc je voudrais changer avec la Roboto. Donc je vais aller dans Éditeur. Donc il y a deux manières d'aborder la partie FSE. Soit on va dans le menu Éditeur, soit quand vous êtes dans le front office, on peut faire modifier le site. Ça fait exactement la même chose. Alors comme on a vraiment deux backoffice distincts et que ça fait pas mal de clics pour l'instant, ça va évoluer mais pour l'instant, c'est comme ça. Moi en général, j'ai deux onglets. J'ai vraiment un onglet pour le backoffice FSE et un onglet pour le backoffice normal où je peux éditer les pages, les articles. Je peux aller dans le backoffice, dans le front office. Donc vraiment, je distingue deux onglets. Donc ce que je vais faire, c'est que je vais laisser cet onglet là. Donc il sera le backoffice normal et l'autre onglet, ça sera pour la partie Éditeur. Donc je vais dans Éditeur. Il me fait une prévisualisation des modèles qui existent. Donc on a dans modèle, pour l'instant, c'est que index. Quand vous êtes dans la template hierarchy, index, je fais un petit rappel, c'est valable pour tous les modèles. Aussi bien pour les modèles qu'on appelle singulaires. Donc ils sont pour les singles, donc les articles tout seuls ou les pages ou les modèles de page, donc je crois que c'est à part. Et tout ce qui est archive, donc archive de catégorie, d'étiquette ou archive de ce qu'on appelle des taxonomies. Alors un petit rappel quand même, les catégories ou les étiquettes, ce sont des taxonomies. On les appelle catégorie ou étiquette, mais en soi ce sont des taxonomies qui ont comme nom catégorie ou étiquette. Et quand nous on ajoute une catégorie, on dit j'ajoute une catégorie, mais en fait le terme exact, c'est j'ajoute un terme dans une taxonomie. Ça c'est important parce qu'on verra que dans les ateliers futurs, quand on commence à faire des modèles sur mesure, il faut comprendre vraiment cette hiérarchie pour être au plus près de la logique WordPress et pour que ce soit très fluide dans votre mise en place. Donc là je ne vais pas me rendre dans modèle où je peux cliquer sur un des modèles, peu importe. Et alors l'onglet qui va nous servir pas mal au début en tout cas, c'est l'onglet qui s'appelle style. L'onglet style, ça permet de gérer les styles globaux sur tout le site. Alors on verra qu'il y a deux approches, il y a le style global et vraiment le FSE s'est construit comme du CSS. C'est vraiment la même logique derrière. Et je pense que le module des bitons que je vais faire, je vais le construire de cette manière-là. Donc on a le style global, donc ça c'est ce qu'on applique à la page au body et après on a une notion de cascade ou d'héritage dans le CSS où certains éléments vont hériter de ce qu'on va appliquer dans le body. Donc le body c'est la fenêtre. Quand je suis dans la page qu'on voit en ligne, ça c'est le body, c'est le corps en fait de la page. Donc là je vais aller dans l'onglet style et les réglages de base qui sont appliqués au body, on les retrouve dans trois groupes. On les retrouve dans typographie, couleur et mise en page. Ensuite, l'autre réglage important, il est dans bloc. C'est à dire qu'il va y avoir une notion d'héritage notamment pour paragraphe. Paragraphe en général hérite de ce qu'on règle dans le body. Mais avec bloc, on va pouvoir faire des réglages spécifiques pour chaque bloc avec quasiment tous les réglages qu'on retrouve dans le réglage global. Donc là pour l'instant je vais changer la typographie. Donc je clique à l'intérieur et on a quatre groupes qui s'affichent. Donc on peut changer le texte, les liens, les titres et les boutons. Donc on va commencer par le texte et on va voir que la police de caractère, donc c'est la police par défaut, mais je peux changer et la police que je viens de charger, elle s'affiche. Donc le robotot, elle va s'appliquer automatiquement. Donc là pour le titre du site évidemment, comme c'était réglé sur gras, il va prendre moins ce que j'ai chargé comme police, qui est la 900 et comme c'est le plus près qui trouve avec la graisse, c'est la 900 qui va appliquer. Ensuite je peux changer la taille, donc ça je vais pas le changer parce que c'est changer la taille sur tous les paragraphs de base, je vous montre ce que ça donne. Donc vous avez des prêts réglages qui sont installés et je peux aussi mettre un réglage par défaut. Alors ce qui est pas mal quand vous appliquez parce qu'il y a une notion de REM en fait qui est appliquée sur toutes les polices. Donc les REM c'est les routes EM, c'est des valeurs qui sont relatives. C'est-à-dire que si je change sur la page de base, ça va se changer en cascade sur tous les éléments. Donc là vous pouvez vous dire tiens je vais changer mon réglage de base et ça va s'appliquer à tous les blocs internes. Ce qui est pas mal quand vous êtes dans l'onglet style, c'est d'aller dans le petit oeil guide de style et vous allez lister en fait tous les blocs de base qui existent dans votre site et ça vous permet de voir comment sont appliqués automatiquement les styles. Donc j'ai tous les textes, donc là j'ai le paragraph, j'ai les médias, donc les réglages de base également, j'ai le design avec les boutons, les colonnes, les groupes, les widgets et les thèmes. Donc les thèmes c'est ce qu'on appelle les blocs de thèmes. Donc ça c'est une grande nouveauté du FSE, alors je sais pas si on aura le temps de le voir aujourd'hui, mais ça permet d'appeler tout ce qui est contenu dynamique comme titre du site, titre de la page, auteur de l'article, auteur de la page, qu'est ce qu'on aurait comme bloc dynamique, la date de publication, on a ce qui nous donne ici la description du site. Donc tout ça c'est des contenus dynamique qui récupèrent depuis la base de données et sachez que quand vous éditez vos modèles directement dans ce qu'on appelle des blocs de thèmes, ça va se mettre à jour également dans la base de données. Et puis je vais faire plus de changements maintenant pour les titres. Là on peut changer, alors on a deux approches. Vous avez tous les liens, tous les titres, donc là ça va s'appliquer sur tous les titres. Par exemple je dis que tous mes titres sont légers, vous voyez qu'on bascule sur la graisse qu'on avait choisi 300, mais après je peux dire que je vais prendre la valeur par défaut et je vais distinguer pour chaque titre des réglages différents. Alors là j'ai changé un réglage dans le achat, je peux le faire pour tous les titres, je ne vais pas trop trop développer, mais à tout moment vous pouvez revenir en arrière parce que pour l'instant c'est pas enregistré dans le thème, c'est enregistré dans la base de données. Donc si je voulais réinitialiser dans les trois petits points, on peut dire qu'on réinitialise les options par défaut. Et qu'est-ce qu'il va faire, tant qu'on n'a pas validé dans son thème, eh bien il va reprendre les options par défaut du thème. Alors je vous montre ce que ça donne parce que ça c'est important de bien comprendre cette logique là, notamment quand vous voulez avancer pas à pas pour valider les éléments et pour faire d'autres expérimentations. Donc je vais ajouter le thème directement dans, moi je suis dans Visual Code, donc je vais ajouter un nouveau thème. Donc j'utilise beaucoup les espaces de travail, donc là on retrouve notre thème. Et là tous les styles vont être centralisés dans un fichier qui s'appelle Thème.json. Thème.json, alors on va pas voir ça tout de suite, l'idée c'est pas qu'on aille dans le code, je vous avais dit que c'est sans code aujourd'hui, mais Thème.json ça permet de créer vraiment des bibliothèques sur mesure et de centraliser tous les styles et en arrière-plan, lui ce qui va générer c'est des variables, des réglages par défaut évidemment, mais surtout des variables qu'on va pouvoir nous après utiliser dans les CSS ou directement dans le fichier Thème.json. Donc là pour l'instant il n'y a pas grand chose, il y a les réglages par défaut, là vous voyez qu'il a ajouté les fonds de famille, donc ça c'est dès que j'ai chargé les polices, c'est ajouté automatiquement et puis le reste c'est les réglages par défaut. Regardez ce qui va se passer maintenant, si je fais, j'actualise en fait ce que j'ai, je vais enregistrer. Alors attention, quand vous êtes dans la partie éditeur, il faut enregistrer deux fois, pourquoi ? Parce que dans certains cas, quand vous travaillez sur des modèles notamment, vous allez travailler sur des parties différentes et donc à chaque fois vous devrez choisir ce que vous voulez vraiment enregistrer, vous n'êtes pas obligés de tout enregistrer, c'est pour ça qu'il y a cette double validation. Donc là je vais enregistrer, je vais repartir dans l'ontroglet pour ne pas quitter le, je vais recharger pour vous montrer que c'est bien appliqué, je vais aller dans tableau de bord, apparence, create block theme et je vais actualiser atmosphère. Donc là je vais faire générer et si je vais dans mon fichier de code, et bien en fait ça a été mis à jour ici. Donc dans les styles, alors je ne rune pas dans les détails au niveau du fichier de Jason aujourd'hui, mais je vais dans élément régler ma typographie avec la police et la graisse et ensuite je choisis la police par défaut avec la hauteur de ligne. Donc là quand j'ai fait ça, quand j'ai validé en fait dans mon thème, quand je repart dans style, donc là je vais recharger, et bien je ne peux pas réinitialiser en fait mes styles. Si je repart dans style, voyez que je ne peux pas réinitialiser les options par défaut parce qu'elles sont inscrites en dur dans le thème. Et ça c'est très important de comprendre cette logique là parce que comme je vous disais, vous validez les étapes au fur et à mesure. Et si à un moment vous êtes complètement planté dans votre mise en place mais vous pouvez réinitialiser à tout moment. Alors ensuite je vais continuer dans les réglages. Donc là j'ai des typographies. Alors dans les titres, bon les réglages c'est les mêmes que tout à l'heure. Parfois il y a des réglages, ce n'est pas le cas ici, mais qui sont un peu cachés dans les trois points. Alors c'est vrai qu'il ne faut pas hésiter à les chercher dans ces trois petits points parce qu'on peut activer certains réglages. Et puis là je vais repartir dans... Alors les boutons on peut changer aussi, je vais ficher dans design. Donc là on peut choisir l'un taille des boutons différentes. Donc là on le voit en direct. Je peux changer la police etc. Je ne vais pas trop faire ça ici. Là je vais enregistrer. Et on va partir dans l'élément suivant qui sont les couleurs. Alors on a une palette par défaut de 12 couleurs et on peut ajouter des palettes personnalisées. Alors c'est vrai que quand vous avez plus de maîtrise au niveau du fichier Thames Jason, c'est à cet endroit là qu'on peut dire qu'on ne veut pas la palette par défaut. Et d'ailleurs on peut modifier de manière très précise tout ce qui s'affiche dans le back office les options de chaque élément directement dans fichier Thames Jason. On peut le faire globalement sur tout le site ou pour tous les blocs. On a cette option. On pourrait dire qu'on crée une palette de couleurs globalement pour tout le site et pour le bloc par un graphe, on peut avoir une palette complètement différente. Et ça c'est valable non seulement pour les palettes mais pour les polices qu'on peut choisir, les tailles, tous ces éléments sont configurables. Alors j'insiste un peu sur ce point parce que je considère qu'on passe à une autre étape au niveau de la création de Thames. Ce n'est pas simplement le front office, donc comment s'affiche le thème. C'est aussi comment on configure le back office pour que ça puisse correspondre au projet. Et ça c'est vraiment un changement majeur dans WordPress. Donc on ne peut pas le voir aujourd'hui mais je vous donne comme ça quelques pistes qu'on pourra appliquer plus tard. Alors je vais ajouter une couleur sur mesure et je vais lui donner un nom. Je vais lui faire terminer. Il ne l'a pas appliqué. Ensuite, il n'a pas appliqué le nom, c'est bizarre. Mais je vais afficher des tailles. Donc là je vais faire plus. Je vais ajouter une autre couleur. Je vous préviens, ça va être un sapin de Noël. C'est toujours comme ça qu'on fait des mots. Ensuite je vais ajouter une troisième couleur un peu claire. Ça va être magnifique. Alors il y a un grand débat autour de ça. Est-ce qu'on met des noms de couleurs ou est-ce qu'on met primaire 1, primaire 2, primaire 3 ? Parce qu'une fois qu'on a constitué ces palettes de couleurs, on peut faire des systèmes génériques où couleur foncée 1, couleur foncée 2, couleur foncée 3. Avec le groupe du Meetup WP Paris, on réfléchit encore à ça. On se dit qu'elle est la bonne approche. On n'a pas de solution miracle pour l'instant. Donc là je vais enregistrer ma palette sur mesure. Alors si je faisais ici réinitialiser, toute ma palette va disparaître. Si par contre je la valide comme tout à l'heure et je recharge, vous allez voir qu'elle est directement intégrée. Je reprends l'onglet style. Elle est intégrée vraiment dans mon thème. Elle a été validée. Je vous montre ce que ça donne au niveau du code. On fait quand même un peu de code. Désolé. Ça met un nouveau groupe dans ce setting. Ça s'appelle couleur. D'ailleurs je vais tout de suite vous enlever la palette défaut palette false pour vous montrer qu'avec une ligne très simple, on peut enlever la palette par défaut. Là je recharge. Et là du coup on a juste notre palette qui s'affiche. Donc là imaginez que par exemple je veux faire un style, une couleur sur mesure pour le paragraphe. Je vous montrerai après le dernier mis en page. Je vais dans le bloc. Il y a tous les blocs qui sont listés. Alors si vous ajoutez une extension type body press ou les plus connus, les blocs vont être installés automatiquement également. Donc là je vais dans le paragraphe. J'ai mes couleurs et je pourrais dire que la couleur de mon texte par défaut. Alors attention ça c'est le piège. C'est pas ici qu'on règle la couleur du paragraphe. Là c'est vraiment la palette. C'est à dire qu'on pourrait ajouter une couleur par défaut ou même une palette par défaut juste pour le paragraphe à cet endroit là. Donc là je vais dire personnaliser. Je peux vous montrer. Donc là je vais mettre un rouge plus fort, un rouge texte. Donc là il est personnalisé pour le paragraphe. Ce n'est pas cette couleur que je vais appliquer. Mais vous allez voir ce qui se passe quand je l'applique sur le paragraphe. Donc là je vais l'en texte et je vais changer. Je vais prendre la couleur. Donc voyez que le texte est changé automatiquement. Tous les endroits où il y a de paragraphe. Donc là c'est ce qu'on appelle un style qui est global. Par contre quand je suis dans l'édition d'un article. Donc là ça va être un style local. On va faire modifier l'article. Et si je prends le paragraphe au niveau de ma couleur, là rien ne m'empêche de prendre une couleur sur mesure. Donc là ça va être le style local qui va être attribué et plus le style global. Donc si je change le style global dans l'onglet style, ça ne va pas s'appliquer sur ce paragraphe parce qu'il y a quelque chose qui est plus fort. C'est dans ce sens là je vous dis que on est très proche de la spécificité en CSS. C'est la même logique. C'est le dernier en CSS qui gagne. C'est-à-dire que si la règle est dans le bloc paragraphe, c'est ce bloc qui va prendre le dessus sur le réglage global. Donc là on peut changer les couleurs d'arrière-plan. Donc là je suis toujours dans le bloc paragraphe. Donc je pourrais dire que chaque paragraphe a une couleur d'arrière-plan. Je vais pas le faire parce que ça va être un peu bizarre. Ensuite le dernier réglage c'est mise en pêche. Alors il y a deux éléments importants. C'est ce qu'on appelle le contenu boxé. Le contenu boxé c'est ce qui ressemble à ça. Je vais vous montrer. Donc là je suis sur l'article. Je vais peut-être mettre un peu plus de texte pour qu'on puisse... J'ai un petit outil qui permet d'avoir du lorem. Vous voyez que quand je remets des blocs paragraphe, ça reprend ma couleur par défaut. Donc là je vois l'article. Ça c'est le contenu boxé. C'est-à-dire qu'il est à 620. Et bien on peut changer cette valeur-là. Et le contenu qui déborde, ça c'est quand je choisis un alignement différent. Donc je vais vous faire une petite démo. Je veux dire que le contenu qui est boxé, il bascule à 500. Donc là j'enregistre. Et si je recharge mon article, oui là on est le contenu boxé. Si je fais un article et je mets une page à l'intérieur, à plutôt un visuel. Alors j'ai déjà choisi les visuels. Et dans l'aliment, alors je l'ai pas ici parce que il faut que je décrète sur le bloc lui-même de l'index. Et ça, je sais pas si on aura le temps de le voir aujourd'hui. Mais cette notion de débordement, ça dépend du parent direct. C'est-à-dire si le parent direct est réglé sur contrainte, eh bien le parent interne, enfin l'élément interne, l'enfant, il peut déborder de ce contenu. Alors je peux vous faire la démo sur l'entête. Ce sera plus facile. Donc là on va être dans l'entête. Et si je regarde comment c'est construit, ça c'est très important quand on commence l'FSE, c'est d'utiliser ce petit menu. Parce qu'on voit comment est construit la page. Alors là on a deux éléments importants. On a le header et le footer. Ça ils sont violés parce que c'est ce qu'on appelle des éléments de modèle. Ils sont mutualisés sur toutes les pages. Évidemment, on pourrait faire des modèles de page en appelant des headers ou des footers différents. Donc ça c'est possible. On peut en créer autant qu'on veut. Mais en tout cas ces modènes se comportent d'une certaine manière parce qu'ils sont mutualisés. Donc là si je prends le header, eh bien l'intérieur j'ai un groupe. Ce groupe, alors attention quand on est là, on fait de gaffe à pas laisser l'onglet style parce qu'on voit plus ce qu'il se passe. Donc là je prends vraiment les réglages du bloc. Et on voit que le bloc intérieur est contraint. À l'intérieur j'ai une rangée. Et l'arranger, si ce bloc interne est contraint et l'arranger ne l'est pas, eh bien je peux la faire déborder. Alors pour l'instant dans l'aliment, elle est sur pleine largeur. Ça veut dire que quelle que soit en fait la taille du contenu, elle déborde et elle va vraiment aller sur le bord. Donc là je peux changer son réglage. Et je vais dire qu'au lieu d'être en pleine largeur au niveau de l'arranger, eh bien il va être en grande largeur. Et vous voyez que le réglage que j'ai fait qui est boxé, il se retrouve ici, il est centralisé. Mais si je bascule sur 1000, donc il va générer en fait une classe automatiquement. Si je recharge ma page, eh bien là il est sur la grande largeur. Je pourrais dire que cette grande largeur, elle va être différente. Donc là je suis dans l'onglet style, toujours en mise en page. Donc là je vais rebasculer sur 700. Et puis la grande largeur, je vais faire 1200 pour vous montrer la différence. Donc là j'enregistre. Et si je reprends en fait mon réglage, vous voyez que l'entête, alors je suis à 1200 parce que mon écran est déjà petit, donc on voit pas trop la différence. Mais si je mets 1100, voilà. Donc à partir du moment où on a fait ce réglage d'aliment, ça va s'appliquer sur tous les éléments automatiquement. Et dès que je change ce réglage qui est global, du coup ça va s'appliquer partout. Alors on verra qu'en interne, il est possible de changer cette largeur. C'est à dire qu'on peut, dès qu'on met un groupe, on peut imposer en fait une autre largeur. Et du coup ça va faire des aliments différents. Je pense notamment au système de landing page. On pourrait avoir une page qui est pas sur 800 mais qui est sur 700, 800 ou 1000. Donc ça, ça sera possible dans le modèle directement de faire des réglages qui seront différents. Ensuite dans les autres réglages qu'on a toujours dans le mise en page, ça c'est ce qu'on appelle la marge interne. Donc la marge interne qui est appliquée automatiquement sur toutes les mises en page. C'est la marge interne du body. Vous voyez que là on le voit à gauche, on a une visualisation en direct. Bon en général, j'applique pas de marge interne sur le body. Par contre, rien ne vous empêche de le faire sur le côté seulement. Donc là pour l'instant, ça l'applique partout. Mais il est possible avec la petite chaîne de dire que moi je veux juste une marge interne sur la gauche et sur la droite. Alors avoir un petit souci si on fait ça, c'est que ça risque de nous embêter au niveau de la couleur. Bon après on la ajustera si il s'y besoin. Donc là je vais mettre 11 aussi. Donc là vous n'oubliez pas la petite chaîne, ça permet de faire des réglages spécifiques. Et le dernier élément, celui-ci est très important. C'est ce que vous allez voir que dans toutes les mises en page, le FSE utilise soit grid layout, soit flex. Donc flex c'est une grille sur une dimension et grid layout c'est une grille sur deux dimensions. Et ce qu'on a les espaces entre les éléments, c'est ce qu'on appelle le gap en CSS. Alors ça s'appelait grid gap, c'est devenu gap. Et ça peut s'appliquer automatiquement, ça peut s'appliquer plutôt aussi bien à grid que à flex. Et là l'espacement des blocs c'est ce qu'on va retrouver globalement sur tout le site. Alors on va voir qu'après on peut le régler localement, c'est possible. Donc là je vais faire 13 pixels. Donc ça règle globalement sur tous les espaces. A partir du moment où j'ai un groupe, un rassemblement de blocs. Mais je peux régler par exemple si je fais sur ce bloc là pour ma navigation. Donc là j'ai liste de pages. Ma navigation, je vais repartir sur ces réglages. On a au niveau du style, on retrouve la même logique style. On a l'espacement des blocs. Donc on va dire, alors il faut que je referme parce que je ne vais pas avoir d'espace pour vous montrer avec ma résolution. Donc là vous voyez on peut changer en fait l'espacement entre les blocs. Dès que la navigation c'est utilisé derrière flex, mais dès que vous avez un groupe, vous pouvez toujours que ce soit une colonne ou autre ou des éléments internes dès qu'ils sont groupés, on peut changer l'espacement entre les blocs. Je peux vous montrer une démonstration sur un article. Donc là je vais faire modifier l'article et je vais faire texte 1. Ici je vais faire un titre et puis texte 2. Je vais sélectionner tous ces blocs et automatiquement ils me proposent de les groupés. Donc soit je fais un groupe simple, soit je fais ce qu'on appelle une rangée. Donc ça c'est pratique, c'est du flex. Donc il va répartir en fait les éléments équitablement. Donc quand je fais une rangée, on a les trois éléments sur le même niveau et on peut changer alignement. On peut dire que c'est au centre, on peut dire que c'est à droite, on peut dire que c'est réparti de chaque côté. Donc ça c'est ce qu'on a utilisé dans l'entête. On peut dire que c'est aligné à gauche. Si je le fais centré, eh bien quand vous allez dans l'onglet design, vous avez l'espacement entre les blocs et là vous pouvez voir en fait faire mon réglage sur le gap, la gouttière entre les éléments. On peut changer à tout moment, vous voyez ça j'ai un empilement et là ça sera pareil, ça va être valable aussi. J'ai le gap entre les éléments. Alors si je vais dans le groupe, on aura la même chose dans un groupe. Alors la nuance quand même c'est que quand vous êtes dans le groupe, vous avez, si vous êtes dans le groupe, au niveau des réglages, vous pouvez contraindre le groupe à une certaine taille. C'est à dire qu'il va être boxé, après il peut être centré, on peut dire qu'il est centré, il est justifié. Et je peux vous montrer avec un arrière-plan, ça va être joli. Donc là je vais le contraindre, je veux dire que celui-ci il y a 400 et en large il est 800. Donc là ça n'a pas tellement à voir d'incidence. Et je peux au niveau du design, ça elle n'a pas encore vu mais on a les marges internes et les marges externes. Donc ça vous voyez elle n'est pas activée la marge externe, c'est juste la marge interne. Donc la marge interne, on va voir tout de suite ce qui se passe. Vous pouvez changer en direct en fait le, ce qu'on appelle le padding en CSS. Alors là l'embêtement avec le groupe par rapport à la rangée ou à l'alignement, enfin notamment à la rangée, c'est qu'on a la possibilité de facilement changer les alignements des éléments internes. Donc après à l'usage vous verrez qu'est-ce ce qui est le plus intéressant. Mais quand vous voulez contraindre vraiment la taille d'un élément, on passe plutôt par le groupe. Alors si je suis dans l'onglet style, donc là j'ai fait pas mal de réglages. Donc là je repars dans l'autre onglet. Vous voyez qu'il me propose de réinitialiser. Donc là je vais revenir sur ce que j'avais enregistré dans mon thème. Ou alors si je suis content de mes réglages, ben je vais juste aller dans, je vais repartir ici, apparence create block thème et je vais actualiser mon thème. Donc là il va générer et ça va enregistrer automatiquement tous mes réglages dans le fichier thème jason. Donc ça valide ce que j'ai fait et je peux faire des nouvelles expérimentations. Ça c'est vraiment important de comprendre cette logique là parce que vous pouvez avancer pas à pas sans prendre de risques et puis pouvoir réinitialiser à tout moment. Ce que je voudrais m'ont montré dans le prochain atelier c'est on va commencer à utiliser le templating. Donc là on fera un modèle pour les pages. On pourrait faire un modèle aussi pour faire ce qu'on appelle une landing page où typiquement on n'a ni besoin du footer ni besoin du header. Donc là on pourra le dégager. On se concentrant vraiment sur la partie centrale. On pourra même enlever le titre de la page et du coup ça sera la même logique qu'un thème classique. C'est à dire qu'on pourra choisir dans page le modèle qui va s'afficher dans le menu des roulants. Voilà on est à 45 minutes à peu près. Je vais prendre les questions s'il y en a. Oui la question, l'interface de thème jason. Alors c'est vrai que c'est pas hyper intuitif. Donc il y a une auto complétion. Donc là j'ajoute un nouvel objet pour une nouvelle couleur. Donc là c'est color. Il me dit qu'il y en a trois possibles et c'est contextuel. Il veut repérer que je suis dans palette, dans l'objet couleur. Donc là c'est couleur. Ensuite name. Vous voyez qu'il me propose pas d'autres éléments. Il a vu que j'avais déjà utilisé couleur et le slug. Alors custom et mon vert. Donc ça c'est ce qui va permettre de générer les variables. Et si j'oublie une virgule par exemple je vous montrez ça. Il y a le fichier qui change de couleur pour nous indiquer qu'il y a une erreur. Donc je ne voulais pas faire de code. Je vous en montre juste un petit peu. Là ce qui est pas mal c'est qu'il y a vraiment quelque chose qui est très intelligent dans l'utilisation du fils de Jason. Du coup ça le rend un peu plus friendly. Ça permet de voir tout de suite dès qu'on fait une erreur. Et donc ça bien sûr ça va se mettre à jour dans le back office automatiquement juste pour le blog paragraph. Pas de question mais cette fois-ci j'ai réussi à tout faire en parallèle. Génial. Si nous avons constitué notre thème avec quelques ajustements mineurs pouvons-nous développer un thème enfant à partir de ce thème. Je ne sais pas si c'est une trop bonne idée de faire un thème enfant avec le FSE. Parce que si tu pars d'un thème 2.0 finalement globalement tu n'as que des blocs natifs avec la hiérarchie classique du WordPress. Donc je pense que c'est plus simple de rester non pas sur un thème enfant mais sur un thème classique. Enfin un thème classique, un thème FSE mais sans cette dépendance au thème enfant. Je ne pense pas que ce soit nécessaire. Thierry ça ne va pas aider les devs à comprendre le code et à savoir coder. Bah ce qui est pas mal si c'est que tu comme t'es pas mal quand même dans le back office si tu comprends la logique de la template hiérarchie. Ça te permet de voir comment il l'intègre. Tu peux le valider. Après si tu vas dans les choses plus compliquées en code c'est sûr que c'est pas le but mais on est dans une logique de développement de thème donc c'est pas du tout la même logique que le développement d'extension. Ce n'est pas les mêmes API. L'enregistrement des modifs dans thème jason via crete va aussi sur un site en ligne. Oui ça marche aussi en ligne, ça marche de la même manière. Et crete block thème intègre la fonction d'accès, lecture, écriture au thème jason en somme. Oui c'est un peu ça, exactement. Oui j'ai testé sur un site en ligne c'est nickel. Le seul truc qui est un petit peu embêtant pour l'instant mais ça va évoluer. Je ne vous ai pas fait la démo au précédent mi... si on en a parlé il me semble. C'est que quand vous avez des images dans vos modèles il va les mettre dans le thème donc il va faire un lien en dur vers l'image et du coup quand vous migrez le site là il y a un problème. Donc on est obligé d'ajouter une fonction PHP dans les modèles pour que l'URL soit dynamique mais ça je pense qu'ils vont l'améliorer. Il y a des chances que ça bouge cette partie là. Je vous montre quand même pour le bloc paragraph. Je regarde juste si il y a une question. Donc tu vires ce plugin en prod. Je ne sais pas en même temps si la personne permettait d'exporter, oui tu n'aurais pas besoin en prod, c'est vrai, tu n'aurais pas besoin de le mettre. Tu validerais en local et après tu mettrais à jour. Ça dépend comment ton client va être indépendant ou pas dans la réalisation de son thème. Par contre ça n'enlèvera pas les menus d'édition. Quand tu vas dans le menu éditeur on modifie le site, ça c'est pas lié à l'extension create block thème. C'est vraiment lié au thème qui, lui il reconnait que c'est un thème effet. Tu le vires en prod, d'accord ? Oui, oui. Je comprends, après ça dépend de mes clients qui veulent être autonomes et faire leur petite modif. Après c'est vrai que le problème si on fait ça, c'est clair, c'est que si un moment il écrase notre thème, on va avoir du mal à revenir en arrière. Donc ça dépend des clients évidemment. Mais si vous voulez avoir un peu plus de contrôle sur ce qui se passe dans le thème, il vaut mieux pas le laisser, c'est sûr. Après c'est assez facile, si vous prenez un rôle, vous cloné, prenez pas le rôle natif. Il faut toujours cloner le rôle. Leur mumbles marche très bien pour ça. On clonne le rôle éditeur et à partir du moment où le rôle éditeur est sur la base du rôle éditeur, tous les menus FSE disparaissent. C'est très simple et après on peut surcharger un peu le rôle éditeur qu'on a besoin que l'admine, le faux admine et d'autres fonctionnalités. Je vous montre quand même ce que ça donne sur le bloc paragraph. Si je vais dans mon paragraph, vous voyez que j'ai mes nouvelles couleurs en fait dans le bloc paragraph. C'est les couleurs sur mesure que j'ai mises, mais du coup il s'appliquer, il n'y a que le paragraph qui a ce bloc, enfin cette palette. Si je mets mon titre, j'ai l'autre palette qui est dans le thème alors que l'autre c'est la palette du paragraph. On peut faire les réglages pour le paragraph, on pourrait dire qu'on enlève la taille, qu'on enlève l'apparence, qu'on enlève la casse, tout ça c'est configurable. On peut pour chaque bloc avoir des réglages très spécifiques dans le back office. Il y a d'autres questions. Récemment j'ai utilisé aussi parce que là la question qui s'est posée, ce qui me bloquait d'abord, notamment quand on faisait des modèles sur mesure, c'est l'utilisation de champs. C'est qu'on n'avait pas cette possibilité, on était obligé de mettre en dur en fait des blocs et ça quand on veut mutualiser du contenu notamment pour nos modèles, enfin moi j'ai pas appris comme ça, j'ai appris avec notamment ACF. Et bien là j'ai utilisé de manière plus intensive une extension qui s'appelle meta-bloc, je crois que c'est de meta-bloc, je vous l'ai montré. Elle permet d'intégrer en fait dans tout le template FSE, meta-bloc, tous les champs ACF. Donc ça c'est génial parce que là on a vraiment les deux systèmes qui cohabitent. C'est meta-bloc, meta-field-bloc. Et ce dev il fait des super trucs, il a fait notamment un bloc pour le fil d'Ariane qui marche très très bien aussi. Donc là c'est compatible avec les méta-classiques de WordPress ou les méta-ACF, les deux marches. Et on peut faire des modèles vraiment sur mesure directement, on fera ça la prochaine fois avec le FSE du coup. Après ce qui serait pas mal c'est qu'ils ajoutent dans l'API, j'ai pas encore eu le temps de regarder tout ce qui se passe dans 6.3 qui va sortir en mois d'août. Mais ça serait bien d'avoir un filtre, un moment au niveau d'un rôle qu'on puisse facilement désactiver les menus éditeurs quand on a besoin pour certains rôles ou certains utilisateurs. En tout cas quand on peut utiliser le PHP, les deux marches très bien ensemble, il y a plein de fonctions, notamment si je peux un truc tout bête, si j'ajoute le filtre pour la longueur de l'extrait, ça s'appliquera automatiquement sur les blocs de thèmes qui seront fait avec le FSE. Tous les filtres en fait PHP fonctionnent, notamment dans toute la partie dynamique des blocs de thèmes. Je offrai pas en août un live, je pense que je le ferai en septembre. Donc là on se concentrera vraiment sur le templating. On ira un peu plus loin sur la mise en place des blocs. Et puis si on a le temps, j'aimerais bien vous montrer un peu comment on peut synchroniser, on fera un petit peu de CSS. Donc il y a une routine à mettre en place pour que si on a besoin d'un peu de CSS, parce que souvent c'est plus simple qu'on a besoin de faire des personnalisations un peu avancées, vous allez voir qu'avec la méthode que je vous propose, le CSS va se synchroniser automatiquement entre le bac et le front, ça sera transparent. Alors ça il faut que ce soit un thème FSE, parce que si vous n'avez pas de thème FSE, les classes dans le back office et le front office ne sont pas tout à fait les mêmes. Et du coup c'était une vraie année, moi j'en ai fait même dans TANI MCE, c'était assez galère de faire des CSS dans le back office, mais là c'est transparent. Il ajoute dynamiquement une classe qui va vraiment cibler tout ce qui concerne les blocs qui sont utilisés dans l'FSE. Du coup il n'y a pas de conflit avec le reste et ça marche nickel. Oui ça sera un rendez-vous régulier, à partir de septembre je ferai un rendez-vous par mois. On va rester sur ce format, j'essaie de ne pas faire trop long pour que ça puisse facilement se caler dans les emplois du temps. Tu es resté jusqu'à la fin, un grand merci pour ta présence. N'oublie pas de noter le prochain live de septembre, on va plonger au coeur des modèles, ces fameux templates de WordPress. Tu vas découvrir comment tout cela fonctionne et comment créer un modèle personnalisé. Si tu es impatient d'approfondir, j'ai une proposition pour toi. J'organise une formation présentielle avec plusieurs dates prévues, dont une en septembre et une autre en octobre. Tous les détails se trouvent dans la description. Ce n'est pas tout, j'ai également une formation vidéo actuellement en prévente, un tarif très attractif. Encore une fois, tous les liens sont juste en dessous. Je te dis à très vite et n'hésite pas à t'abonner ou à mettre un pouce pour m'encourager à continuer.