WordPress : l’éditeur de texte Gutenberg passé au crible !

Équipe Webmarket'
L’équipe WordPress travaille depuis longtemps sur le projet Gutenberg, sensé révolutionner la facilité avec laquelle un administrateur peut créer du contenu sous WordPress. Il remplacera l’éditeur visuel actuel, TinyMCE, avec […]
De nous à vous

14 février 2018

L’équipe WordPress travaille depuis longtemps sur le projet Gutenberg, sensé révolutionner la facilité avec laquelle un administrateur peut créer du contenu sous WordPress. Il remplacera l’éditeur visuel actuel, TinyMCE, avec l’arrivée de la version 5.0 de WordPress, dans le courant de l’été 2018. L’extension est disponible dans une version bêta.

Qu’est-ce que Gutenberg ?

Gutenberg est un éditeur visuel qui va remplacer TinyMCE dans la version 5.0 de WordPress. La version 5.0 de WordPress est prévue pour cet été. Là où TinyMCE devait utiliser des shortcodes pour une mise en forme avancée vos pages et articles, Gutenberg fonctionne comme un véritable éditeur WYSIWYG (ce que vous voyez sera ce qui apparaîtra). C’est tout de même bien plus pratique et évite autant que possible l’utilisation de solutions tierces lourdes de visual builders.

Il vise donc à simplifier encore plus la création de contenu. Il fonctionne avec une philosophie de création par « blocks » : chaque morceau de votre article (titres, paragraphes, images, etc.)  est donc un élément à part entière, que l’on peut modifier à souhait.

Découverte des éléments Gutenberg

Les blocks actuellement disponibles sont :

  • Blocks communs
    • Audio
    • Cover Image (image de couverture)
    • Gallery (galerie d’images)
    • Heading (titre)
    • Image
    • List
    • Paragraph
    • Quote (citation)
    • Subhead (sous-titre)
    • Video
  • Blocks de mise en forme
    • Code
    • Classic
    • Custom HTML (HTML personnalisé, déjà présent dans les widgets)
    • Preformatted (préformaté)
    • Pullquote (citation tirée de la même page)
    • Table (tableau)
    • Verse (vers pour la poésie)
  • Blocks de disposition
    • Button (bouton)
    • More (balise de rupture de contenu « Lire la suite »)
    • Separator (ligne de séparation)
    • Text columns (colonnes de texte)
  • Blocks Widgets
    • Categories
    • Latest Posts (derniers articles)
    • Shortcode

Il existe également des éléments intégrés. Comme vous pouviez le faire auparavant avec une vidéo YouTube ou Vimero, vous pouvez désormais intégrer de nombreux autres contenus riches provenant de sources variées. Vous noterez que de nombreux éléments sont surtout destinés à un public américain ou au moins anglophone (Hulu, Polldaddy, CollegeHumor), mais de nombreuses intégrations restent cependant intéressantes, comme Facebook, YouTube ou encore SoundCloud :

  • Embed (une iframe pour tout ce qui doit être intégré qui ne peut pas l’être par défaut)
  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • CollegeHumor
  • Dailymotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv

Chaque élément peut être personnalisé en cliquant dessus et en allant dans les paramètres du block. Ainsi, une image de couverture peut comporter un texte et ses mises en forme, un lien, mais peut aussi déterminer si l’image reste fixe ainsi que sa luminosité (pour faire ressortir le texte). Les colonnes de texte vont de 2 à 4 colonnes et on retrouve, comme sur de nombreux blocks, la possibilité d’attacher une classe CSS additionnelle. Pratique pour récupérer la charte visuelle du reste du site facilement, ou au contraire s’en démarquer.

Le sous-menu de chaque élément dispose de nombreuses options, y compris la possibilité de faire de ce block un block réutilisable. Même si cette fonctionnalité est encore boguée, elle est très pratique pour conserver une homogénéité forte entre vos articles et vos pages. Sans compter que cela vous fait gagner du temps.

bloc gutenberg

Notre avis

Même s’il va y avoir un temps d’adaptation à la nouvelle interface, celle-ci s’avère pratique au jour le jour. L’esprit d’accessibilité de la plateforme est reprise en main, les outils sont efficaces. Vous aurez plaisir à travailler sur de nouveaux articles ! Aider vos clients, faire découvrir de nouveaux produits, tout sera plus simple. Gutenberg sera compatible avec nos thèmes développés sur mesure. Reste à savoir si nous pourrons profiter de Gutenberg avec certains thèmes tout-en-un fonctionnant sur les shortcodes. Car Gutenberg n’est pour le moment pas compatible avec les thème intégrant un visual builder. Nous vous recommandons de nous contacter pour effectuer la mise à jour vers WordPress 5.0 cet été.

Points importants à retenir de cet article

  • Gutenberg va remplacer TinyMCE dans WordPress 5.0 ;
  • Gutenberg n’est pas compatible avec les visual builders ;
  • WordPress 5.0 sort en été 2018 ;
  • Ce nouvel éditeur est un vrai petit bonheur !

Aidez-nous à partager l’info !

Faites découvrir à vos abonnés Twitter cet article. Cliquez ici pour twitter directement.

Si vous avez apprécié cet article du blog BM Services, abonnez-vous.

Comment s’inscrire au blog BM Services ?

  • Cliquez ici pour vous abonner via RSS.
  • Vous pouvez aussi vous abonner via Feedly.


Équipe Webmarket'

Derniers articles

KPI : que faut-il surveiller sur votre site internet ?

Les KPI sont des indicateurs clés de performances (Key Performance Indicator en anglais) permettant de…

Objectif SMART : méthode, avantages et exemple

Cet acronyme ne vous dit peut-être rien mais il constitue un allié de taille pour…

Canva : l’outil de création visuelle incontournable

Comment parler de création graphique sans parler de cet outil de design et de communication…