WordPress 5.0 et l’éditeur Gutenberg arrivent le 6 décembre 2018

Mathieu Chartier CMS (WordPress...) 6 commentaires

WordPress est le CMS le plus connu et le plus utilisé au monde, de très loin devant ses poursuivants que sont Drupal, Joomla ou encore Magento. Sa force provient de sa communauté mais aussi de son versioning quasi rétro-compatible à chaque fois depuis des années. Mais pour la première fois depuis bien longtemps, WordPress 5.0 va quelque peu perturber l'équilibre naturel de l'outil, avec l'arrivée d'un nouvel éditeur de contenus appelé Gutenberg.

Dans le cycle de développement de WordPress 5.0, la nouvelle version a été repoussée à plusieurs reprises, mais la date du 6 décembre 2018 est annoncée. Cette dernière a même été confirmée par Matt Mullenweg, le co-fondateur de WordPress (depuis 2003). Afin de réparer d'éventuels bugs imprévus, la version 5.0.1 sera ouverte dans la foulée pour que la communauté puisse apporter des petites mises à jour de correction, notamment lors d'un Wordcamp US du 9 décembre 2018.

Cet article a pour but de vous préparer au mieux à ce qui vous attend dès demain (car oui, c'est déjà demain le 6 décembre...) mais aussi à mieux comprendre comment utiliser Gutenberg. Si cela peu déranger les utilisateurs qui se sont à peine habitués à l'éditeur wysiwyg actuel, dites-vous que WordPress 5 a pour objectif de tenir son rang de leader du marché mais aussi d'apporter encore plus de souplesse à l'édition de contenus, à l'instar d'un Wix ou de l'émergent Squarespace par exemple. Dans le dernier rapport de Tiobe, nous pouvons voir notamment WordPress comme solide leader, avec 32,5% de parts de marché dans le monde (tous types de sites web confondus) et presque 60% de parts rien qu'au sein des CMS, avec des concurrents largués après lui.

Parts de marché des CMS dans le monde

Que faire face au tsunami de l'éditeur Gutenberg ?

Dans les faits, pas grand chose. En effet, tous les contenus déjà existants dans WordPress sont en général intégrés automatiquement dans le nouvel éditeur Gutenberg, au sein d'un "bloc" de contenu (wysiwyg). Si d'aventure vous rencontriez des bugs persistants avec votre thème ou votre usage de WordPress, vous pouvez tout-à-fait revenir à l'ancien éditeur de contenus (celui que vous connaissez déjà...) en téléchargeant le plugin Classic Editor créé à cet effet.

En soi, une large majorité des sites web va passer à Gutenberg sans encombre, bien que le nouvel éditeur risque d'être déroutant à l'usage pour les moins connaisseurs d'entre nous. Si votre but est uniquement de gérer un seul bloc de texte, comme c'est souvent le cas actuellement, alors cela se passera sans trop de problème, il faudra juste retrouver les options qui ont souvent changé d'emplacement. La capture suivante montre comment un contenu existant est passé sans problème dans un bloc de texte de Gutenberg, sans aucune action à réaliser. Pour ce qui est de l'interface et de l'usage, nous y reviendrons dans la suite de cet article...

Passage à Gutenberg après le Classic Editor de WordPress 5

En revanche, bon nombre de sites web qui utilisent des systèmes personnalisés de gestion de contenus (comme ACF par exemple ou équivalent) ou des constructeurs de pages (page builders comme Page Builder de SiteOrigin, BeaverBuilder, Elementor, Visual Compozer, Divi...) peuvent éventuellement rencontrer des problèmes de compatibilité. Ces cas ont été envisagés lors de la conception de Gutenberg, donc la majorité d'entre eux devraient être nativement réglés dès l'émergence de WordPress 5.0. Pour ceux qui rencontreraient malgré tout des problèmes, l'installation du plugin Classic Editor sera sûrement une solution provisoire (ou pérenne) pour s'en sortir.

Quoi qu'il en soit, les agences web ou les formateurs comme Daniel Roch (Seomix), Fabrice Ducarme (WP-Formation), Alexandre Bortolotti (WP Marmite) ou même moi risquons d'être quelque peu rappelé pendant les semaines à venir tant Gutenberg risque de dérouter les moins aguerris. N'hésitez donc pas à lire des informations à propos du nouvel éditeur de contenus ou à vous former à WordPress pour mieux maîtriser les changements (mes lecteurs fidèles savent que je fais extrêmement rarement de la publicité dans mes articles, donc si j'en fais, c'est qu'il y a sûrement une bonne raison pour une fois... ^^).

