WordPress 5.0 & 5.1 – Test d’écriture d’un article avec Gutenberg

J’ai décidé de sauter le pas pour tester GUTENBERG, le nouvel éditeur de blocs intégré dans le cœur de WordPress, avec les versions 5.0 (6/12/2018) et 5.1 (21/02/2019)

CET ARTICLE a été totalement rédigé avec GUTENBERG,
initialement avec WP 5.0.3 puis mis à jour avec WP 5.1.0.
* Point de vue d’un administrateur – rédacteur – webmestre *

Articles à consulter

Pour comprendre d’où nous venons et où les développeurs de WordPress, le plus populaire des CMS – libre de surcroît, veulent absolument emmener leurs utilisateurs contre leur plein gré.

• WordPress 5.0 incluant Gutenberg est disponible ! – 7/11/2018
• WordPress 5 : Gutenberg, bien plus qu’un nouvel éditeur de contenu – 15/04/2018
• L’avenir de WordPress : Gutenberg, un atout ou un handicap ? – 19/12/2017

Gutenberg est le nom donné au nouvel éditeur. L’expérience d’édition de contenu a été totalement repensée pour les pages et articles a contenu enrichi. Les blocs apportent une grande flexibilité, que vous soyez un débutant dans la construction de sites web ou un développeur chevronné.

Déclaration des développeurs de WordPress 5, qui n’engage qu’eux !

WordPress 5.1, nom de code « Betty »

21/02/2019 — « Betty » a été publié par Automattic et il enfonce les blocs de Gutenberg dans les doigts des utilisateurs. Alors, quoi de neuf docteur ?

Deux mois et demi après la publication de WordPress 5.0, qui marquait un changement radical de paradigme avec l’intégration de Gutenberg… Allô, maman, bobo ! … dans le cœur du CMS, son éditeur Automattic publie « Betty », la première mise à jour majeure de la branche 5, qui continue d’enfoncer le clou des blocs d’édition à tout va.

• Cette version présente les premières fonctionnalités de Site Health qui commencera à afficher des avis aux administrateurs de sites exécutant des versions de PHP (Hypertext Preprocessor) considérées obsolètes et donc dangereux du point de vue sécurité.
• De plus, lors de l’installation de nouveaux plugins, les fonctionnalités Site Health vérifieront si un plugin nécessite une version supérieure de PHP. Si la version installée de PHP est incompatible avec votre site, WP vous empêchera d’installer ce plugin.
• D’après Automattic, WordPress 5.1 inclut aussi des améliorations de performances solides dans Gutenberg, le nouvel éditeur de blocs. Pour pour ma part, je ne l’ai pas constaté lors de mes tests. Les lenteurs sont toujours bien présentes et réelles !

Normalement, la mise à jour de WP 5.0.x vers WP 5.1.x est laissée à la discrétion de l’administrateur du site, sauf exception. J’ai décidé de sauter le pas et de le faire depuis le tableau de bord de WordPress. Cela a pris environ une minute. Nous voici donc maintenant sous WordPress 5.1.0 « Betty » pour le meilleur ou le pire. Nous verrons bien…

Au cas où vous voudriez sauter cette mise à jour, vous pouvez cliquer sur le bouton Masquer cette mise à jour pour ne plus être importuné par le message de rappel. Mais pour des questions de sécurité, il vaut quand mieux la faire.

Basculer de l’Éditeur classique vers le Nouvel éditeur Gutenberg

Cela s’est fait simplement et directement dans mon nouvel article en sélectionnant Nouvel éditeur (Gutenberg) tout en bas dans la colonne latérale à droite.
Et pour pouvoir avoir accès soit encore à Classic Editor (l’Éditeur classique) soit à Gutenberg (le nouvel éditeur par défaut), et cela article par article, il faut d’abord installer le plugin officiel Classic Editor (v.1.4+) depuis le Tableau de bord (Admin) -> Extensions, ce que j’avais déjà fait précédemment. Pour mémoire, Classic Editor est une surcouche de TinyMCE Advanced qui active les fonctionnalités avancées et les extensions dans TinyMCE, l’éditeur visuel classique de WordPress jusqu’à la version 4.9.9.
Puis paramétrer son WordPress pour autoriser l’utilisation de cette extension et la bascule entre les deux : Tableau de bord (Admin) -> Réglages -> Écriture -> Options d’écriture -> Éditeur par défaut pour tous les utilisateurs = Éditeur classique (Classic Editor) (+) Autoriser les utilisateurs à changer d’éditeur = Oui.
Remarque : Dans la vue des Articles du Tableau de bord (Admin) de WP est ajouté automatiquement à la fin du Titre des articles le nom de l’Éditeur utilisé en dernier pour le modifier : — Nouvel éditeur ou — Éditeur classique. C’est bien pratique pour savoir avec quel éditeur tel ou tel article ou page a été crée – édité.

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Avec Gutenberg, fini le bon vieux temps du texte tapé au kilomètre

