Gutenberg, le futur de l’édition de contenu sur WordPress

Par 19 juin 2017WordPress

WordPress se dirige tranquillement vers sa version 5.0 et après la sortie de la version 4.8 le mois dernier et la version 4.9 attendue fin 2017, il sera plus que jamais question d’améliorer l’activité éditoriale de l’administration de vos sites.

Matt Mullenweg dévoile Gutenberg, le futur éditeur visuel

Nous avions terminé notre billet sur les nouveautés de WP 4.8 par un lien vers une démo de Gutenberg, le futur éditeur visuel. Cet éditeur est maintenant disponible sous la forme d’un plugin, librement téléchargeable sur le dépôt officiel. L’objectif est de faire tester cet éditeur par un maximum d’utilisateurs, afin d’obtenir un produit le plus robuste possible. Ce principe de test préalable via une extension beta est utilisé pour toutes les évolutions majeures du CMS car il permet d’accumuler des milliers de retours utilisateurs, ce qui est la meilleure façon de tester la pertinence et la robustesse du code développé.

Gutenberg sera donc testé sous cette forme pendant les mois qui nous séparent de la version 5.0.

I think we can do 4.9 before we merge Gutenberg – ideally over 100,000 active installs first
[FR] Je pense que nous devons sortir la version 4.9 avant d’intégrer Gutenberg au cœur WP – Idéalement, il faudrait d’abord atteindre 100 000 installations actives

— Matt Mullenweg, pendant le WordCamp Europe 2017 à Paris

Le co-créateur de WordPress et fondateur de la société Automattic a dévoilé le fonctionnement de Gutenberg lors du Wordcamp Europe 2017 que nous avons eu la chance d’accueillir à Paris la semaine dernière. La vidéo de l’interview de Matt est disponible en ligne :

Quoi de neuf pour les utilisateurs de WordPress ?

Une logique éditoriale basée sur l’utilisation de blocs de contenus

Right now WordPress makes you learn a lot of concepts… Gutenberg lets you learn it once and use it everywhere.
[FR] Actuellement, WordPress vous fait apprendre beaucoup de concepts… Gutenberg vous permet d’apprendre une fois, puis d’utiliser ça partout

— Matt Mullenweg, pendant le WordCamp Europe 2017 à Paris

L’idée est de découper les différentes unités éditoriales de votre page en autant de blocs de contenus : titres, intertitres, paragraphes, images, galeries, citations, listes, etc. Chaque bloc de contenu devient alors une entité éditoriale à part entière que l’on peut alors modifier, déplacer, mettre en forme, positionner…

C’est un peu ce que font les page builders actuels en vous permettant de mettre en forme vos contenus en les manipulant par blocs. Sauf que ces constructeurs de pages ont plusieurs défauts :

  • Ils rendent complexe l’édition de contenus et nécessite un apprentissage spécifique, en plus de l’apprentissage de WordPress. Il sont relativement mal intégrés dans le CMS : leur logique n’est pas celle de WP.
  • Le code produit est lourd, verbeux, peu accessible (aux personnes présentant un handicap comme aux moteurs de recherche) et peu performant. Cela s’en ressent au niveau de la vitesse d’affichage des pages, mais aussi du back-office.
  • De grands pouvoirs impliquent de grandes responsabilités : les page builders intègrent tout un tas de fonctionnalités non natives, qui peuvent être utilisés au détriment de la charte graphique du site. C’est ce que j’appelle le syndrome du site-sapin de noël : on peut donner la mise en forme que l’on veut aux éléments de contenus, ce qui est potentiellement dévastateur en terme de cohérence graphique et visuelle.

Il y en a d’autres, mais revenons à Gutenberg 🙂

Voici comment se déroule l’édition des blocs de contenus :

Les blocs de contenus riches proposés par Gutenberg

Ils sont répartis dans 5 grandes rubriques :

  • Communs : bloc de contenus libres, titres, images, texte, listes, citations et galeries.
  • Formattage : citation embarquée, tableaux, code source, texte préformatté
  • Blocs de mise en page : séparateur, bouton/CTA… et c’est logiquement ici qu’on retrouvera ensuite le colonnage, etc.
  • Widgets : potentiellement tous les widgets disponibles sur WordPress
  • Embed : contenus embarqués depuis une plateforme web de votre choix, et la liste est longue !

Une fois votre bloc ajouté, vous pouvez le modifier, y placer votre contenu, le déplacer où vous voulez dans la page, revenir en arrière si vous avez fait une bêtise… 😛

Une intégration facilitée des widgets