Comment utiliser l'éditeur Gutenberg de WordPress 5 ?

Gutenberg est plutôt intuitif pour la majorité de son usage, mais il peut perturber au premier abord. Certes, quelques options ou réglages manquent de visibilité ou de clarté, mais l'ensemble est plutôt ergonomique. Tout le système repose sur des "Blocs", à savoir des unités de contenus. Vous pouvez donc créer des blocs de texte, des blocs d'ajout d'images ou de vidéos, des blocs structurels (colonnes par exemple), etc. Avec le temps, les concepteurs d'extensions de la communauté ainsi que les équipes de WordPress vont enrichir la liste de ces blocs afin de fournir aux usagers de plus en plus de possibilités, à l'image de ce qui se fait dans les constructeurs de page.

Créer des blocs dans Gutenberg avec WordPress 5

Le plus gros défaut de Gutenberg est sûrement son manque de souplesse, en comparaison avec ce que l'on peut connaître dans un page builder comme Tailor, Elementor ou Visual Compozer par exemple. La mise en place des colonnes est sûrement ce qui m'a le plus énervé pour être totalement honnête. En effet, à ce jour, vous devez absolument penser à votre structure (sans erreur) dès la mise en place des colonnes. Il n'est pas possible de modifier les colonnes créées et notamment de les intervertir. Le glisser-déposer est un manque important qui limite les possibilités une fois les blocs de colonnes déjà créés. Il faut donc bien réfléchir avant de se lancer dans la conception des colonnes...

Pour ce qui est des blocs les uns sous les autres, cela est beaucoup plus simple en revanche. Il est très simple de venir ajouter des Blocs d'images sous un Bloc de texte, etc. Il suffit d'ajouter sur le "+" situés en haut de l'écran (à gauche) ou sur les "+" qui s'ajoutent lorsque l'on survole le haut ou le bas d'un bloc existant. Une fois plusieurs blocs construits les uns sous les autres, vous pouvez aisément inverser leur ordre à l'aide de flèches présentes à cet effet.

Ajouter un bloc sous un bloc dans Gutenberg de WordPress 5

Parmi les options intéressantes, nous pouvons dupliquer un bloc ou un groupe de blocs, supprimer des blocs ou encore modifier en HTML chaque bloc si nécessaire. C'est plutôt pratique pour certains usages. La duplication permet notamment de recréer des types de blocs identiques pour concevoir une interface homogène, sans risquer d'obtenir un résultat différent en créant les blocs indépendamment. Retenez que pour chaque bloc, la colonne à droite de l'interface permet de personnaliser les options du bloc, et donc d'aller plus loin dans l'optimisation des contenus (adapter le nombre de colonnes par exemple, même si ce n'est pas hyper souple...).

Usage avancé de l'éditeur Gutenberg de WordPress 5

Loin de moi l'idée de faire un tutoriel complet en quelques lignes, vous pourrez trouver de nombreuses informations dans la documentation du CMS ou sur des blogs spécialisés. Je terminerai donc mon tour d'horizon par un dernier point qui peut être déroutant pour les usagers de l'ancien éditeur. En effet, certaines extensions ajoutaient de nouveaux boutons ou nouvelles possibilités pour la gestion des contenus. Si ces boutons semblent avoir disparus, il n'en est rien en réalité pour tous les plugins qui ont bien été programmés. J'ai pris l'exemple de Shortcode Ultimate ici. Historiquement, il ajoutait un bouton pour ajouter un shortcode au-dessus de l'éditeur de texte. Désormais, une icône en forme de shortcode s'ajoute dans la barre d'outils, comme le montre la capture suivante. Attention toutefois aux extensions qui n'ont pas prévu cette intégration, car cette fois, cela risque bien d'avoir disparu...

Ajout des anciens boutons d'options de plugins dans gutenberg

Voilà, j'espère que ce petit tour d'horizon vous rassurera un peu et vous préparera à ce qui attend tous les utilisateurs de WordPress dès le 6 décembre 2018...