Et de la possibilité de mise en forme qu’à la fin comme avec l’Éditeur classique.
Maintenant sous WordPress 5+, tout est un bloc, rien qu’un bloc, toujours un bloc, et encore un bloc et rien qu’un bloc. Pour l’instant, il est très désagréable d’avoir tout le temps présent cette surcouche Cadre bloc + Barre d’outils de l’éditeur de blocs qui viennent perturber la rédaction de l’article. De plus, si le contenu du bloc est plus haut que la partie utile de la fenêtre d’édition, alors la Barre d’outils de l’éditeur de blocs n’est plus accessible directement. Pas terrible du tout !

1ère astuce affichée par Gutenberg : Bienvenue dans le monde des blocs ! Cliquez sur le bouton (+) (Ajouter un bloc) pour ajouter un nouveau bloc. Il y a des blocs disponibles pour toutes sortes de contenu : vous pouvez insérer du texte, des en-têtes, des images, des listes, et bien plus encore !

Autant j’entrevois l’intérêt potentiel de Gutenberg, mais qui est (beaucoup) plus complexe que Classic Editor, pour un site Web, autant je me pose la question de savoir si Gutenberg est vraiment adapté-utile à un site Blog ?

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Au 22/02/2019

• Plus de 2 millions de téléchargements pour WordPress versions 5.1.x dans le monde. Cela inclut les mises à jour majeures de WP 5.0.x -> 5.1.x + les nouvelles installations de WP 5.1.x + les mises à niveau de WP 4.x.y -> 5.1.x, et dans toutes langues disponibles.
• Évolution de la répartition entre les différentes versions actives de la branche 5 de WordPress sur le Web.

Au 17/02/2019

• Plus de 3 millions d’installations actives pour Classic Editor pour plus de 34 millions de téléchargements pour WordPress versions 5.0.x dans le monde. Cela inclut les nouvelles installations de WP 5.0.x + les mises à niveau de WP 4.x.y -> 5.0.x + les mises à jour mineures forcées de WP 5.0.x -> 5.0.y, et dans toutes langues disponibles.
• Évolution de la répartition entre les différentes versions actives de WordPress sur le Web.
• WP versions 5.0.0 – 5.0.3 du 6/12/2018 à ce jour : 34,8% de part de marché WordPress en 73 jours ; soit une adoption moyenne/jour de 0,48%.

COMMENTAIRES pêle-mêle et au fur et à mesure de la découverte de GUTENBERG et de ses possibilités

Et d’éventuelles modifications de paramètres que je fais en cours de route.

La colonne latérale (à droite) possède maintenant

• 4 boutons (en haut) : Prévisualisation, Publier…, Réglages (icône sous forme d’un engrenage) et Afficher plus d’outils & d’options (icône sous forme de 3 points verticaux), et
• 2 onglets (juste en dessous) : Document et Bloc, pour les paramètres de ceux-ci.
• Éditeur visuel 4 modes Vue (accessibles depuis Afficher plus d’outils & d’options) : Standard (par défaut), Barre d’outils supérieure (au lieu d’au dessus de chaque bloc), Mode « mise en lumière » (focus sur le bloc en cours) et Mode plein écran (sans distraction). Les 3 derniers modes sont cumulables.
• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter une Image mise en avant (en haut à gauche dans l’article)

• Avant : c’était simple, il suffisait de descendre directement dans le bandeau de droite et de cliquer sur l’entrée en question = 1 clic.
• Maintenant : dans le bandeau de droite, il faut d’abord cliquer sur Document, puis descendre jusqu’à l’entrée Image mise en avant = 2 clics.
• Et à chaque fois que nous tapons du texte, nous repassons automatiquement en mode Bloc.
• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un bloc WordPress (reprise article ou page)

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un bloc Image

• Glissez une image, téléversez-en une nouvelle ou sélectionnez un fichier dans votre bibliothèque.
• 3 boutons sont proposés : Téléverser, Bibliothèque de médias et Insérer à partir d’une adresse web pour choisir l’origine de l’image.
• Gros changement par rapport à avant. Maintenant le paramétrage de l’image (avec de nouvelles et/ou différentes possibilités) se fait une fois le bloc Image dans l’article (onglet Document) et non plus au niveau de la Bibliothèque lors de la sélection de l’image.
• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Bouton Prévisualiser

