Votre guide ultime pour utiliser le prochain éditeur WordPress Gutenberg

Publié: 2018-10-30

Au cours des prochains mois, la façon dont vous créez du contenu avec WordPress va radicalement changer. L'éditeur de texte actuel que vous utilisez depuis des années va disparaître, remplacé par le tout nouvel éditeur WordPress Gutenberg.

Un grand changement comme celui-ci sonne probablement l'alarme dans votre tête…

Vos flux de travail seront-ils interrompus ? Vos plugins et thèmes actuels vont-ils continuer à fonctionner ? Comment pouvez-vous continuer à créer du contenu de qualité avec ce nouvel éditeur ?

Dans cet article, vous apprendrez les réponses à ces questions et bien plus encore .

Il s'agit du guide ultime de l'éditeur WordPress Gutenberg pour tous ceux qui créent du contenu avec WordPress.

Vous apprendrez:

Qu'est-ce que l'éditeur WordPress Gutenberg, pourquoi/quand il arrive et les réponses à certaines FAQ de base.
Comment imiter la fonctionnalité actuelle de l'éditeur et créer un article de blog de base avec Gutenberg.
Quelques conseils secrets pour travailler de manière plus productive avec Gutenberg ( basés sur mon expérience pratique de son utilisation sur un site en direct ).
Comment exploiter les nouvelles fonctionnalités de Gutenberg pour bénéficier de fonctionnalités de contenu et de mise en page auxquelles vous n'aviez jamais accès auparavant.

Ce nouvel éditeur arrive quoi qu'il arrive, alors prenez le temps de vous familiariser avec l'éditeur WordPress Gutenberg afin d'être prêt à démarrer dès sa sortie !

Qu'est-ce que l'éditeur Gutenberg, et pourquoi vous devriez vous en soucier

L'éditeur Gutenberg est une réimagination complète de l'éditeur de texte WordPress actuel que vous utilisez pour créer des articles ou des pages avec WordPress.

Je dis réimagination plutôt que refonte parce que c'est vraiment reconstruire l'expérience de montage à partir de zéro .

Une fois le développement terminé, Gutenberg remplacera l'éditeur de texte WordPress actuel et vous utiliserez l'éditeur Gutenberg pour créer du contenu à l'avenir ( bien que vous ayez des options si vous souhaitez vous en tenir à l'expérience actuelle - nous y reviendrons plus tard ).

Alors, qu'est-ce qui fait de l'éditeur Gutenberg une « réimagination complète » ?

Tout d'abord, commençons par rafraîchir ce que j'entends par « l'éditeur WordPress ». Si vous n'êtes pas sûr de ce dont je parlais, voici à quoi ressemble l'éditeur actuel de WordPress TinyMCE :

Si vous utilisez Wordable pour publier des articles WordPress directement à partir de Google Docs, vous n'y passerez peut-être pas beaucoup de temps ! Mais je parie qu'il y a toujours de bonnes chances que vous connaissiez bien le fonctionnement de l'éditeur.

L'éditeur de Gutenberg présente quelque chose appelé « blocs »

L'éditeur de texte WordPress actuel est un peu comme un long document Microsoft Word. Gutenberg change cette dynamique avec ce qu'on appelle des blocs .

Plutôt qu'un seul champ d'édition, chaque « chose » dans Gutenberg est son propre « bloc ». Si vous avez déjà écrit un article avec Medium, c'est la même idée .

Par example:

Chaque paragraphe de texte est son propre bloc séparé.
Une image est son propre bloc.
Une vidéo YouTube est son propre bloc.
…vous avez eu l'idée.

Vous assemblez ensuite votre contenu à l'aide d'une série de blocs. Par exemple, voici à quoi ressemble le même contenu d'en haut dans Gutenberg. Il comporte quatre blocs différents :

Trois blocs de paragraphe séparés
Un bloc d'image

L'importance de cette approche basée sur les blocs est qu'elle débloque des capacités plus avancées pour le contenu et la mise en page.

Par exemple, vous pourrez introduire des colonnes, des boutons d'insertion et de style, et effectuer de nombreuses autres actions que vous ne pouvez pas faire avec l'éditeur actuel, ou qui nécessiteraient du HTML/CSS avec l'éditeur actuel.