Gutenberg va permettre d’intégrer facilement n’importe quel widget sur vos pages de contenus. Pour l’instant, cela fonctionne uniquement avec un widget « Latest posts » mais d’une part les autres widgets natifs vont être ajoutés ; d’autre part les développeurs pourront de leur côté créer et ajouter tous types de widgets à Gutenberg.

Quelques questions autour de Gutenberg…

Comme toute évolution majeure de WordPress, celle-ci ne manque pas de poser un certain nombre de questions.

En premier lieu, « est-ce que je serais obligé de l’utiliser ? » 🙂

Bouton d'accès à Gutenberg dans le back-office WordPress

Sur l’extension servant de test, Gutenberg n’est qu’une option d’édition. On peut choisir de l’utiliser ou bien d’utiliser l’éditeur classique. Lors de la sortie de WordPress 5.0, il est probable que Gutenberg soit présent par défaut mais désactivable manuellement, un peu comme le mode “d’écriture zen” qui est en place depuis la version 4.8.

Deuxièmement, il y a la question des plugins qui se greffent sur l’éditeur de contenus. C’est le cas de certains de mes plugins (par exemple Abbreviation button for TinyMCE) et de très, très, très nombreuses extensions. Joost de Valk, auteur du plugin de SEO Yoast s’est d’ailleurs lui aussi posé la question sur son blog pendant le Wordcamp Europe, et la réponse est assez simple : les auteurs de plugins vont tout simplement devoir faire évoluer leur code et réfléchir à l’implémentation de leurs outils sur Gutenberg. C’est aussi pour ça que l’équipe responsable du développement du cœur WordPress a rendu Gutenberg disponible très tôt : pour que les développeurs aient le temps de jouer avec et de se l’approprier !

En ce qui me concerne, j’ai pu déjà pas mal m’amuser avec Gutenberg, et d’ailleurs je viens d’en compléter la traduction en français, qui sera automatiquement intégrée au plugin dès validation par la communauté 🙂

Pour résumer Gutenberg est vraiment le futur de l’édition de contenus sur WordPress, et c’est un futur proche donc stay tuned !

Et le mot de la fin, s’il te plaît Matt…

Je suis bien d’accord avec toi Matt ! Merci pour cette conclusion très pertinente 😀

 

Jb Audras

Auteur Jb Audras

Chef de projet technique / WordPress à l’Agence Whodunit, auteur d’extensions et coordinateur du meetup WP Valence — @audrasjb —

Tous les articles de Jb Audras

