Plonger dans le nouvel éditeur Gutenberg de WordPress (Pour et Contre)

L’éditeur visuel actuel de WordPress n’a pas eu beaucoup de changements au cours des années et, est en grande partie resté à peu près le même. Même si ce n’est pas une mauvaise chose, beaucoup pensent qu’il est temps de changer. D’autres platesformes telles que Medium ou Ghost offrent une expérience vraiment unique et rafraîchissante pour les rédacteurs, alors pourquoi WordPress ne peut pas ? Eh bien, de nombreux contributeurs et bénévoles ont travaillé sur le nouvel éditeur Gutenberg de WordPress qui est dans les coulisses depuis plus de 6 mois. Leur but ? Rendre l’ajout de contenu riche à WordPress simple et agréable. Aujourd’hui, nous allons plonger dans le nouvel éditeur et discuter du pour et du contre.

• Qu’est-ce que Gutenberg ?
• Comment installer Gutenberg
• Explorer Gutenberg
• Avantages de l’éditeur Gutenberg de WordPress
• Inconvénients de l’éditeur Gutenberg de WordPress
• Essayer la démo de Gutenberg

Qu’est ce que Gutenberg ?

Gutenberg est un nouvel éditeur pour WordPress. Il porte le nom de Johannes Gutenberg, qui a inventé une presse à caractères mobiles il y a plus de 500 ans. L’éditeur visuel actuel oblige beaucoup d’entre nous à utiliser des shortcodes et du HTML pour faire fonctionner les choses. Leur but est de rendre cela plus facile, en particulier pour ceux qui débutent avec WordPress. Ils embrassent les « petits blocs » et espèrent ajouter des options de mise en page plus avancées. Vous pouvez consulter l’exemple officiel. Pour être juste envers les développeurs et l’équipe travaillant sur ce projet, il est important de noter qu’il est actuellement en phase bêta et de test, il n’est pas encore prêt à fonctionner sur les sites de production. Mais nous voulions plonger et voir par nous-mêmes de quoi il s’agit. Nous nous assurerons de garder ce message à jour au fur et à mesure que les améliorations et les changements sont mis en ligne. Il semble qu’avant que cela soit officiellement fusionné dans le noyau WordPress, Matt Mullenweg (le fondateur) espère obtenir 100 000 installations actives. Ce qui est parfaitement logique, car cela résoudra un grand nombre de bogues, de problèmes et leur permettra de traiter de nouvelles idées et demandes de fonctionnalités.

“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU

— Bridget Willard (@YouTooCanBeGuru) June 17, 2017

Parce que Gutenberg est encore en phase de test, l’équipe qui y travaille encourage les gens à l’essayer et à laisser des commentaires dans le forum de support WordPress ou à ouvrir une issue sur GitHub. Ou vous pouvez vous joindre aux discussions qui ont lieu dans #core-editor sur le Slack du coeur de WordPress. Gutenberg sera livré avec WordPress 5.0.

Comment installer Gutenberg

Au moment d’écrire ces lignes, l’extension Gutenberg a actuellement un peu plus de 20 000 installations actives avec plus de 290 000 téléchargements au total et une cote de 2,5 sur 5 étoiles. Il nécessite également la version 4.8 de WordPress pour l’utiliser. Vous pouvez télécharger la dernière version de Gutenberg à partir du répertoire de WordPress ou en la recherchant dans votre tableau de bord WordPress sous « Ajouter nouveau » Extensions. Encore une fois, nous vous recommandons de l’installer sur un site d’essai ou d’utiliser l’environnement de développement de votre hébergeur.

Explorer Gutenberg

