Découvrez Gutenberg, le nouvel éditeur de WordPress

WordPress 5.0, qui est attendu pour fin 2018, proposera un nouvel éditeur, qui a été baptisé Gutenberg. Vous pouvez d’ores et déjà le tester en version bêta. Mais quelle est la philosophie qui se cache derrière cet éditeur ? Quelles nouveautés apporte-t-il ? Et comment pouvez-vous l’installer ?

Gutenberg est basé sur des blocs entièrement modulables

Actuellement, lorsque vous créez un nouveau message dans votre tableau de bord WordPress, vous vous retrouvez dans l'éditeur TinyMCE, un éditeur WYSIWYG (what you see is what you get ou, en français, ce que vous voyez est ce que vous obtenez), grâce auquel chaque formatage de votre texte s'affiche immédiatement devant vos yeux. Il s'agit d'un excellent éditeur, mais qui commence tout doucement à être dépassé.

Nieuwe WordPress editor GutenbergC'est pourquoi le projet Gutenberg a été lancé, s’inspirant du nom de Johannes Gutenberg, l'homme qui, il y a plus de 500 ans, a inventé la presse à imprimer dans laquelle les lettres étaient de petits blocs séparés (caractères mobiles). Et c'est précisément sur ce principe que repose Gutenberg : tout est basé sur des blocs entièrement modulables.

Quel est l’avantage des blocs ?

Pour faire court : avec Gutenberg, vous pouvez construire votre contenu comme vous le feriez avec des briques de LEGO : tout provient d'une seule boîte, et les mêmes instructions sont valables pour tous les blocs. L'éditeur TinyMCE était différent, car il proposait des types spécifiques d’articles, l'intégration de contenu multimédia, des widgets et autres fonctionnalités qui nécessitaient toutes leur propre interface.

Vous pouvez déterminer les propriétés de chaque bloc de votre contenu. Un bloc peut être le texte d'un paragraphe, une liste, un en-tête, une galerie ou autre, et vous pouvez modifier cette propriété d'un simple clic. Cela signifie que vous pouvez transformer une ligne de texte en citation, modifier son alignement, son style, etc.

Building blocks van GutenbergVous pouvez également créer des blocs réutilisables. Si, par exemple, vous avez trouvé la mise en page idéale pour l'introduction de votre annonce, vous pouvez sauvegarder ce bloc et ses paramètres. Ainsi, dans le prochain article que vous publierez, vous n'aurez plus qu'à ajouter votre propre bloc d'introduction.

Vous pouvez ainsi créer des modèles de page complets, composés de différents blocs. Tout ce que vous avez à faire, c'est ajouter le texte. Un bloc en cours d'élaboration est le bloc réutilisable, que vous pouvez utiliser sur différentes pages : si vous modifiez un texte ou une mise en page dans un seul bloc, la modification affectera l'ensemble des blocs.

Cela crée de formidables opportunités pour les développeurs, qui peuvent à présent livrer un projet WordPress au client, avec différents modèles de pages, où l'utilisateur a la liberté d'ajouter et de formater le texte (de manière limitée), mais il ne peut rien faire en dehors des éléments définis. Songez p. ex. à un modèle pour un article à trois colonnes, un modèle pour une page produit, etc.

Mais les possibilités ne s'arrêtent pas là. Le développeur d'une extension de référencement, par exemple, peut ajouter des commentaires aux blocs, de manière à ce que le contenu du bloc soit mieux optimisé pour le référencement.

Découvrez notre hébergement WordPress

Pourquoi un nouvel éditeur ?

Cet éditeur permet d'une part de combler certaines lacunes. Aujourd'hui, le contenu doit en effet pouvoir s'adapter à la taille de tous les écrans (conception adaptative), qu'il s'agisse de ceux d'ordinateurs portables, de tablettes ou de smartphones, et WordPress a souvent du mal avec cela. De plus, d'autres systèmes de gestion de contenu tels que Medium proposent des outils d'édition de texte plus complets, ce qui rend la lecture de longs textes beaucoup plus attrayante.

D'autre part, l'éditeur Gutenberg permet à WordPress d’être préparé pour l'avenir. Il existe davantage d'outils pour éditer les textes, mais ils sont en même temps plus simples. De plus, l'affichage visuel est adapté aux écrans du futur, tels que ceux des casques VR. Dans ce dernier cas, l'utilisateur doit pouvoir décider de, par exemple, visualiser le contenu à gauche de son champ de vision, effectuer des recherches dans la partie inférieure, et publier des commentaires du côté droit. Et tout cela est possible avec les blocs.