Join the discussion 11 Commentaires

  • Très bon résumé, hâte de voir la suite…

  • Willy dit :

    Bonjour,
    Sympa comme article ! Pour avoir testé un peu, j’avoue que je suis encore mitigé… Notamment au niveau de l’enregistrement des blocs : ce sont clairement des shortcodes déguisés (et avec moins de possibilité, pour l’instant). Du coup tout est enregistré dans l’éditeur, wrappé dans des commentaires HTML (de la même façon que qtranslate gère le multilangue). Il est donc plutôt complexe de rebasculer de Gutenberg vers une édition classique.

    Personnellement je trouve l’idée bonne, mais pas assez mure pour l’instant pour inviter les développeurs de plugins tierces dans la partie. Par exemple le fait qu’on puisse soit utiliser les attributs – soit le contenu – mais pas les deux – pour rendre un bloc me parait très problématique.

    Je vais donc suivre le projet avant de m’attaquer à la compatibilité de mes plugins.
    Et toi niveau architecture du plugin, qu’en penses-tu ?

  • Jb AudrasJb Audras dit :

    Hello Willy merci pour ton commentaire 🙂

    Si je laisse parler le Jb Audras développeur, je suis bien d’accord avec toi : ces pseudos-commentaires HTML ne vont pas sans rappeler de sombres heures de l’histoire concernant certains plugins (qTranslate étant un très bon exemple pour le coup !) 😀

    En revanche, je pense que le fait de proposer Gutenberg à peu près un an avant sa sortie programmée sous la forme d’une extension est justement exactement la chose à faire : c’est le meilleur moyen pour la core team d’obtenir ce type de retour et de no-go de la part de la population de développeurs impliqués comme toi et moi. Donc, désolé, je sais que c’est plutôt politiquement correct – cela dit je n’en pense pas moins – mais il me semble que la démarche ne peut qu’aboutir à une fonctionnalité top et à ce que j’en sais, ces retours ont été d’ores et déjà formulés par pas mal de monde et vont forcément être pris en compte par la team core.

    En attendant, il y a quand même de quoi s’amuser, et si j’étais plutôt sceptique sur le “mode zen” de “Evans” (WordPress 4.8), je dois bien avouer que l’UX de Gutenberg me plaît beaucoup ! 🙂

    A suivre !
    Jb

  • Jb AudrasJb Audras dit :

    Et au passage j’en profite pour remercier Thierry Gustin pour ses louanges <3

  • benoitos dit :

    Merci de votre article !
    Est ce que Gutenberg modifiera l’usage de builders comme Divi Builder ou Elementor ? J’ai tendance à vouloir installer Elementor sur plusieurs sites mais du coup est-ce que ce choix est à remettre en question avec l’arrivée de Gutenberg ?

  • Thierry.A dit :

    Super intéressant ! Vivement que je l’ai sous la main. J’espère qu’il sera entièrement traduite en français. ????

  • Jb AudrasJb Audras dit :

    Hello Benoitos,

    Potentiellement, oui je pense perso qu’il est possible que Gutenberg se substitue aux page builders, mais :
    – Gutenberg n’est clairement pas encore un produit utilisable tel quel, c’est bien trop tôt ! Et techniquement il va beaucoup changer en un an de développement. Il y a déjà eu beaucoup de retours remontés.
    – Les éditeurs de page builders ont un énorme réservoir d’utilisateurs qui ne veulent pas changer leur habitude (normal quand tu as tellement galéré pour apprendre à maîtriser VC, tu n’as pas envie d’en changer 😉 ) et ils ont maintenant un an pour améliorer leurs extensions. Le code de Gutenberg est librement consultable et utilisable par tout le monde. Si j’étais à leur place je ne laisserais pas Gutenberg venir me challenger en sortant une nouvelle version compétitive juste avant la sortie de WP 5.0 😀

    Hello Thierry A.
    Merci !
    Et oui ! Oui Gutenberg est déjà entièrement traduit en français ! Pas de souci ! Et je peux d’autant plus te le confirmer que je suis justement PTE de ce projet, c’est à dire responsable de sa traduction francophone 🙂

  • tostain dit :

    Merci Jb de ta réponse, Gutenberg va donc certainement faire évoluer les fonctionnalités des builders pour qu’ils conservent leur longueur d’avance.

  • bruno dit :

    Bonjour,

    J’ai créé des sites uniquement pour moi ou mes proches, je suis pas “codeur”,
    mais de ce que j’ai pu lire à droite à gauche, il y a et ce dans de nombreux pays,
    beaucoup de développeurs et d’entreprises de créations de sites, qui craignent que
    l’intégration dans le “cœur” de WordPress (puisque cela est envisagé) ne “casse”
    certains sites déjà en ligne.

    N’étant pas “codeur” je ne sais pas trop quoi penser de ces réactions ?

    Est-ce que ce n’est pas une tentative de tout simplement se mettre au niveau de wix et autres
    trucs du genre et ainsi de permettre à wordpress.com d’augmenter “ses clients” ?

    Enfin bon, je vois sur le web que cela déclenche pas mal de réactions et je me pose des questions
    quand au devenir des 5 sites que j’ai en ligne, car j’utilise divi pour les 5.

  • Jb AudrasJb Audras dit :

    Bonjour Bruno, et merci pour ce commentaire.
    Plusieurs points :
    – Tiens donc, un article a justement été publié sur WordPress.org à ce sujet, juste à l’instant ! https://make.wordpress.org/core/2017/08/31/gutenberg-themes/ C’est assez instructif 🙂
    – La pratique de la core team WordPress a toujours été d’assurer une rétro-compatibilité excellente, ce qui est rassurant pour les sites qui ne seront pas gutenbergo-compatibles 🙂
    – les réactions des confrères sont compréhensibles, et très saines dans une communauté open-source ! Mais cela étant dit, Gutenberg n’est pas un page builder classique : plutôt que d’utiliser un système de shortcodes qui va rendre le site inutilisable en cas de désactivation du page builder, il utilise des commentaires HTML ce qui reste relativement plus “secure” en terme de dépendances à l’outil.
    – enfin, Gutenberg sera activable/désactivable et pas imposé 🙂

  • bruno dit :

    Bonjour Jb,

    Ok merci pour tes infos et le lien., vais aller lire ça.

    Désactivable, chouette, ça me rassure.

    Merci 🙂

Laissez une réponse

Nous contacter

contact@whodunit.fr

18 rue neuve des boulets
75011 Paris
01 76 50 55 40

Suivez-nous