Plus tard, je couvrirai les blocs de manière beaucoup plus détaillée. Mais si vous voulez vous mouiller les pieds maintenant, vous pouvez jouer avec une démo en direct de l'éditeur Gutenberg en vous rendant ici - pas besoin d'installer quoi que ce soit.

Voici pourquoi l'équipe de base de WordPress effectue ce changement

Pendant la majeure partie de sa vie, WordPress a utilisé le même éditeur de base (TinyMCE). Bien que le design ait pu changer ici et là, la fonctionnalité de base n'a jamais faibli.

Alors pourquoi changer maintenant ? Si cela a fonctionné pendant les 15 dernières années, pourquoi ne peut-il pas continuer à fonctionner pendant les 15 prochaines années ?

Il y a quelques raisons.

Tout d'abord, l'éditeur actuel est tout simplement trop restrictif pour les utilisateurs occasionnels de nos jours. Bien que WordPress permette de créer tout ce que vous pouvez imaginer, il ne le fait que si vous connaissez un peu de HTML/CSS .

Combinez cela avec la concurrence des constructeurs de sites Web visuels comme Squarespace et Wix ( qui ont tous deux ~ doublé leur utilisation au cours de la dernière année ) , et vous pouvez comprendre pourquoi l'équipe principale de WordPress a estimé que WordPress avait besoin d'une expérience d'édition plus flexible pour garder son avantage.

Deuxièmement, Gutenberg offre la possibilité d'unifier les nombreuses interfaces disparates dont disposent les utilisateurs WordPress occupés. Je ne veux pas être trop technique ici. Mais si vous utilisez des plugins tiers, vous disposez probablement de divers codes courts, méta-boîtes et zones de paramètres qui font partie de vos flux de travail WordPress.

Gutenberg peut unifier toutes ces différentes interfaces dans le système de blocs.

Troisièmement, Gutenberg introduit les technologies modernes dans WordPress. Plus précisément, Réagissez. Cela aide non seulement l'éditeur lui-même, mais cela permet également aux développeurs tiers de travailler avec ces technologies modernes.

Enfin, l'édition de contenu n'est que le début de ce processus. Alors qu'à l' heure actuelle , Gutenberg va simplement changer la façon dont vous créez des articles et des pages, l'objectif final est de faire en sorte que Gutenberg passe à la conception de sites Web entièrement visuels.

Les avantages et les inconvénients du passage au nouvel éditeur Gutenberg

Alors… Gutenberg va-t-il être une bonne chose pour vous ?

Eh bien, cela a en fait été un problème assez controversé au sein de la communauté WordPress, avec des arguments passionnés des deux côtés.

D'un côté, vous avez des gens vantant les avantages de Gutenberg :

Plus de possibilités pour le contenu – Gutenberg ajoute des blocs prédéfinis pour les boutons, les guillemets, etc. Cela vous donne plus de contrôle sur votre contenu sans avoir besoin de CSS personnalisé. De plus, les plugins tiers peuvent ajouter leurs propres blocs de contenu, ce qui vous offre encore plus de flexibilité.
Plus de possibilités de mise en page - au-delà des nouvelles possibilités de contenu, vous obtenez également de nouvelles options de mise en page, comme la possibilité d'inclure des colonnes ou des séparateurs sans avoir besoin de code personnalisé.
Expérience unifiée - plutôt que d'avoir besoin d'utiliser des codes courts pour insérer du contenu à partir de plugins tiers, ces plugins pourront créer leurs propres blocs, ce qui crée une expérience d'édition plus simple et plus unifiée.
Adapté aux mobiles – Gutenberg fonctionne parfaitement sur mobile par défaut, ce qui vous permet de créer ou de modifier du contenu à partir de n'importe quel appareil.

Mais d'un autre côté, vous avez des gens qui signalent de gros problèmes avec un projet aussi ambitieux :

Rétrocompatibilité - ~ 32 % de l'ensemble d'Internet utilise l'éditeur WordPress actuel, ce qui rend très difficile la transition vers une toute nouvelle expérience d'édition. Fondamentalement, il y a tellement de cas extrêmes avec tout cet ancien contenu qu'il est difficile d'assurer une transition transparente.
Difficile pour les développeurs – les développeurs de thèmes et de plugins devront intégrer la compatibilité Gutenberg dans leurs plugins et thèmes, et les extensions plus anciennes peuvent ne pas toujours fonctionner parfaitement. Il existe des dizaines de milliers de plugins plus anciens qui peuvent rencontrer des problèmes de compatibilité.
Éducation des utilisateurs – alors que les nouveaux utilisateurs peuvent aimer Gutenberg, les anciens utilisateurs devront apprendre de nouveaux flux de travail, ce qui est particulièrement difficile pour les développeurs qui ont créé des sites pour des clients non techniques.