• Avant : un clic sur ce bouton affichait l’article dans un nouvel onglet et le navigateur basculait automatiquement dessus. C’était direct, rapide et très pratique.
• Maintenant : un clic sur ce bouton affiche toujours l’article dans un nouvel onglet du navigateur mais celui-ci ne bascule plus automatiquement dessus – sauf lors de la 1ère prévisualisation. Après, il faut le faire manuellement, et avant cela le brouillon de l’article est enregistré automatiquement à chaque prévisualisation, ce qui n’était pas le cas avant.
• Ce dernier point a au moins trois inconvénients majeurs :
  • 1. Nous ne pouvons plus modifier un article déjà publié qu’après qu’il soit totalement mis à jour, sinon il sera en ligne et modifié dès la prévisualisation de la moindre modification.
  • 2. Cet enregistrement automatique à chaque fois rallonge significativement le temps nécessaire à la prévisualisation avec génération de l’aperçu.
  • 3. En fonction du type d’hébergement sur lequel est notre site web, et c’est particulièrement vrai pour les hébergements mutualisés, comme ceux d’OVH, le temps total de rédaction va augmenter très significativement.
• Nota bene : Le fonctionnement du bouton Prévisualiser semble +/- aléatoire. Parfois il marche comme décrit ci-dessus, et d’autres fois comme un mix entre Avant et Maintenant. Est-ce un bogue ou autre chose ?
• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un Bloc de contenu et plus

Nativement inclus dans WordPress 5, Gutenberg permet à ce jour d’ajouter deux douzaines de blocs communs de contenu et plus de cinq dizaines de Mise en forme, Mise en page, Widgets et Contenus embarqués.
Mais Gutenberg demande beaucoup plus de temps que Classic Editor pour réaliser les mêmes tâches d’édition et de mise en forme. Ce n’est pas du tout productif !

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Les blocs sont un super nouvel outil pour construire du contenu attrayant. Avec les blocs vous pouvez insérer, organiser et mettre en forme du contenu riche avec un minimum de connaissances techniques. Au lieu d’utiliser du code personnalisé, vous pouvez ajouter un bloc et vous concentrer sur votre contenu.

Déclaration des développeurs de WordPress 5, qui n’engage qu’eux !

Retour chariot à la fin d’un bloc

L’appui sur la touche Entrée crée automatiquement un nouveau bloc du même type, comme Paragraphe si nous étions en Paragraphe. Pour l’instant, je suis un peu-beaucoup perdu avec ce Gutenberg car même pour faire des choses simples, c’est plutôt pas simple.

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un bloc Média – Contenu embarqué

• Le contenu de l’interface utilisateur va dépendre du contenu embarqué que nous voulons insérer dans notre article.
• Voir plus haut les blocs de Contenus embarqués actuellement disponibles nativement dans WordPress 5.
• Ci-après, j’ai inséré une vidéo Vimeo en utilisant le bloc ad-hoc.
• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un-des bloc-s Colonnes

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un bloc Code informatique
(ici Python 3.6.7 avec SyntaxHighligther Evolved 3.5.0)

# GAMME CHROMATIQUE ASCENDANTE/UP (12 notes/octave) sur 6 octaves (Do1 à Do7)
import mido    # importe bibliothèque MidO (MIDI Objects) qui gère directement RtMidi
import time    # importe module Time Python
 
# Ouvre un port Midi-OUT de MidO => un port Midi-IN de Qsynth/FluidSynth
outport = mido.open_output('FLUID Synth (QS-M1_FluidR3-GM):Synth input port (QS-M1_FluidR3-GM:0) 129:0')
 
i = 24  # initialisation variable i pour note 24 = Do1
while i < 97:  # boucle notes à jouer dans la gamme Chromatique 24 à 96 / Do1 à Do7
    print("Note =", i)  # affiche numéro de note jouée
    outport.send(mido.Message('note_on', note=i, velocity=100))
    time.sleep(0.3)  # durée d'environ 1/3 seconde
    outport.send(mido.Message('note_off', note=i))
    i = i +1  # incrémentation de l'index i (note jouée)

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un bloc Classique (genre WP 4.9.x, càd pré-WP 5.0)

La barre d’outils des blocs Classique et Paragraphe Classique sont cachées et s’affichent au focus. Pour de meilleurs résultats, activer le menu et ajouter uniquement les boutons essentiels. Les boutons vont s’intégrer en fonction de la largeur de la barre d’outils.
Pour ce faire : Tableau de bord (Admin) -> Réglages -> TinyMCE Advanced -> Onglet Nouvel éditeur (Gutenberg) -> Cocher la case devant « Activer le menu éditeur (recommandé) ».

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un bloc Bouton (ici personnalisation limitée par notre thème)

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Ajouter un bloc Articles récents (ici vue en grille)

