 On va parler de Gutenberg aujourd'hui avant de commencer donc moi c'est Riyad je suis développeur chez automatique j'habite en Algérie et je suis très content d'être avec vous aujourd'hui c'est ma première conf du type donc merci pour votre indigence et je bosse je travaille sur le projet Gutenberg je fais partie de l'équipe de développement donc avant de parler de Gutenberg en lui-même on va parler de la création de contenu dans WordPress comment on crée du contenu finalement dans WordPress il y a différentes manières pour rajouter du contenu un site web on utilise d'abord la page de l'éditeur la page qu'on connaît tous avec l'éditeur tiny mce un titre on rajoute un titre mais au sein de cet éditeur on peut finalement utiliser différents trucs que différents concepts les metabox d'abord c'est ces petites boîtes qu'on voit au dessus au dessous de l'éditeur généralement c'est on utilise ça pour avoir du contenu structuré quand on enregistre dans des post métal on utilise des plugins tel que ACF pour nous pour faire des trucs comme ça assez rapidement on peut utiliser aussi des shortcodes dans les shortcodes dans l'éditeur alors on les utilise un peu pour tout et n'importe quoi en général ils sont faits pour faire du contenu dynamique qui est généré à l'affichage de l'article et mais les thèmes on abuse aussi pour faire du layout rajouter du multicolon des trucs du style donc c'est ces bout de code des fois un des chiffrable on utilise les embed c'est en fait c'est une fonctionnalité que tout le monde tout utilisateur de WordPress ne connaît pas forcément mais si on colle des liens dans l'éditeur si c'est un lien tweeter il est transformé en une sorte de bloc de tweet ou si c'est un lien vers une vidéo youtube pareil donc ça c'est une autre manière de rajouter du contenu et il y a aussi d'autres pages vers lesquels on va pour créer du contenu dans un site web WordPress notamment le customizer donc les thèmes et rajoutent différentes manières de rajouter du contenu dans la page d'accueil ou dans des pages de contact un peu spécial et ils font ça en rajoutant des boîtes à remplir dans le customizer ou dans des pages spécifiques d'options de thème et au sein du customizer on peut aussi utiliser des widgets c'est des petits blocs de contenu qu'on rajoute à des sites bar ou des aider ou des trucs comme ça ils peuvent contenir aussi du contenu statique comme du contenu dynamique et la dernière chose c'est les menus pareil que les widgets il y a des emplacements spécifiques à ces menus définis par les thèmes et on va naviguer dans une autre page différente de WordPress pour créer ces menus et les ajouter finalement à son site web alors si on est habitué à WordPress on trouve ça finalement assez facile assez évident on sait il faut naviguer les widgets les menus mais si on regarde bien tous ces concepts sont assez similaires au final c'est des blocs de contenu peut être statique ou dynamique on peut rajouter au sein d'un article au sein du contenu ou dans des sites bar dans des aider donc ça c'est une des idées principales derrière la création de Gutenberg pourquoi Gutenberg c'est là qu'on arrive à une idée principale c'est d'apporter un peu plus de cohérence à la création de contenu dans WordPress de façon à permettre à plus d'utilisateurs de maîtriser la création de rajouter la création à l'utilisateur qui a besoin de rajouter du contenu à son site web n'a pas besoin de savoir qu'il faut naviguer à telle page ensuite aller dans le customizer ensuite pour ajouter sur la site bar il faut rajouter un widget pour ajouter dans le contenu il faut aller dans la page ça c'est une des idées principales derrière Gutenberg une autre idée que Gutenberg entend résoudre c'est la découvrabilité je suis pas sûr que ce mot existe mais c'est on va dire c'est l'idée de permettre de découvrir tout ce que l'éditeur peut faire assez facilement je sais pas vous mais moi personnellement je connaissais pas les imbuds il n'y a pas si longtemps donc j'ai découvert que on pouvait faire des liens dans WordPress il n'y a pas très très longtemps je pense qu'il y a beaucoup d'utilisateurs de WordPress qui sont dans le même cas je peux me tromper un autre point important c'est l'adaptabilité c'est à dire que l'éditeur qu'on a actuellement dans WordPress il existe depuis une dizaine d'années à peu près et pendant ces 10 ans le web a évolué d'une manière phénoménale déjà on consomme principalement du contenu à partir du mobile actuellement et les les attendent des utilisateurs ont finalement changé les utilisateurs finaux ils s'attendent à avoir du contenu riche des des headers des sliders des liens vers des tweets des vidéos donc l'éditeur si on veut créer ces contenus riches avec l'éditeur actuel finalement il faut ou bien avoir une dizaine ou une vingtaine de plugins pour pouvoir faire tout ce truc là ou bien maîtriser le code html on se retrouve souvent aller vers le code éditeur et modifier le code nous-mêmes donc lui donc une évolution de l'éditeur est nécessaire un autre point important dans gothomber c'est la sémantique c'est à dire que pour l'accessibilité quelque chose de très important donc si on rajoute de la sémantique au contenu ça va nous permettre d'analyser ce contenu et de produire du contenu accessible plus facilement alors que quand on utilise une seule blob de contenu de contenu finalement c'est très difficile de savoir c'est pareil qu'est ce qui est titre qu'est ce qui est texte qu'est ce qui est image qu'est ce qui doit être mis en valeur etc donc ça c'est très important dans gothomber et bien sûr la nouvelle concurrence point très important récemment il y a eu des sites qui sont apparus et qui gagnent en popularité et souvent c'est des sites propriétaires je peux citer week square space des trucs comme ça et wordpress ne peut pas se permettre de de laisser ces sites web finalement très innovant prendre de plus du citateur et on a besoin d'alternatives open source et wordpress doit évoluer pour justement concurrencer ces sites dans nombreuses sont ceux qui pensent qu'ils sont faits au fait pour des sites simples où finalement on n'a pas besoin de de personnalisation avancée etc mais c'est une idée une idée pas très juste puisque week square par exemple peut faire exactement ce que peut faire wordpress avec des custom post type etc donc c'est pas c'est pas seulement pour concurrencer les blogs et les sites simples voilà donc comment on résout ça grâce au bloc donc tous ces blocs vous voyez qu'est ce qu'un bloc un bloc ça va devenir l'unité de base pour créer du contenu dans wordpress n'importe quel endroit dans wordpress pour ajouter du contenu ce sera un bloc alors le bloc peut avoir un contenu statique c'est à dire qu'il peut être enregistré en html statique dans la page ou dans le post content et il peut être dynamique c'est à dire qu'il soit le son contenu évolue avec le temps il est généré pendant l'affichage de l'article en question il peut être structuré ou pas c'est à dire que si on a besoin de requêter des informations séparément on peut décider d'enregistrer le contenu d'un bloc dans des post meta et par contre si c'est juste du contenu statique on peut le laisser dans le post content un bloc peut être conteneur ou contenu ça veut dire concrètement qu'un bloc peut contenir d'autres blocs pour permettre des des layouts un peu plus compliqué grâce à des colonnes ou des trucs avancés comme ça un point important c'est l'édition visuelle ça c'est un point très important comparé au shortcode par exemple ou des fois on insère un shortcode on passe le contenu à un collègue etc il c'est pas forcément ce que ce que fait ce shortcode il a besoin de naviguer entre le preview et l'éditeur pour avoir une idée précise de ce que ça fait alors que le bloc un concept principal c'est que l'édition d'un bloc doit se faire de manière visuelle de manière à voir directement sans besoin d'aller vers le preview le résultat final ou quelque chose qui s'en rapproche un bloc est aussi agnostique au contexte c'est à dire qu'il peut être utilisé dans le post content dans le contenu d'un article ou d'une page mais mais il est autonome c'est à dire il peut être aussi utilisé dans des sites bar ou des des aideurs ou un peu partout dans dans le l'affichage d'un site web et un point important c'est qu'il doit être un opénie a été je sais pas quand on dit en français non sans opinion c'est à dire qu'il va fournir les styles de base pour qu'il soit affiché correctement mais il va laisser le champ libre au thème pour personnaliser l'affichage et la présentation de ces blocs donc ça c'est la définition d'un bloc comment cette notion de bloc va arriver dans wordpress elle va arriver en trois étapes donc la première étape c'est le post editor c'est à dire qu'on va prendre le contenu d'un article et le contenu d'une page on va changer le tiny mce qu'on connaît tous et on va rajouter la possibilité de rajouter des blocs et donc ça c'est l'étape sur laquelle on est qui s'achève bientôt enfin il s'achève pas mais qui arrive à relise bientôt la seconde étape c'est le page builder c'est l'étape où on parle de customization aussi des fois c'est on va utiliser des blocs comme des widgets finalement dans le customiseur pour rajouter des blocs dans les sites bar des heures des footer et la troisième et dernière étape c'est que Gutenberg va devenir un site builder complet c'est dans cette étape là les thèmes seront simplifiés c'est à dire que un thème se concentrera finalement sur le but d'un thème c'est à dire la personnalisation rajouter des stylesheets et laisser tout ce qui est layout tout ce qui est type de contenu etc au bloc eux même voilà sans trop tarder on va faire une petite démo de Gutenberg j'ai un peu courageux j'espère que ça va marcher non là ouais en fait la vidéo c'était backup après je sais pas comment tenir et manipuler en même temps c'est pas la peine de faire plein écran alors on va donc la première chose qui nous saute aux yeux c'est tout ce comme va blanc tout qui va nous permettre de rajouter nos blocs on va commencer par rajouter un titre je vais vous parler de ma ville pour la radio c'est un peu difficile de parler de voir en même temps on va essayer de faire vite alors la première chose qu'on peut faire c'est copier du contenu de google doc c'est quelque chose que beaucoup de personnes font donc je vais prendre quelques paragraphs ici avec des titres je reviens ici je colle mon contenu et on voit là que Gutenberg a créé trois blocs séparés voilà ça c'est un bloc titre des blocs paragraphe on voit que chaque bloc a une barre d'outils ici donc chaque bloc définit les contrôles qui sont disponibles dans sa barre d'outils et si on veut des options avancées on peut aller dans ce qu'on appelle l'inspecteur de blocs donc ici on peut voir d'autres options pour personnaliser le bloc de manière avancée on va commencer par le bloc texte on va prendre celui là on peut augmenter la taille ici du texte voilà je suis content je mets un petit arrière plan rouge on voit pas très bien on voit qu'il a un petit message ici qui nous dit à c'est pas très conforme aux règles d'accessibilité il faut mieux changer le contraste donc là on peut changer la couleur du texte voilà le message a disparu on est content je peux faire un truc comme ça voilà là c'est bien je suis content de mon texte je peux rajouter ça manque un peu d'image je vais rajouter une petite galerie je vais prendre trois photos ici que vous voyez pas que je vais glisser directement ici voilà ça nous crée une petite galerie assez rapidement je peux l'afficher un peu plus grand comme ça je pense ouais ça me va bien comme ça quelque chose qu'on fait souvent aussi récemment c'est les images de couverture donc ce que je vais faire c'est que je vais rajouter une autre image ici je peux utiliser le slash inserteur si quelqu'un utilise le clavier souvent je tape slash et en fait j'ai une liste de blocs que je peux utiliser je tape cover image donc j'ai l'image je vais drag and droper une autre image je la mets ici le reste du texte ici sans cruise en général ce genre d'image on met des background fixe c'est à dire quand on scroll ça ça a un petit effet sympa et je peux mettre en large affiché large comme ça donc ça commence à donner un truc plutôt pas mal donc on va continuer je vais rajouter une petite vidéo youtube un petit un bud je la copie d'ici j'ai copié le lien et j'ai perdu la souris voilà voilà donc je viens à la fin de mon article je peux ou bien utiliser le bloc youtube qui est disponible ou bien directement coller le lien si je suis habitué à la fonctionnement de dm bud donc voilà j'ai directement ma vidéo qui est disponible ici alors si je veux rajouter maintenant un truc qui n'est pas prévu par les blocs je peux toujours faire du html si ça me chante donc faire un custom html là je la je vais faire un petit marquis sympa je sais que ouais au rang c'est bien mais ici c'est paris paris voilà je rajoute un petit un nouveau bloc ici en bas un séparateur et un petit texte que je rajoute maintenant à tous mes articles vous devez faire pareil je pense c'est pro pulsé par guttenberg je centre tout ça vu que j'utilise dans tous mes articles il vaut mieux que je l'enregistre comme ça je perds pas tant la prochaine fois donc ce que je vais faire c'est que je vais cliquer sur ces trois points et converte le bloc c'est à dire qu'il va trop enregistrer que je pourrais utiliser dans d'autres articles si je veux et c'est faisable avec n'importe quel type de bloc donc là je vais l'appeler guttenberg si je navigue dans l'inserteur maintenant c'est l'inserteur de bloc et je vais dans save vous voyez que j'ai déjà testé le truc préparer ma présentation comme il faut voilà si je rajoute il est deux fois ici alors on a fini notre article ça ressemble à quelque chose de bien je pense je peux publier publish ici je peux faire des ajustements de dernière minute le plugin pour en rajouter des trucs ici aussi je publie et je peux voir mon article ici voilà qui ressemble à peu près à ce que j'ai fait donc en cinq minutes j'ai eu un article plutôt riche avec différents types de blocs etc merci une autre fonctionnalité que je voulais vous montrer c'est les templates donc j'ai créé un plugin qui s'appelle gcf mais c'est juste pour la démo qui va nous permettre de contrôler l'affichage de guttenberg donc on va créer ce qu'on appelle des templates des blocs templates donc là je vais vous montrer un template que j'ai déjà créé c'est finalement un template de livre si on va permettre aux utilisateurs par exemple de rajouter des livres on va créer un template on va mettre un titre une description qui est une texte aria une image et un prix qui est un nombre et je l'ai assigné au post type page et j'ai forbid adding and remove c'est à dire que on peut pas ajouter ou supprimer des blocs c'est figé l'utilisateur va que remplir le contenu de ce livre donc si maintenant je vais créer une page voilà vu que ce template il est assigné à la page et directement en fait la page qui est pré remplie et l'utilisateur n'a plus qu'à remplir finalement ces différentes informations voilà pour la démo revenant à notre à nos slides pour le moment maintenant alors finalement guttenberg il est développé pour qui j'ai envie de dire pour tout le monde d'abord pour les créateurs de contenu les utilisateurs finaux ils pourront créer des contenus riches beaucoup plus facilement que ce qui est possible maintenant sans installer de plug-in ou aller dans l'éditeur de code pour les agences ça permet plus de contrôle sur les les sur du coup ils peuvent définir des templates très précis que les utilisateurs finaux pour en remplir et du coup ils pourront pas faire n'importe quoi avec leur contenu de leurs articles ils pourront choisir quel bloc autorisé ou pas s'ils veulent laisser l'ajout de blocs possible pour les créateurs de thème c'est des thèmes plus simples centré sur la personnalisation où on n'a plus besoin de rajouter finalement plein d'options de layout dans les thèmes les thèmes où il faut une checklist rajouter les features etc c'est plus le cas maintenant on peut changer de thème si on veut c'est le thème s'occupera de l'affichage essentiellement de la personnalisation pour les développeurs de plug-in là je vous invite à venir à mon atelier qui doit suivre cette conférence et dans lequel on va aborder certains api disponibles avec gutembert mais la principale idée ici c'est que au lieu de créer des widgets des shortcodes et des metabox et des je sais pas quoi on crée d'abord des blocs après on a différentes api qui viennent autour qui vont qui vont nous simplifier la vie pour les développeurs corps alors gutembert il est développé avec des technologies récentes telles que réacte javascript s6 et j'en passe redux etc donc ça va ça va permettre au fait d'améliorer un peu cette image que wordpress train qui est des technologies un peu vieux etc donc ça apportera peut-être de nouveaux contributeurs et ça améliora grandement le devx la developer experience pour les développeurs corps pour les hébergeurs c'est plus d'opportunités parce que l'idée c'est de permettre à wordpress d'être plus utilisable à finalement beaucoup plus d'utilisateurs donc plus d'opportunités pour les hébergeurs et avant de terminer je tiens à revenir sur quelques idées reçues que je vois beaucoup sur gutembert donc déjà les thèmes sont compatibles par défaut on n'a pas besoin de changer finalement son thème existant pour qui fonctionne avec gutembert on peut faire quelques adaptations pour apporter des options plus notamment l'alignement large qu'on a vu ou stylé des blocs plus précisément mais par défaut le thème fonctionnera très bien il est possible si on n'est pas prêt pour gutembert notamment si les utilisateurs finaux c'est quand même un changement d'interface c'est quand même un changement important au niveau de l'interface donc l'utilisateur il faut qu'il soit préparé au changement s'il est pas prêt à ce changement là on peut désactiver gutembert pour le moment et apporter cette évolution petit à petit il y a déjà un plugin qui permet de désactiver gutembert qui est disponible et si vous l'installez maintenant au moment de la mise à jour gutembert n'apparaîtra pas gutembert supporte les metabox acf fonctionne correctement par exemple d'autres plugins qui utilisent metabox et cueillost etc fonctionne gutembert sera l'éditeur par défaut de tous les custom post type et pas seulement si on active l'arrêt API ou des trucs comme ça il y a des limitations actuellement mais ça va changer gutembert supporte les shortcodes alors on préfère les remplacer avec des blocs parce que l'édition les visuels etc mais si on utilise les shortcodes ils continueront à fonctionner comme il faut et l'accessibilité est un point très important pour gutembert depuis le début depuis alors nous il y a deux points importants ici c'est gutembert est développé pour être le plus accessible possible mais aussi il va permettre de créer du contenu plus accessible grâce à la cémantique que j'ai expliqué plus tôt et gutembert ne remplace pas tiny mce il va l'utiliser donc les différents blocs qu'on a vu chacun utilise tiny mce sa façon il ya d'autres idées reçues que je voudrais parler c'est par exemple le writing flows c'est à dire quand on a tous ces blocs on a peur ben peut-être que moi si je fais qu'écrire du texte ça va ça va changer ben en fait gutembert est très optimisé pour si vous utilisez le clavier essentiellement si vous faites que taper du texte finalement pour les blogueurs etc ça va fonctionner correctement aussi le scope de gutembert il ya eu des gens qui disaient au départ que le projet se concentrerait surtout sur la modification du bloc de contenu de tiny mce mais en fait ça jamais été le cas depuis le début gutembert c'est apporter cette notion de bloc dans wordpress et la phase v1 depuis si on veut voir les les premiers mock-up ça a toujours été changé complètement la page d'édition d'articles et de pages et aussi j'entends souvent que gutembert arrive trop vite qu'il est développé trop vite alors il faut savoir que les premiers mock-up des premières réflexions autour d'un bloc éditeur dans wordpress date de plus de trois ans maintenant je pense et le développement là ça fait un peu plus d'une année qu'on a commencé le développement et le plugin il est disponible depuis peut-être huit mois quelque chose comme ça donc je dirais pas qu'il arrive trop vite c'est vrai que le rythme de développement il est très élevé et chose qu'on n'a peut-être pas vu avant enfin pas si souvent en tout cas dans wordpress mais il arrive pas si vite que ça gutembert parce que wordpress c'est un projet qui a peut-être 15 ans et si on change un éditeur en un an et demi deux ans finalement c'est pas c'est pas si vite voilà donc maintenant vous qu'est-ce que vous devez faire première des choses c'est installer et tester pour vous faire votre propre opinion ce que c'est important de se faire sa propre opinion il y a plein d'articles sur le sujet etc mais il n'y a pas mieux que d'installer et de tester soi-même alors si si on est une agence faire un environnement de pré-production où il faut tester les sites actuels je vous conseille de faire ça et si vous voulez aller un peu plus loin créer des blocs et remonter les problèmes à l'équipe je vous ai mis quelques liens ici notamment pour en savoir plus la documentation technique le plugin mon plugin cause gutembert custom fill si vous voulez faire des templates rapidement et si vous voulez contribuer ou savoir en avance ce qui va arriver etc il y a la réunion hebdo madder au niveau du slack de wordpress sur le core le channel core editor le mercredi à 15 heures voilà gutembert arrive avril mai en tout cas il est prévu en marge pour avril mai et voilà merci à vous