Alors, l'éditeur WordPress Gutenberg est-il une bonne ou une mauvaise chose ?

Eh bien, j'interpose en quelque sorte une opinion personnelle ici , mais je pense que Gutenberg sera un changement positif à long terme . Vous aurez plus de contrôle sur l'apparence et le fonctionnement de votre contenu sans avoir besoin de solutions externes ou de solutions de code personnalisées.

Cela étant dit, il existe certainement une possibilité de problèmes de croissance à court terme en ce qui concerne la compatibilité avec les plugins existants que vous pourriez utiliser. Et il sera difficile de forcer l'énorme base d'utilisateurs de WordPress à apprendre une nouvelle interface.

Quand l'éditeur Gutenberg va-t-il sortir ?

La réponse courte est – nous ne connaissons pas la date exacte . Gutenberg sera publié dans le cadre de WordPress 5.0, mais il n'y a pas encore de mot officiel sur la date de sortie exacte de WordPress 5.0.

Nous avons maintenant une idée approximative, cependant. Selon la récente réunion de lancement de WordPress 5.0 , les dates prévues sont aussi tôt que le 19 novembre 2018 ou aussi tard que le 22 janvier 2019 .

Voici la réponse plus longue :

À l'heure actuelle, l' éditeur Gutenberg existe en tant que plugin pendant son statut bêta. Si vous le souhaitez, vous pouvez installer le plugin et commencer à l'utiliser sur votre site aujourd'hui ( il est en version bêta, donc je ne le recommanderais pas ).

Une fois la version bêta et les tests terminés, l'équipe WordPress fusionnera l'éditeur Gutenberg dans le logiciel WordPress de base dans WordPress 5.0 . Ensuite, une fois que vous aurez mis à jour votre site WordPress vers WordPress 5.0, l'éditeur Gutenberg remplacera automatiquement l'éditeur TinyMCE actuel.

Qu'adviendra-t-il de votre contenu existant une fois que l'éditeur Gutenberg sera publié ?

Étant donné que Gutenberg remplace l'éditeur actuel, vous vous demandez probablement ce qui va se passer avec tout votre contenu existant.

Ne vous inquiétez pas, Gutenberg est conçu pour être rétrocompatible .

Dans l'état actuel des choses , Gutenberg met tout votre ancien contenu dans un seul bloc Classic . Par exemple, voici à quoi ressemble l'exemple TinyMCE ci-dessus lorsque j'installe Gutenberg :

Si vous le souhaitez, vous pouvez continuer à travailler à l'intérieur de ce seul bloc Classic, bien que l'expérience soit un peu gênante. Ou, vous pourrez cliquer sur l'icône des trois points pour convertir votre ancien contenu en blocs Gutenberg :

Une fois que vous aurez converti votre ancien contenu en blocs, cela fonctionnera comme n'importe quel autre article de l'éditeur Gutenberg.

Étant donné que l'éditeur Gutenberg utilise cette approche de bloc classique unique pour l'ancien contenu, vous ne devriez pas rencontrer de problèmes de transition. Mais il est possible que vous rencontriez des problèmes avec des plugins tiers, vous devez donc rester vigilant et vérifier votre ancien contenu.

L'éditeur Gutenberg fonctionnera-t-il avec tous les thèmes WordPress ?

Oui! Encore une fois, étant donné que Gutenberg sera l'éditeur par défaut, il doit naturellement fonctionner avec n'importe quel thème WordPress.

Cela étant dit, les développeurs peuvent faire certaines choses pour ajouter une capacité spéciale à Gutenberg. Vous allez donc commencer à voir « compatible Gutenberg » apparaître sur les supports marketing de nombreux thèmes très bientôt.

Voici ce qui rend un thème compatible avec Gutenberg :