Comment Gutenberg fonctionne-t-il dans la pratique ?

Lorsque vous ouvrirez l'éditeur Gutenberg, son minimalisme vous sautera immédiatement aux yeux. Son espace de travail est beaucoup plus vaste, ce qui rend les choses beaucoup plus faciles lorsque vous travaillez à partir de votre smartphone. Sans compter que vous serez aussi moins facilement distrait.

Par défaut, l'éditeur Gutenberg contient les blocs suivants :

  • Blocs de base (image, paragraphe, texte brut, en-tête, citation...)
  • Formatage (citation, tableau...)
  • Éléments de mise en page (disposition du texte en colonnes, bouton, séparateur, ajout d’un tag « lire la suite »...)
  • Widgets (dernier article, catégories)
  • Intégration de contenu (multimédia ou autre) externe

Gutenberg blocks
Si vous déplacez votre curseur sur un bloc, la possibilité vous sera offerte de déplacer un bloc plus haut ou plus bas, de le supprimer, ou de modifier ses paramètres. Vous pouvez aussi aller dans l'onglet Bloc pour accéder à d'autres paramètres.

Quelques nouveautés très pratiques rendues possibles par les blocs :

  • Ajoutez des tableaux en tant que bloc – les extensions ou le bidouillage dans le code HTML ne sont plus nécessaires
  • Formatez du texte en 2, 3 ou 4 colonnes adaptatives grâce au bloc Colonnes
  • Ajoutez une ancre HTML dans un bloc de texte, de manière à pouvoir faire référence directement à ce bloc lorsque vous partagez un article.
  • Ajoutez une citation (pull quote), et choisissez l’option supplémentaire align wide ou align full-width
  • Utilisez un bouton d’incitation à l’action via le bloc Bouton.
  • Pour votre contenu multimédia, le bouton Embed vous offre un vaste choix de contenus externes provenant de YouTube et Instagram, mais aussi de Reddit, Meetup, Tumblr, Vine, etc.
  • Voulez-vous accéder au code HTML ? Cliquez sur les trois petits points dans le coin supérieur droit et sélectionnez l'éditeur de code.

Testez Gutenberg

GutenbergComme nous l'avons déjà mentionné au début de cet article, Gutenberg est actuellement en phase de développement, et approche de sa version définitive 1.0. Lorsque WordPress 5.0 sera disponible, en principe d'ici fin 2018, l'éditeur Gutenberg deviendra l'éditeur par défaut. Cela étant, si vous ne vous en sortez pas dans Gutenberg, vous pourrez toujours installer l'éditeur classique sous la forme d'un plug-in.

Voulez-vous tester Gutenberg dès maintenant ? C'est possible, mais nous vous recommandons d'effectuer le test dans un environnement de test ou de simulation, et non dans un environnement de production. Vous aurez également besoin au minimum de la version 4.8 de WordPress. Au mois de septembre 2018, l'éditeur avait déjà été téléchargé plus de 1,7 million de fois.

Pour installer Gutenberg, allez dans Extensions > Ajouter dans votre tableau de bord WordPress. Recherchez "Gutenberg" et cliquez sur Installer maintenant. Désormais, dans votre tableau de bord, sous Articles, vous aurez la possibilité d'ouvrir l'éditeur Gutenberg.

Voulez-vous tester d’autres extensions ?

Si vous avez l’esprit d'aventure et que vous avez envie de tester d'autres outils qui ont une chance d'être inclus dans le noyau de WordPress à l'avenir, n'hésitez pas à essayer (à vos risques et périls !) les extensions suivantes, qui sont très intéressantes :

  • Two Factor: ajoutez une double authentification de façon à ce que vous et d’autres utilisateurs du back-end puissiez vous connecter de façon encore plus sûre
  • Customize Posts: visualisez immédiatement comment vos modifications influencent le front-end de votre site web
  • Dark Mode: apporte une palette de couleurs nocturne à votre tableau de bord

Pour plus d’extensions en version bêta, rendez-vous sur le site web de WordPress.

Voulez-vous en savoir plus sur le projet Gutenberg ? Les vidéos des Gut Guys sur YouTube vous donneront des astuces pratiques, et l’exposé de Morten Rand-Hendriksen au WordCamp 2017 à Nashville vous informera sur la genèse et l’avenir de Gutenberg.

Hébergement WordPress chez Combell