• SMS Vanilla (Simple MIDI Sequencer) built with Pure Data (Pd Vanilla)
• YesXR (Yamaha Electone SYSEX Recorder) built with Purr Data / Pd-L2Ork (Pd engine)
• Yamaha WX7 (Wind MIDI Controller) + BT7 (Power/MIDI Pack) + WT11 (FM Wind Tone Generator) — Le souffle digital
• Cartes-filles MIDI-ITO-HAT pour Raspberry Pi
• Kit Raspberry Pi 400 — Quels systèmes d’exploitation libres pour ce mini-ordinateur ARM ?

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Réorganiser les Blocs (de contenu)

Une chose bien pratique, que permet cette structure en blocs, est de pouvoir réorganiser facilement notre brouillon d’article en déplaçant vers le haut ou le bas tel ou tel bloc, quel que soit son contenu, en utilisant l’ascenseur (déplacement de la position un bloc à la fois) ou la poignée (déplacement libre de la position) du bloc concerné. C’est efficace et facile à faire.
Par contre et pour l’instant, ce déplacement n’est que vertical. Il est impossible de le faire horizontalement comme avec un vrai Page Builder. Un manque que les développeurs devront combler.
Le grand U ci-dessus montre l’utilisation du format Lettrine réglable sous l’onglet Bloc – Réglages du texte.

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

Améliorer les possibilités d’édition de Gutenberg

Le plugin Classic Editor peut être utilisé seul pour une édition de contenu classique et efficace tout en étant hautement paramétrable. Cela permet d’avoir un fonctionnement comme nous le connaissons depuis des années et donc de retrouver rapidement tous nos repères-automatismes et notre productivité.
Et ce même plugin Classic Editor permet aussi, quand nous basculons vers Gutenberg, de paramétrer ce dernier en passant certaines possibilités de Classic Editor à Gutenberg.

Oui, c’est le grand bazar. Les développeurs de WordPress ont décidé d’un côté de nous simplifier la vie en mettant à notre disposition Classic Editor pour nous assurer une transition en douceur vers leur nouveau monde, mais de l’autre de nous la compliquer avec Gutenberg (changement radical de paradigme) qui est le nouvel éditeur imposé par défaut de WordPress 5.
Pourquoi faire simple quand on peut faire très compliqué, philosophie CMSienne dont le gourou incontesté est Matt Mullenweg, le fondateur et patron d’Automattic, l’éditeur de WordPress.

• WordPress 5.1 : Pas de changement, idem à WP 5.0.

CONCLUSION – GUTENBERG (WP 5.0.3 & 5.1) versus Classic Editor + TinyMCE Advanced

Malgré l’excellent travail effectué depuis 2 ans par ses développeurs, à ce jour, il n’y a rien de transcendant avec ni WP 5.0 ni WP 5.1 + Gutenberg que nous ne pouvions déjà faire avec WP 4.9 + TinyMCE Advanced.
Par contre des fonctions basiques mais très utiles ont disparus et Gutenberg est une vraie usine à gaz avec des lenteurs bien présentes !

WordPress 5.1 n’apporte rien de nouveau – rien de mieux aux rédacteurs par rapport à WP 5.0. La branche 5 de WP avec Gutenberg, son éditeur de blocs par défaut, est une régression flagrante de WordPress 4.9 !

En l’état actuel de Gutenberg intégré dans le cœur-même de WordPress 5, il me semble impossible de se passer du plugin officiel Classic Editor avec derrière TinyMCE Advanced.

Pour ma part, je vais donc continuer à utiliser exclusivement « Classic Editor + TinyMCE Advanced » comme mon Éditeur de contenu préféré et par défaut de WordPress 5 !

Mais il n’y a pas le feu au lac. Classic Editor, étant un plugin officiel de WordPress, il sera entièrement pris en charge et maintenu jusqu’au moins en 2022, ou aussi longtemps que nécessaire. Cela donne tout le temps nécessaire à tout un chacun de se familiariser à son rythme avec Gutenberg, le nouvel éditeur de blocs (contenu) imposé par les développeurs de WordPress 5+.

Je continuerai à tester de temps à autre Gutenberg au fil de la sortie des nouvelles versions majeures (5.2 prévue courant avril 2019, 5.3, 5.4, etc.) de WordPress pour voir quand il pourrait vraiment devenir ou pas mon éditeur par défaut…