Style de bloc spécial - les thèmes peuvent ajouter un style spécial pour les blocs de base de Gutenberg. Cela garantit que tous les blocs de Gutenberg correspondent parfaitement au design de votre thème.
Alignement pleine largeur – Gutenberg vous permet de créer des images pleine largeur qui s'étendent sur tout l'écran, mais uniquement si les développeurs de thèmes l'activent spécifiquement.
Style de l'éditeur - les développeurs de thèmes peuvent également ajouter leur propre style à l'interface d'édition principale de Gutenberg . Cela crée davantage une approche de conception visuelle. Vous pouvez voir un exemple ici .

Devez-vous utiliser l'éditeur Gutenberg une fois que WordPress 5.0 est sorti ?

Non! Bien que Gutenberg soit l'éditeur par défaut de WordPress 5.0, vous n'êtes pas obligé de l'utiliser.

Si vous souhaitez continuer à utiliser l'éditeur WordPress actuel, il existe un plugin officiel Classic Editor qui masque toutes les traces de Gutenberg et restaure l'expérience d'édition actuelle.

Alternativement, ce plugin peut également vous permettre d'utiliser les deux éditeurs et de basculer entre eux poste par poste.

Tutoriel WordPress Gutenberg – Comment utiliser le nouvel éditeur

D'accord, maintenant que vous avez terminé votre cours accéléré Gutenberg 101, passons à la pratique avec l'éditeur Gutenberg.

L'objectif de cette section est de vous familiariser avec l'éditeur Gutenberg afin que vous puissiez vous lancer dès sa sortie.

Pour commencer, voici un graphique pour vous aider à comprendre les éléments essentiels de l'interface de l'éditeur Gutenberg :

C'est le corps de l'éditeur. C'est là que vous travaillerez avec le contenu
Ces boutons vous permettent d' ajouter de nouveaux blocs . Si vous souhaitez ajouter une image, une vidéo ou tout autre contenu de bloc, vous les utiliserez.
C'est ici que vous ajoutez le titre de votre message.
Ces options vous permettent d'enregistrer des brouillons, d'afficher des aperçus et éventuellement de publier votre article.
Lorsqu'aucun bloc n'est sélectionné, cette barre latérale vous permet de gérer les options globales de votre publication, telles que les catégories et votre image vedette. Lorsque vous avez un bloc sélectionné, il vous donne des options pour ce bloc spécifique.

Ensuite, lorsque vous allez ajouter un nouveau bloc, vous verrez cette fenêtre contextuelle avec une liste de tous les blocs disponibles. Tu peux soit:

Utilisez les onglets en accordéon pour parcourir tous les blocs disponibles
Recherchez directement le bloc que vous voulez

Comment créer un article de blog simple avec l'éditeur Gutenberg

Dans cette section, vous apprendrez comment effectuer le même type d'actions que vous pouvez déjà effectuer dans l'éditeur WordPress actuel .

Fondamentalement, vous allez apprendre à adapter votre flux de travail existant à l'éditeur Gutenberg. Ensuite, dans la section suivante, je vais vous montrer comment tirer parti des nouvelles fonctionnalités de l'éditeur Gutenberg.

Ajouter ou formater du contenu texte de base

Le contenu du texte de paragraphe de base est simple - il vous suffit de cliquer et de taper. La seule différence immédiate est que chaque fois que vous appuyez sur Entrée pour créer une nouvelle ligne, Gutenberg créera automatiquement un nouveau bloc pour votre prochain paragraphe :

Lorsque vous cliquez dans un bloc, une barre d'outils de mise en forme apparaît où vous pouvez :

Modifier l'alignement
Ajouter des caractères gras et italiques
Insérer des liens
Etc.

Fondamentalement, cela agit un peu comme la barre d'outils dans l'éditeur actuel :

Plus tard, je vous montrerai une alternative intéressante à cette approche par défaut.

Au-delà des options de formatage dans la barre d'outils, vous obtenez également des options dans la barre latérale de droite qui vous permettent :

Contrôler la taille et la couleur du texte
Ajouter une lettrine

Assez simple jusqu'à présent, non?

Création d'une rubrique (H1, H2, etc.)

Vous disposez de plusieurs options pour créer un en-tête.

Tout d'abord, vous pouvez utiliser l'icône + pour insérer un nouveau bloc de titre :

Une fois que vous avez inséré le bloc Titre , vous pouvez taper pour ajouter votre texte et utiliser la barre latérale ou la barre d'outils pour contrôler le titre à utiliser (par exemple H2 vs H3) :

Alternativement, vous pouvez également :

