WordPress 5.0 Préparons-nous au nouvel éditeur : Gutenberg @audrasjb Meetup WordPress Drôme-Ardèche | 07/02/18

À propos Jb Audras, 33 ans, ardéchois, directeur technique chez Whodunit Co-organisateur du meetup avec @rachel_peter , @JBernardHuet et Biquette Contributions : w.org, core, meta, glotdict, o2, GTE fr_FR, WPTD2017, theme review team, accessibility team, et bien sûr Gutenberg :)

WordPress 5.0 — GUTENBERG Un nouvel éditeur qui fait peur → Pourquoi ? ● Perte des repères sur un outil qu’on connaît bien ? ● Compatibilité des thèmes ? ● Compatibilité des extensions ? ● Peur du… changement ? ● Peur du Javascript ? (ça je comprend ^^) Avant de crier gare, voyons à quoi ressemble ce fameux éditeur :)

Pourquoi un nouvel éditeur ? ● Standardiser les pratiques d’écritures : un seul concept servira à manipuler l’ensemble du site ● Nouveau concept éditorial de WP : le bloc ● Première étape : remplacer l’ancien éditeur par une interface de gestion de blocs ● Ensuite, le bloc aura vocation à remplacer : ○ Les widgets ○ Les menus ○ Les shortcodes ○ Tous les dév spécs, champs personnalisés : bloc de call to action, diaporama, FAQ, carte Google Maps… tout cela sera généré sous la forme de blocs déplaçables et réutilisables !

Un éditeur très simple à utiliser :D

Les blocs natifs à ce jour ● Paragraphe de texte et niveaux de titres ● Image ● Galerie images / vidéos / sons ● Citation ● Liste numérotée ou à puces ● Image de couverture (avec texte voire bouton/lien call to actionpar dessus) ● Lecteur vidéo / audio ● Tableaux (oui !) ● Texte préformaté et affichage de portions de code source ● HTML personnalisé ● Texte simple WYSIWYG ● Séparateur / ligne horizontale ● Ancien bouton “Lire plus” ● Bouton-lien / call to action ● Colonnes de texte ● Shortcodes (widget) ● Derniers articles publiés (widget) ● Liste de catégories (widget) C’est l’heure de tester →

Démonstration de Gutenberg en live…

La transition vers Gutenberg …ou pas ? Maintenance : Quelles questions se posent pour cette mise à jour un peu particulière. Dois-je passer mon site sur Gutenberg ? Comment faire ? Quel timing ?

3 cas de figure 1. Le site passe à WordPress 5.0 et à Gutenberg ○ Les extensions, thèmes et développements spécifiques sont compatibles → mode Classic Editor + Gut (par défaut ou en option suivant la maturité des rédacteurs) 2. Le site passe à WordPress 5.0 en gardant l’éditeur classique ○ Certaines extensions, thèmes ou développements spécifiques ne sont pas compatibles → mode Classic Editor, puis on planifie de MAJ les dépendances au fur et mesure 3. Le site reste en branche 4.9 ○ Le site est instable, le réseau de site est très hétérogène ou autres spécificités → On reste sur 4.9.x qui sera maintenue au minimum 2 ans et on réfléchit à la suite (développements ? refonte ?) Ce n’est pas un choix par défaut ! Ni une solution pérenne ! ou

La mise à jour vers WordPress 5.0 ● Roadmap WordPress 5.0 : inconnue à ce jour (dépend de la roadmap Gut) ● Roadmap Gutenberg : ça avance bien → https://goo.gl/YjS57G Pas de planning connu à ce stade, tout dépend de Gut’ Comment s’organiser ? Avec un rétroplanning par exemple !

Rétroplanning de MAJ vers WordPress 5.0 ● J-30 // 1ère béta // Premiers tests ○ Clonage du site sur une instance de test et installation plugin Gut’ ○ On classe le site en cas 1, 2 ou 3 ● J-30 à J-15 // béta tests ○ Développements éventuels, vérification de la compatibilité des dépendances ○ Création du tableau de suivi des dépendances : un fichier avec la liste des extensions et thèmes pour suivre leur évolution en regard de l’intégration de Gut au core ○ Changement de classement cas 1, 2 ou 3 ● J-15 // 1ère RC // Recette ○ Recette sur l’instance de test et vérification : maintient ou pas du classement 1, 2 ou 3 ● J-0 à J+10 // Sortie de WP 5.0 // Déploiement en production

Le maître mot, c’est l’anticipation 1. Testez Gutenberg dès aujourd’hui ! 2. Évaluez les risques au fur et à mesure de son avancée → Les principales extensions sont (ou seront) opérationnelles : WooCommerce, EDD, Yoast, Polylang, ACF… tout le monde est sur le pont! 3. Si vous êtes dév, mettez les mains dans le cambouis et apprenez à maîtriser Gut’… et n’oubliez pas : Learn JavaScript Deeply 4. Si vous êtes prestataire, communiquez dès maintenant auprès de vos client, créez un guide d’utilisation de Gut’

Merci Et vive Gutenberg ! Meetup WordPress Drôme-Ardèche | 07/02/18