Après avoir installé Gutenberg, vous verrez des liens sous vos articles qui vous permettent d’ouvrir l’éditeur Gutenberg. Ils ne remplacent pas l’éditeur WordPress par défaut, ce qui est une bonne chose à notre avis, car pendant la phase de test il vous permet d’aller en avant et en arrière. A partir de la dernière version du répertoire, il supporte désormais les types de pages personnalisés et les pages. Important : Une fois WordPress 5.0 sorti, Gutenberg sera l’éditeur par défaut (#41316), mais vous aurez toujours la possibilité d’installer l’éditeur classique si vous rencontrez des problèmes de compatibilité (comme vous le voyez dans la boîte d’information ci-dessous). Gutenberg ajoute un nouveau menu dans votre tableau de bord WordPress qui contient une démo (voir ci-dessous) et la possibilité de créer un nouvel article. Comme vous pouvez le voir, l’éditeur visuel a un aspect très différent de celui auquel vous êtes probablement habitué. Il offre une sensation très similaire à Medium, ce que nous trouvons génial. Si vous regardez à la fois l’éditeur Gutenberg et l’éditeur visuel actuel côte à côte (cliquez pour agrandir), vous pouvez voir que Gutenberg a un plus grand espace d’écriture, en particulier sur les petits écrans. Pour les gens qui écrivent sur des ordinateurs portables, Gutenberg va être un beau changement de rythme ! Il est vraiment centré sur « l’écriture » et essaie de fournir un environnement moins distrayant. Dans l’éditeur Gutenberg de WordPress, vous pouvez cliquer sur « Paramètres d’article » pour supprimer la barre latérale droite. Et bien que cela vous donne accès à encore plus de votre écran, il est à mi-chemin avec le mode d’écriture sans distraction actuellement disponible. Nous avons essayé d’utiliser Shift+Alt+W pour le lancer dans l’éditeur Gutenberg mais cela ne semble pas encore fonctionner. Il se pourrait qu’ils ne l’aient pas encore ajouté. Mais nous sommes presque sûrs qu’ils le feront, car il y a probablement pas mal de gens qui l’utilisent. Pour basculer entre le mode éditeur visuel et l’éditeur de texte (code), il y a maintenant un menu déroulant en haut à gauche. Vous remarquerez qu’il y a maintenant des commentaires HTML au début et à la fin de chaque bloc. Par exemple, ce qui suit vous permet de créer un bloc de texte.

<!-- wp:core/text --> <!-- /wp:core/text -->

Ceci vous permet de créer les blocs directement à partir du mode éditeur de texte. Cependant, il ajoute aussi beaucoup plus d’encombrement que ce à quoi vous êtes probablement habitué si vous éditez dans ce mode. Lorsque vous mettez en surbrillance un bloc, il existe des options pour le déplacer facilement vers le haut ou vers le bas à l’aide des flèches, le supprimer ou aller dans les paramètres du bloc. Ceci est très similaire aux contrôles disponibles sur Medium. Nous avons également été surpris par la qualité de son fonctionnement sur mobile dès sa sortie. Si vous avez besoin de faire une insertion rapide d’image ou d’ajouter un paragraphe avant de publier un message en déplacement, il semble que Gutenberg va rendre cela très facile. Une des premières choses que vous remarquerez probablement est que la barre d’outils TinyMCE que vous avez l’habitude de voir depuis des années a disparu. Elle est maintenant remplacée par un menu déroulant si vous cliquez sur le bouton « Insérer ». Eh bien, c’est parce qu’il semble que Gutenberg essaie de se débarrasser de sa dépendance à l’intégration de TinyMCE. Ou pas ? Voici ce qu’en dit Matt Mullenweg.

« Ce que nous essayons de faire, c’est de le décaler pour que vous n’ayez à apprendre les blocs qu’une seule fois et une fois que vous apprenez le bloc image, il peut être dans un message, dans une barre latérale, dans une page, dans un type de message personnalisé, et cela fonctionnera exactement de la même manière. Tout est intégré avec lui, disons un plugin qui apporte vos photos de Google ou votre Dropbox, cela fonctionnera maintenant partout. » — Matt Mullenweg (src: WP Tavern)

Cependant, Andrew Roberts, le chef de projet de l’équipe TinyMCE, nous a également contacté et a clarifié quelques points concernant ce qui se passe avec TinyMCE et Gutenberg.

Je fais partie de l’équipe Gutenberg depuis le début. Il s’agit d’un effort conjoint. Il est probablement intéressant de noter que le moteur d’édition TinyMCE est le moteur qui alimente le composant « éditable » qui, à son tour, alimente la plupart des blocs. Le bloc Table par exemple. Il est probable que cela se poursuivra dans un avenir prévisible. De plus, le bloc texte classique est essentiellement l’éditeur TinyMCE. L’importance qu’on lui accorde dépend probablement de la rétroaction de la communauté. Il y a en fait une Pull request (#1394) en cours d’exécution qui fait essentiellement de Gutenberg une enveloppe pour l »ancien’ éditeur afin que les extensions et boutons TinyMCE existants fonctionnent. Reste à voir si cela est inclus. Quoi qu’il en soit, il est probable que les équipes du coeur de WP et de TinyMCE travailleront ensemble pour s’assurer qu’une expérience utilisateur de type traitement de texte continue de vivre dans WordPress. Même si cela finit par devenir une extension. Dans le même ordre d’idées, l’une des raisons pour lesquelles nous avons travaillé sur le projet Gutenberg avec l’excellente équipe de Gutenberg a été d’apporter ces concepts à la communauté TinyMCE au cours des 12 prochains mois. Cela vous permettra d’intégrer des concepts d’édition basés sur des blocs dans votre propre application personnalisée. — Andrew Roberts

Voici ci-dessous quelques nouveaux blocs que nous trouvons plutôt cools.

Bloc de table et bloc de colonnes de texte

Les tables simples sont beaucoup plus simples maintenant, car vous pouvez les insérer sous forme de blocs dans l’éditeur. Auparavant, vous deviez utiliser une extension tierce ou du code HTML. Actuellement, vous ne pouvez ajouter qu’un tableau 2×2 avec l’option d’insertion et vous ne pouvez pas le styliser sans aller dans la vue texte. Cela dit, nous supposons que vous serez capable de faire toutes ces choses à partir de l’éditeur visuel. Ils ont également ajouté la possibilité d’ajouter des blocs de colonnes de texte réactifs, ce qui est génial ! Actuellement, vous pouvez choisir entre une mise en page à 2, 3 ou 4 colonnes. Les colonnes réactives dans WordPress ont toujours été un casse-tête dans le passé et nécessitaient généralement une extension tierce pour fonctionner correctement.

Bloc HTML en direct

Ils ont aussi ce que nous appelons un bloc HTML en direct. Vous pouvez insérer votre code et voir un aperçu à l’intérieur du bloc. C’est en fait une idée plutôt sympa et pourrait même éviter à certains d’entre nous d’avoir à basculer entre les modes éditeur visuel et éditeur de texte.

Glisser/Déposer pour les Images

À partir de Gutenberg 0.5.0, vous pouvez maintenant glisser/déposer des images directement dans un bloc d’images, comme vous avez l’habitude de le faire avec l’éditeur visuel. Cependant, il y a un effet de fondu lors de cette opération, ce qui est assez étrange. Nous pourrions facilement voir cela comme un problème. Vous pouvez également ajouter des classes CSS supplémentaires à certains blocs.

Blocs récents

Avec tous les blocs en cours de construction dans l’éditeur Gutenberg, et probablement beaucoup d’autres à venir, ils ont ajouté des « blocs récents » pour essayer d’accélérer le processus d’insertion.

Options de texte de couverture

À partir de Gutenberg 0.9.0, ils ont également introduit de nouveaux styles visuels et des options pour le texte de couverture. Vous pouvez facilement changer la taille de la police, la transformer en Drop Cap, et changer la couleur avec leur nouveau composant de palette de couleurs personnalisées.

Autocomplétion avec le Slash

Une fonctionnalité intéressante ajoutée dans Gutenberg 1.1.0 est la possibilité d’utiliser l’autocomplétion pour insérer des blocs. Pour ceux d’entre nous qui utilisent Slack au quotidien, il s’agit d’une façon très familière de formater rapidement le contenu comme vous le souhaitez. Avoir la possibilité de minimiser les clics et d’utiliser davantage le clavier est toujours une bonne chose !

Table des matières et support des ancres

Ils ont également ajouté une table des matières sur la barre latérale. Ce sont des liens cliquables qui vous permettent de passer facilement à une section de votre article. Cela peut s’avérer utile lors de l’écriture d’un long contenu. Une autre fonctionnalité que vous pouvez maintenant utiliser sur les blocs est l’ancrage. C’est en fait assez excitant et quelque chose qui est nécessaire dans le coeur depuis longtemps. L’ajout d’ancres vous permet ensuite de créer un lien direct vers une certaine section ou en-tête de l’article. C’est idéal pour le partage, ainsi que pour créer des sauts aux menus dans les SERPs.

Compteur de mots et de blocs

La plupart d’entre nous sont habitués à voir le nombre total de mots au bas de l’éditeur WYSIWYG. Eh bien, dans Gutenberg 1.2.1 ils ont ajouté ceci dans un petit popup d’information que vous pouvez voir rapidement. Vous pouvez voir le nombre total de mots, le nombre de blocs et le nombre de titres.

Placement des blocs de citation et nouvelles options d’alignement

Au lieu d’avoir le bloc de citation standard que nous utilisons depuis des années, ils ont aussi un nouveau placement de citations. Et oui, les citations sont différentes. Il est également agréable de voir quelques variations sur le positionnement des blocs. Pendant des années, l’éditeur visuel standard vous a donné la possibilité d’aligner à gauche, d’aligner au centre, d’aligner à droite et de ne pas assigner d’alignement. Avec l’éditeur Gutenberg de WordPress, vous pouvez aussi aligner en largeur (voir ci-dessous), et aligner en pleine largeur.

Bouton

Il y a aussi une méthode intégrée pour ajouter un simple bouton. Bien qu’il n’y ait pas encore beaucoup d’options ici, c’est agréable à voir, car de nombreux blogueurs et éditeurs ont besoin de moyens plus faciles pour ajouter des appels à des actions à leurs blogs. Pour l’instant, vous devez utiliser le HTML ou compter sur une extension tierce de boutons/code.

Options d’intégration

Si vous vouliez des options d’intégration plus facilement accessibles, eh bien, votre souhait est enfin réalisé ! Gutenberg rend l’intégration de contenu multimédia super facile, qu’il s’agisse de YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Slideshare, Reddit, et bien d’autres encore.  Alors que vous pouviez intégrer tous ces éléments avant, beaucoup ne s’en rendaient pas compte parce qu’il n’y avait aucune mention dans l’éditeur visuel. Combiné avec la nouvelle expérience de bloc et les options d’alignement, nous ne sommes pas sûrs de ce qui pourrait vraiment être mieux fait. Bien qu’ils devront peut-être réorganiser les choses à l’avenir, car cela pourrait facilement s’encombrer.

Avantages de l’éditeur Gutenberg de WordPress

Voici quelques avantages que nous voyons avec l’éditeur actuel de Gutenberg.

• Se débarrasser *d’une certaine* dépendance à TinyMCE est une bonne chose à notre avis. Nous aimerions voir une intégration plus étroite entre le coeur, les développeurs de thèmes, les extensions et l’éditeur.

'Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.' @photomatt #WCEU

— Alex Denning (@AlexDenning) June 17, 2017

• Pour les rédacteurs qui préfèrent la nouvelle expérience d’édition de style Medium, ils vont probablement adorer l’éditeur Gutenberg de WordPress.
• Gutenberg offre une expérience moins distrayante avec plus d’espace à l’écran..
• Les blocs sont amusants à utiliser et les nouvelles options d’alignement sont un pas en avant pour les écrans à plus grande résolution et les sites réactifs sur toute la largeur.
• Fonctionne déjà très bien sur mobile, et à l’avenir, nous pourrons voir les gens l’utiliser beaucoup plus. Vous avez besoin de faire un montage rapide sur votre téléphone en déplacement ? Pas de problème.
• La possibilité pour les développeurs de thèmes et d’extensions de créer leurs propres blocs personnalisés.
• Plus facile à utiliser pour les débutants.

Une autre chose qui a attiré notre attention était dans Gutenberg 0.4.0, ils ont mentionné L’ajout d’une API pour le traitement du contenu collé dans leurs logs de développement. (Le but est d’avoir un traitement spécifique pour convertir Word, Markdown, Google Docs en blocs WordPress natifs. Ce serait incroyable. À l’heure actuelle, la copie de Google Docs vers WordPress est complètement cassée.

Inconvénients de l’éditeur Gutenberg de WordPress

Et voici quelques inconvénients que nous voyons dans l’éditeur actuel de Gutenberg. Rappelez-vous qu’il est encore en phase de test, donc beaucoup de ces choses seront probablement corrigées ou ajoutées.

• Il manque actuellement le support de Markdown.
• Bien que nous ayons aussi indiqué qu’il est plus facile à utiliser pour les débutants, nous pouvons aussi voir cela comme étant plus difficile à apprendre pour certains.
• Depuis octobre 2017, Gutenberg prend support les boîtes méta. Cependant, il ne s’agit que d’un support initial et il faudra que les développeurs sautent dessus. Cependant, c’est un pas dans la bonne direction. Vous pouvez au moins modifier vos paramètres de Yoast SEO maintenant. ?
  

  Boîtes Méta dans Gutenberg

• Avec autant de thèmes et d’extensions, la rétrocompatibilité sera un énorme problème à l’avenir. En fait, il y aura probablement des milliers de développeurs qui devront maintenant faire beaucoup de travail, comme ceux qui ont des intégrations avec TinyMCE. De toutes les mises à jour de WordPress, c’est probablement celle qui causera le plus de travail pour les développeurs. Bien qu’il pourrait y avoir un outil qui permettrait la compatibilité rétroactive de TinyMCE. Voir la pull request #1394.
• Certains s’inquiètent de l’accessibilité de Gutenberg. Joost de Valk, le développeur de Yoast SEO a soulevé cette préoccupation. Assurez-vous également de lire cet article sur l’utilisation de Gutenberg avec un lecteur d’écran.

Les développeurs ont commencé à exprimer leurs préoccupations avec Gutenberg. Ahmad Awais a également publié un boilerplate Gutenberg pour aider les développeurs de thème et d’extensions WordPress à démarrer leur développement avec Gutenberg. Ça vaut le coup de vérifier. Et beaucoup d’entre vous se demandent probablement si Gutenberg sera optionnel ou non ? La réponse est non. Quand ils lanceront officiellement Gutenberg dans le coeur de WordPress, vous ne pourrez pas l’arrêter. Car ceci deviendra l’éditeur officiel de WordPress. Il existe cependant une extension gratuite appelée Classic Editor que vous pouvez utiliser pour restaurer l’ancien éditeur d’articles. Nous vous recommandons également de jeter un coup d’œil à cet excellent article sur Gutenberg, qui pourrait répondre à toutes les questions supplémentaires que vous pourriez avoir.

Essayer la démo de Gutenberg

Vous voulez jouer avec Gutenberg sans l’installer ? Découvrez Frontenberg, une démo limitée de l’éditeur Gutenberg de WordPress.

Résumé

Have you tried out Gutenberg yet? If so, we would love to hear your thoughts, both good and bad. Dans l’ensemble, nous avons été très impressionnés par le nouvel éditeur Gutenberg de WordPress, c’est définitivement quelque chose qui nous enthousiasme pour l’avenir. Nous encourageons tout le monde à en prendre une copie dans le répertoire WordPress et à l’installer sur un site de développement. C’est notre chance d’aider à construire l’éditeur que nous voulons tous. Nous pouvons avoir la même expérience que Medium, mais dans notre CMS préféré ! L’équipe de Kinsta prendra absolument le temps de donner son avis. Avez-vous déjà essayé Gutenberg ? Si oui, nous aimerions entendre vos avis, bons et mauvais.