Transformez un bloc de paragraphe normal en un bloc d'en-tête à l'aide du bouton Modifier le type de bloc .
Utilisez Markdown pour créer votre rubrique (par exemple "## Ceci est une rubrique 2")

Voici un GIF pour illustrer ces deux méthodes :

Insertion d'images, de vidéos ou d'autres contenus multimédias

Ok, maintenant vous pouvez créer et formater à la fois du texte de base et des en-têtes. Cela vous mènera la plupart du temps là-bas !

Mais qu'en est-il de l'insertion de contenu multimédia ?

Pour insérer n'importe quel contenu multimédia, vous pouvez utiliser cette même icône + pour insérer un bloc.

Pour insérer du contenu multimédia sous votre contenu existant, utilisez l'icône + dans le coin supérieur gauche.

Alternativement, vous pouvez également insérer un nouveau bloc entre votre contenu existant en survolant l'endroit où vous souhaitez insérer votre contenu. Ensuite, vous utiliserez le bouton Ajouter un bloc à gauche du nouveau bloc :

Une fois que vous avez ouvert la fenêtre contextuelle Insérer un bloc , vous pouvez choisir parmi :

Image – insérez une image de la médiathèque WordPress ou une URL externe.
Vidéo – intégrez une vidéo de la médiathèque WordPress ou une URL externe.
Intégrer – des blocs séparés pour vous aider à intégrer du contenu de YouTube, Vimeo, Spotify, SoundCloud, Instagram et de nombreuses autres sources.

Par exemple, voici à quoi cela ressemble d'insérer une image de la médiathèque WordPress :

Et voici comment intégrer une vidéo YouTube :

Insertion de shortcodes à partir d'autres plugins

Si vous êtes comme la plupart des utilisateurs de WordPress, vous avez probablement des plugins que vous incluez dans le contenu de votre article ou de votre page à l'aide de shortcodes.

Finalement , l'objectif est que ces types de plugins créent leurs propres blocs Gutenberg que vous pouvez utiliser directement (nous y reviendrons plus tard ). Mais jusque-là , vous pouvez toujours inclure des shortcodes dans votre contenu Gutenberg en utilisant le bloc Shortcode :

Réorganiser le contenu (vous avez deux options)

D'accord, assez facile jusqu'à présent… mais si vous vouliez changer l'ordre de vos blocs ?

Pour ce faire, vous avez deux options.

Tout d'abord, si vous passez votre souris à gauche d'un bloc*, vous pouvez utiliser le glisser-déposer pour déplacer les blocs :

Deuxièmement, vous pouvez également utiliser les flèches haut ou bas pour déplacer les blocs d'une position vers le haut ou vers le bas :

*Pour activer le glisser-déposer, maintenez votre souris sur les 6 points entre les flèches haut et bas.

Travailler avec des informations en coulisse (catégories, URL Slug, etc.)

D'accord, ce qui précède devrait expliquer comment ajouter du contenu de base au blog. Mais qu'en est-il de toutes les autres parties en coulisses de la préparation d'un article pour publication ?

Pour la plupart des actions, vous pouvez utiliser l'onglet Document de la barre latérale. C'est ici que vous allez :

Choisissez une date de publication/programmez les publications à l'avance
Sélectionnez l'auteur
Ajouter des catégories et des balises
Sélectionnez votre image vedette
Entrez votre extrait

De plus, vous pouvez utiliser les boutons au-dessus de cette barre latérale pour :

