Gutenberg, un avant-goût de WordPress 5

Comme vous le savez peut-être si vous suivez l’actualité de WordPress, Matt Mullenweg a annoncé l’arrivée d’un nouvel éditeur de texte qui devrait faire son apparition dans WordPress 5.0.

Cet éditeur, connu sous le nom de Gutenberg, est d’ores et déjà disponible en test. La bonne nouvelle, c’est que l’équipe de développement de Gutenberg l’a rendu installable sous forme d’extension ! Il suffit d’avoir un WordPress (en version 4.8 minimum) installé pour pouvoir le tester.

C’est ce que je n’ai pas manqué de faire ! La version testée ici est la 0.8.0.

Attention : Gutenberg est en version bêta, ne l’installez pas sur un de vos sites en production !

Installation de l’extension

Rendez-vous dans l’onglet Extensions > Ajouter et rechercher l’extension en tapant son nom dans le champ de recherche. Cliquer sur le bouton Installer puis activer l’extension.

Extension gutenberg WordPress - Ajout de l'extension

Aussitôt l’activation faite, un nouveau menu fait son apparition dans la barre latérale du tableau de bord de WordPress :

Extension Gutenberg dans le menu de WordPress

Le menu Gutenberg permet soit de créer un nouvel article en utilisant l’extension, soit de voir une démo des possibilités de Gutenberg.

Menu Extension Gutenberg wordpress

Cliquer sur Démo. La première impression qui se dégage de l’interface est que tout a été pensé en termes de sobriété et d’efficacité. L’interface est en effet claire et très fonctionnelle.

Extension Gutenberg pour WordPress - L'interface

Le volet de droite permet de switcher entre les propriétés du document et celles du bloc en cours d’édition.

Volet des propriétés - Extension gutenberg pour WordPress

Je trouve l’ergonomie assez bien pensée. Les volets reprennent les différentes méta boxes actuelles (catégories, discussion, image à la une…). Un volet Table des matières fait son apparition permettant de visualiser la structure du document et l’utilisation des balises Hx :

Extension Gutenberg WordPress - La table des matières

 

Ajout et gestion des blocs

L’ajout de blocs se fait via le bouton Insert en haut de la page. La liste des éléments est assez fournie.

Ajouter un bloc avec l'extension Gutenberg pour WordPress

Ajouter et personnaliser un bouton est (enfin !) d’une extrême simplicité avec Gutenberg. Les options de personnalisation du bouton, pour l’instant assez sommaires mais déjà suffisantes.

Ajouter un bouton dans Gutenberg pour WordPress

L’ajout du bouton

 

Personnaliser le bouton avec Gutenberg

La personnalisation du bouton

 

Création du lien sur un bouton avec l'extension gutenberg

Créer un lien vers un article ou une page sur un bouton

 

Chaque bloc ajouté dispose de boutons permettant de déplacer l’élément (flèches vers le haut et vers le bas), de modifier ses propriétés ou de le supprimer

Déplacer ou modifier les blocs - Extension Gutenberg

Les articles créés avec Gutenberg se retrouvent logiquement dans la liste des articles de WordPress. On remarque toutefois un lien permettant de modifier l’article en utilisant l’extension.

Extension Gutenberg WordPress - La liste des articles

La vue Code

La vue code montre comment Gutenberg traduit les éléments. Il insère des balises spécifiques sous forme de commentaires. C’est malin.

Vue côté code avec l'extension Gutenberg de WordPress

Conclusion

L’extension Gutenberg permet d’avoir un avant-goût du futur éditeur de texte de WordPress, l’actuel n’étant plus adapté aux mises en pages évoluées. Aujourd’hui, hormis pour un blog simple, il faut presque toujours recourir à des solutions alternatives telles que TinyMCE ou des constructeurs de page comme Elementor pour éditer le contenu des pages et articles. Avec WordPress 5, l’éditeur natif devrait combler de nombreuses lacunes et enfin offrir un éditeur de texte évolué et digne de ce nom. L’extension Gutenberg est en tout cas très prometteuse. Vivement WordPress 5.0 !

 

WordPress 4.8, les nouveautés

Les nouveautés de WordPress 4.8

WordPress 4.8 est disponible depuis le mois de juin 2017. Au menu des principales nouveautés, des widgets image, texte riche et vidéo, une modification des liens facilitée et l’apparition d’un widget sur le tableau de bord de l’administration.

De nouveaux widgets

Quelques widgets ont fait leur apparition dans cette version 4.8. Certains bien pratiques (les widgets texte et image), d’autres un peu plus anecdotiques comme le widget son ou le widget vidéo.

Tous ces widgets sont accessibles en passant par Apparence > Widgets ou bien via le menu Apparence > Personnaliser > Widgets, cette seconde solution étant préférable pour visualiser en direct les changements.

Widget image

Il est désormais possible de mettre une image dans la sidebar sans recourir à une extension grâce à ce widget. Son utilisation est des plus simples : On donne un titre, on ajoute l’image depuis la bibliothèque de médias et le tour est joué ! Rien de plus simple.

Côté administration :

Wordpress 4.8 Le widget image

Côté front office :

Wordpress 4.8 Le widget image 2

Widget son et vidéo

L’ajout de sons et de vidéos est également possible dans la sidebar ou dans le pied de page (footer) nativement dans WordPress. Le procédé est identique que pour l’image. Concernant la vidéo, vous pouvez importer un média depuis la bibliothèque ou copier/coller l’adresse depuis un autre site tel que Youtube par exemple. Notez qu’il est préférable d’éviter de stocker les vidéos directement sur votre site. Préférez l’utilisation de sites d’hébergement de vidéos comme Youtube ou Dailymotion.

Exemple avec le widget vidéo :

Choisir le widget vidéo

Wordpress 4.8 Le widget vidéo

Donnez un titre à votre widget puis cliquer sur le bouton Ajouter une vidéo

Dans la fenêtre qui s’affiche, cliquer sur le lien Insérer à partir d’une adresse web puis coller le lien de la vidéo.

Widget texte riche

Le widget texte riche est une nouveauté appréciable parce qu’il dispose désormais de fonctionnalités pour mettre en forme le texte. Auparavant, il fallait posséder quelques rudiments de langage HTML pour apporter quelques enrichissements. Aujourd’hui ce n’est plus le cas.

Wordpress 4.8 Le widget texte riche

Le résultat dans la sidebar de WordPress :

Wordpress 4.8 Le widget texte riche

La modification des liens facilitée

Désormais, lorque l’on souhaite éditer le texte d’un lien, celui-ci apparait sur un fond bleu, permettant de visualiser la délimitation du lien. C’est un peu plus pratique pour faire des modifications sans avoir besoin de recréer le lien.

Wordpress 4.8 - Modification des liens facilitée

Les évènements WordPress à proximité

Le tableau de bord de WordPress contient un nouveau Widget, affichant les prochains évènements WordPress à proximité du lieu que vous définissez (via un clic sur le petit crayon). Intéressant pour garder un œil sur les activités de la communauté WordPress !

Wordpress 4.8 Le widget evenements

Voilà les quelques améliorations de cette version 4.8 côté utilisateur. Vous pouvez retrouver toutes les informations sur ces nouveautés plus quelques autres dédiées aux développeurs sur la page officielle de WordPress.