Aperçu de votre article
Enregistrer les brouillons ( Gutenberg enregistre automatiquement votre brouillon, vous n'aurez donc généralement pas besoin de le faire manuellement )
Publiez votre article

La seule chose délicate est de définir le slug d'URL de votre publication ou de votre page. Pour modifier cela, cliquez sur le titre. Ensuite, vous pourrez éditer le slug :

Qu'en est-il des plugins comme Yoast SEO ? Comment fonctionneront-ils ?

Il y a de fortes chances que vous ayez d'autres plugins backend que vous devez configurer pour chaque élément de contenu.

Il y a deux manières d'interagir avec ces plugins.

Tout d'abord, de nombreux développeurs travaillent déjà sur la compatibilité directe avec Gutenberg. Par exemple, Yoast SEO prend déjà en charge Gutenberg et vous configurerez vos paramètres Yoast SEO directement à partir de la même barre latérale de document :

Pour les plugins hérités qui ne prennent pas encore en charge Gutenberg, vous pourrez toujours utiliser les méta-boîtes comme vous le feriez avec l'éditeur TinyMCE :

Six conseils pour travailler de manière plus productive avec Gutenberg

Lorsque vous commencez à travailler avec l'éditeur Gutenberg, cela peut sembler un peu lent. Ces conseils peuvent aider à accélérer le processus et à faciliter l'insertion et la personnalisation rapides des blocs dont vous avez besoin.

1. Insertion rapide de blocs en tapant "/" pour gagner du temps

La méthode d'insertion de blocs que je vous ai montrée ci-dessus est utile lorsque vous débutez avec Gutenberg car elle vous permet de voir tous les blocs disponibles.

Mais une fois que vous vous êtes familiarisé avec les blocs dont vous avez besoin, vous pouvez les insérer beaucoup plus rapidement en utilisant la fonction d'insertion rapide.

Plutôt que de cliquer sur l'icône + , il suffit de :

Appuyez sur Entrée pour créer un nouveau bloc
Type A "/"
Commencez à taper le nom du bloc

Au fur et à mesure que vous tapez, Gutenberg suggérera automatiquement les blocs qui correspondent. Ensuite, appuyez simplement sur Entrée pour insérer le bloc que vous voulez.

Le voici en action :

C'est beaucoup plus rapide, non ?

2. Apprenez les raccourcis clavier pour une édition plus rapide

Gutenberg est livré avec des raccourcis clavier qui peuvent accélérer votre façon de travailler.

Vous pouvez afficher une liste complète de ces raccourcis en cliquant sur CTRL + Alt + H (Windows) ou CMD + Alt + H (Mac) :

Vous devriez lire la liste complète, mais voici quelques-unes des plus utiles :

Ctrl + S - enregistrez votre brouillon.
Ctrl + Z – annuler ou Ctrl + Y – refaire.
Ctrl + Alt + Backspace – supprime le bloc sélectionné ( très pratique ).
Ctrl + Shift + D – dupliquer le bloc sélectionné.
Ctrl + Alt + T – insère un nouveau bloc avant le bloc sélectionné.
Ctrl + Alt + Y - insère un nouveau bloc après le bloc sélectionné.

Vous pouvez également utiliser la plupart des raccourcis globaux, comme Ctrl + B pour le gras ou Ctrl + V pour coller.

3. Faites glisser des images de votre bureau vers votre contenu Gutenberg

Si vous devez inclure beaucoup d'images, c'est une autre astuce intéressante.

Plutôt que d'avoir à créer manuellement un nouveau bloc d'image pour chaque image, vous pouvez simplement faire glisser une image directement d'un dossier sur votre bureau jusqu'à l'endroit où vous pouvez l'inclure dans votre message.

WordPress le téléchargera ensuite automatiquement dans votre médiathèque et l'insérera directement là-bas. Il n'y a qu'une seule chose à laquelle faire attention - assurez-vous de voir la ligne bleue lorsque vous faites glisser l'image , sinon cela ne fonctionnera pas :

4. Ajouter une barre d'outils d'édition fixe

Une chose que certaines personnes trouvent difficile avec Gutenberg est que la barre d'outils d'édition clignote constamment lorsque vous cliquez entre différents blocs de paragraphe.

Si vous n'aimez pas cela, vous pouvez activer l'option Barre d'outils unifiée pour obtenir une barre d'outils toujours présente en haut de l'interface Gutenberg :

5. Utilisez la syntaxe Markdown pour les en-têtes, les listes, etc.

Si vous aimez utiliser le démarquage, vous pourrez incorporer une syntaxe de démarquage dans Gutenberg.

Par example:

## - crée un H2 ( vous l'avez déjà vu - il se transforme en un bloc d'en-tête ).
* – démarre une liste non ordonnée.
1. – démarre une liste ordonnée.
> – crée un bloc devis ( se transforme en un bloc de devis ).

Vous ne pouvez pas utiliser toute la syntaxe de démarque. Mais les exemples ci-dessus sont déjà très utiles pour un formatage plus rapide :

6. Modifiez directement le code HTML si nécessaire

Si vous rencontrez une situation dans laquelle vous souhaitez modifier directement le code HTML, vous pouvez accéder à l'éditeur de code en cliquant sur les trois points dans le coin supérieur droit ou en utilisant le raccourci Ctrl + Maj + Alt + M :

Tirer parti des nouvelles fonctionnalités de Gutenberg : colonnes, boutons et plus encore !

D'accord, nous avons couvert :

Comment utiliser Gutenberg pour créer un article de blog de base.
Quelques conseils pour accélérer votre façon de travailler avec Gutenberg.

Voyons maintenant quelques-unes des nouveautés intéressantes que vous pouvez faire avec Gutenberg. Ce sont les fonctionnalités intéressantes qui devraient aider à expliquer pourquoi l'équipe WordPress a décidé d'aller de l'avant avec Gutenberg.

Insérer des boutons - Aucun HTML requis

Avec l'ancien éditeur, le seul moyen de créer des boutons était d'ajouter manuellement une classe CSS ou d'utiliser un plugin tiers.

Avec Gutenberg, vous ajoutez simplement le bloc Button . Pour modifier le texte du bouton, il vous suffit de cliquer et de taper. Et pour changer les couleurs, vous pouvez utiliser la barre latérale :

Créer des mises en page à plusieurs colonnes

Avec l'ancien éditeur, il n'y avait aucun moyen de créer des mises en page multi-colonnes sans votre propre code HTML personnalisé ou un plugin tiers.

Avec Gutenberg, vous ajoutez simplement le bloc Colonnes . Ensuite, vous pouvez ajouter d'autres blocs à l' intérieur des différentes colonnes :

Créez des images étirées pleine largeur

Si votre thème le prend en charge , vous obtiendrez une nouvelle option d'alignement pleine largeur qui vous permet d'étirer les images sur tout l'écran, ce qui ouvre des mises en page de contenu intéressantes :

Créer des modèles de blocs réutilisables

Si vous vous retrouvez à utiliser régulièrement la même combinaison de blocs, vous pouvez gagner du temps en créant un groupe de blocs réutilisable.

Tout d'abord, vous pouvez cliquer et faire glisser pour sélectionner tous les blocs que vous souhaitez inclure. Ensuite, vous pouvez utiliser les trois points pour ajouter aux blocs réutilisables :

Vous lui donnerez un nom. Ensuite, vous pourrez insérer l'intégralité de ce modèle comme vous le feriez avec n'importe quel autre bloc :

Vous pouvez ajouter plus de blocs et de fonctionnalités avec des plugins tiers

Voici où Gutenberg commence à devenir encore plus cool :

Les plugins tiers peuvent ajouter leurs propres blocs que vous pouvez utiliser dans vos conceptions Gutenberg.

Cela peut vous être bénéfique de deux manières :

Les plugins que vous utilisez déjà créeront leurs propres blocs Gutenberg. Par exemple, si vous utilisez un plugin de calendrier d'événements, vous pourrez insérer des événements simplement en utilisant le bloc d'événements de votre plugin.
Les développeurs créent des plugins Gutenberg dédiés qui ajoutent des tonnes de nouveaux blocs de contenu génériques qui vous donnent plus de contrôle sur vos conceptions.

Par exemple, consultez le plugin gratuit Stackable . Une fois que vous l'aurez installé et activé, vous obtiendrez un tout nouvel ensemble de blocs empilables dans Gutenberg :

Et puis vous pouvez utiliser ces blocs pour faire des choses plutôt sympas, comme insérer un tableau de prix ou un témoignage :

Ce n'est que le début pour l'éditeur WordPress Gutenberg

Et c'est tout! Si vous êtes arrivé jusqu'ici, vous devriez être un gourou de Gutenberg qui est prêt à démarrer dès la sortie de WordPress 5.0.

Bien que l'apprentissage d'un nouveau flux de travail ne figure pas sur la liste des « façons amusantes de passer un week-end » de la plupart des gens, maîtriser les tenants et aboutissants de Gutenberg sera essentiel pour quiconque utilise WordPress.

Non seulement Gutenberg va affecter la façon dont vous créez du contenu en ce moment , mais il va également jouer un rôle majeur dans WordPress à l'avenir.

Tout ce que vous avez vu ci-dessus n'est que la première phase de Gutenberg. Au cours de la deuxième phase, Gutenberg passera aux modèles de page et la troisième phase transformera Gutenberg en un outil de personnalisation complète du site Web .

Alors… devenez bons amis avec Gutenberg, car vous allez en voir beaucoup au cours des prochaines années !