Gutenberg E03 : Utilisation du nouvel éditeur de messages Gutenberg

Dans notre précédent épisode sur l'éditeur WordPress Gutenberg, nous avons présenté le nouvel écran d'édition de publication en le comparant à l'ancien. Vous devriez maintenant être familiarisé avec chaque fonction et son emplacement.

Dans cet épisode, nous nous concentrerons uniquement sur l'utilisation du nouvel éditeur de messages Gutenberg. Nous présenterons les changements plus pratiques de Gutenberg, ceux liés à l'édition de contenu.

Comment allez-vous créer votre poste idéal? Utiliserez-vous des shortcodes ? Ou Gutenberg apporte-t-il une nouvelle approche plus simple et plus intuitive de la création de contenu ? Voyons voir!

Comment fonctionnent les blocs de l'éditeur de publication de Gutenberg

Jusqu'à présent, l'édition de texte dans WordPress était une tâche assez simple. TinyMCE a fourni une interface qui ressemblait à un logiciel d'édition de documents (Microsoft Word, LibreOffice Writer, Google Docs, etc.). Il y avait une seule zone de corps, où vous placiez tout à l'intérieur (texte, en-têtes, listes, images, etc.), puis utilisiez la barre d'outils globale pour le formatage.

Le seul changement remarquable apporté par Gutenberg sont les blocs ou, en d'autres termes, les éléments de contenu. Chaque section du corps du message devient désormais un bloc à part entière et permet aux auteurs de travailler plus facilement avec.

Ainsi, au lieu de tout ajouter dans une zone de texte unifiée, vous avez désormais la liberté de manipuler vos morceaux de texte en tant qu'entités distinctes .

Cela ouvre de nombreuses possibilités qui n'existaient pas auparavant.

1. Réorganisation facile

Combien de fois avez-vous regardé votre message final et avez-vous changé d'avis sur ce qui va où ? Il est assez courant que les auteurs de contenu réorganisent des parties de leurs articles au fur et à mesure qu'ils les écrivent ou les révisent.

Eh bien, Gutenberg reconnaît automatiquement chaque paragraphe comme un bloc séparé, vous n'avez donc plus besoin de couper et coller votre texte. Vous pouvez simplement utiliser les commandes de bloc pour le déplacer.

2. Bloquer les paramètres spécifiques et la barre d'outils

Des blocs séparés vous donnent la possibilité de formater chaque élément de contenu à votre manière. Il est facile de modifier l'apparence de certaines parties de votre contenu et d'avoir ce paramètre spécifique à portée de main, tout le temps. Oubliez l'époque où vous aviez une seule barre d'outils pour l'ensemble de votre message.

3. Réutilisabilité des blocs

L'option "Ajouter aux blocs réutilisables" stocke un bloc avec son contenu et sa configuration dans la base de données. Cela le rend réutilisable dans d'autres publications. Avez-vous une citation célèbre que vous utilisez souvent ? Une offre que vous souhaitez placer en haut de chaque publication ? Ou peut-être une signature d'auteur invité ? Tout cela peut être écrit une fois, puis rapidement réutilisé pour chaque article de votre site Web. De plus, les modifications enregistrées dans vos blocs partagés seront appliquées à chaque instance utilisée.

Ces fonctionnalités font partie des nouvelles fonctionnalités les plus élémentaires que les blocs Gutenberg donnent vie. C'était en partie l'objectif de nombreux créateurs de pages avant Gutenberg ; Pour organiser le contenu en blocs réutilisables et faciliter la création et la manipulation de texte enrichi par l'utilisateur.

Une fois que vous aurez compris cet état d'esprit et commencé à penser en termes de blocs, vous commencerez à tirer le meilleur parti de Gutenberg et de son nouveau flux de travail d'édition. Donc, pour continuer, nous présentons quelques exemples simples sur la façon d'utiliser efficacement votre nouvel outil de bloc Gutenberg.

Ajout de texte enrichi dans l'éditeur Gutenberg

Supposons que vous vouliez écrire un article purement textuel (certes une chose rare à faire, mais commençons simplement). Vous n'aurez besoin que de texte brut, de quelques titres et peut-être d'une ou deux listes. Voyons comment vous pouvez faire cela avec l'éditeur Gutenberg.

Convertir un titre en bloc

Dans TinyMCE, vous tapez le titre, le paragraphe et tout le reste en texte brut.

Et puis, par exemple, sélectionnez le texte que vous voulez et changez son format en Titre 1.

Dans Gutenberg, le titre et le paragraphe ont leur propre bloc, car ils sont désormais des éléments de contenu distincts.

Il ne reste plus qu'à transformer le premier bloc Paragraphe en bloc Titre.

Dans Gutenberg, un bloc de texte peut être transformé en n'importe quel autre bloc de texte, car ils appartiennent au même groupe.

En parlant de titres, vous obtenez également une table des matières basée sur le titre, H1, H2, etc. N'est-ce pas cool ?

Ajouter une liste

Disons que vous voulez ajouter une liste dans votre texte. Dans TinyMCE, vous cliquez d'abord sur le bouton "Liste" de la barre d'outils, puis commencez à taper. Appuyer sur la touche [Entrée] ajoute un nouvel élément dans la liste.

Dans Gutenberg, pour ajouter une nouvelle liste, il faut penser en termes de blocs. Cela signifie probablement que nous avons besoin d'un bloc Liste, n'est-ce pas ?

Vous pouvez soit transformer un bloc de texte en un autre afin de changer son format (paragraphe, liste, titre, citation, etc.), soit ajouter un nouveau bloc de ce type spécifique en premier lieu. Ce n'est pas si différent qu'avec TinyMCE, car les étapes requises sont assez similaires. Vous êtes récompensé plus tard lorsque vous souhaitez déplacer ces blocs ou leur appliquer des paramètres spécifiques, comme nous l'avons mentionné ci-dessus.

Ajout d'images et de galeries d'images

Le contenu visuel est l'un des moyens les plus attrayants d'animer votre contenu et d'éviter que les lecteurs ne soient confrontés à un immense mur de texte. La plupart du temps, vous souhaitez placer stratégiquement des images pertinentes dans votre contenu.

Ajout d'une image

Peu de choses ont changé ici. Sur TinyMCE, cliquez sur Ajouter un média et insérez vos images dans le contenu, puis manipulez-les à partir de là.

Dans Gutenberg vous… eh bien vous l'avez deviné ! Vous ajoutez simplement un nouveau bloc Image comme celui-ci :

Remarquez comment vous pouvez accéder aux paramètres d'image à partir de la barre latérale. Vous pouvez également redimensionner l'image et modifier la légende sur place, comme vous le faisiez également avec TinyMCE.

Eh bien, ce n'était pas très différent maintenant, n'est-ce pas ? Assez intuitif aussi. Plongeons donc dans quelque chose d'un peu plus complexe, mais aussi familier : les shortcodes.

Et pour ce faire, nous allons utiliser la Galerie, un autre élément Image commun.

Hébergez votre site web avec Pressidium

GARANTIE DE REMBOURSEMENT DE 60 JOURS

VOIR NOS FORFAITS

Ajout d'une galerie

Le bouton "Ajouter un média", introduit dans WordPress 3.5, a simplifié et fait de la création d'une galerie un processus intuitif. Voici comment procéder dans TinyMCE :

Choisissez Images, changez leur ordre, sélectionnez le nombre de colonnes et boum ! Prêt à partir. Plutôt pratique, non ?

Eh bien oui, mais avec quelques mises en garde.

Remarquez comment, après avoir créé la galerie, vous ne pouvez pas apporter de modifications sur place .

Vous devez cliquer sur l'icône Modifier et revenir à la fenêtre multimédia pour y terminer vos modifications.

Comme nous l'avons laissé entendre ci-dessus, cela se produit parce que la galerie devant vous n'est rien d'autre qu'un shortcode déguisé !

C'est un peu limitant car vous devez essentiellement générer un nouveau shortcode chaque fois que vous souhaitez modifier votre galerie.

Alors, comment feriez-vous cela sur Gutenberg ? Voyons d'abord comment nous traitons les shortcodes en général.

Codes courts à Gutenberg

Si vous pensiez "Shortcode Block?" alors vous mon ami, avez raison. Gutenberg a un bloc spécialisé qui porte la fonctionnalité des anciens Shortcodes. Cela maintient la compatibilité sans rien casser.

Cela générera exactement la même galerie lorsque le visiteur consultera le site Web.

Cependant, ce n'est pas idéal. Nous avons déjà fait grand cas de la façon dont les shortcodes sont obsolètes et maladroits, et pas amusants à utiliser. Alors pourquoi continuons-nous à les utiliser avec Gutenberg ?

La réponse est simple. Le bloc Shortcode est là pour des raisons de compatibilité.

WordPress veut laisser le temps aux développeurs, de migrer leurs shortcodes vers des blocs personnalisés. De cette façon, tout deviendra plus intuitif.

Il y a en fait un bloc Galerie qui est livré avec l'éditeur Gutenberg, alors utilisons-le à la place du shortcode, et voyons-le en action !

Bloc Galerie à Gutenberg

Comme vous pouvez le voir, nous générons la galerie de la même manière qu'auparavant. Cette fois, nous pouvons apporter des modifications à la volée, comme le nombre de colonnes, de légendes, de liens, etc.

En conclusion, nous privilégierons toujours les blocs aux shortcodes. Ce n'est que lorsque le bloc dont nous avons besoin n'existe pas que nous revenons au shortcode pour conserver la fonctionnalité.

Ajout de mises en page personnalisées

Disposition des colonnes

Il est très courant d'avoir des colonnes dans votre contenu. Peut-être voulez-vous comparer plusieurs choses côte à côte, ou peut-être voulez-vous présenter des objets similaires ensemble.

Avant Gutenberg, vous deviez vous fier à des codes abrégés externes pour créer de telles mises en page. Voir un exemple ci-dessous, en utilisant le plugin "Column Shortcodes":

Cela fonctionne bien, vu qu'il produit le résultat souhaité. Ça a l'air bien quand même ? Imaginez que vous deviez éditer tout ce gâchis de shortcode pour changer quelque chose, ou changer quelque chose par erreur. Ensuite, tout s'arrête de fonctionner et vous devez rechercher les erreurs de syntaxe, ce qui n'a pas l'air amusant.

Maintenant, regardons l'éditeur Gutenberg :

En utilisant les blocs "Colonnes de texte" et "Colonnes", Gutenberg vous permet de créer la mise en page exacte que vous souhaitez sans trop de problèmes. C'est facile, c'est intuitif pour l'utilisateur final et c'est beaucoup moins sujet aux erreurs de la part de l'utilisateur. Créer du contenu ne doit pas donner l'impression d'écrire du code

Ajout de champs personnalisés

WordPress n'est plus uniquement une plateforme de blogs. L'utilisateur a la possibilité de créer un type de publication personnalisé pour ajouter des fonctionnalités à son site WordPress. Un exemple simple serait les critiques de livres, où vous créez un type de publication personnalisé nommé "Livre", en ajoutant des champs personnalisés tels que "Titre", "Auteur", "Date de publication" et "Note".

Avec les champs personnalisés, vous pouvez soit utiliser ceux fournis par WordPress :

Vous pouvez également utiliser un plugin tiers comme ACF (Advanced Custom Fields) ou Meta-box. Ceux-ci peuvent offrir plus de flexibilité et sont largement utilisés par la communauté des développeurs.

Alors, voici le truc, Gutenberg souhaite s'éloigner d'une telle terminologie et se concentrer sur la création et l'édition de contenu. Shortcodes, Widgets, Custom Fields, TinyMCE vous sont peut-être familiers maintenant, mais peuvent être assez déroutants pour les nouveaux arrivants. Gutenberg déplace le focus sur les blocs à la place.

"Oui, tout va bien, mais comment aurons-nous cette fonctionnalité de champ personnalisé avec Gutenberg ?"

En fin de compte, un champ personnalisé n'est qu'une valeur stockée dans la table post_meta de la base de données. Eh bien, un bloc Gutenberg peut déjà le faire.

Ainsi, comme nous en avons discuté avec Shortcodes, quelque chose de similaire s'applique ici : les champs personnalisés peuvent toujours exister dans Gutenberg*, mais en fin de compte, ils devraient être transformés en blocs.

*uniquement avec des plugins tiers. Voir ci-dessous.

Champs personnalisés à Gutenberg

Unlinke shortcodes, les champs personnalisés trouvés dans WordPress ne sont pas pris en charge avec Gutenberg. Vous devrez installer un plugin comme ACF qui supporte Gutenberg, pour que ces champs soient affichés.

Champs personnalisés sous forme de blocs dans Gutenberg

En fin de compte, vous ne voulez pas continuer à travailler avec l'ancienne logique de champ personnalisé à l'esprit, mais créez plutôt vos propres blocs personnalisés . Ces blocs permettent à l'utilisateur de créer des champs personnalisés, sans savoir ce qu'ils sont, ni en quoi ils diffèrent de tout autre bloc.

Conclusion

Eh bien, si nous pouvions résumer tout cet épisode en un seul mot, ce serait "Bloquer".

Si vous voulez commencer à penser à la manière de Gutenberg, chaque fois que vous avez un doute sur quelque chose, pensez « bloquer ». Ce sera désormais la pierre angulaire (jeu de mots) de votre contenu WordPress.

Et comme c'est si important, dans le prochain épisode, nous allons examiner de plus près les blocs par défaut fournis par Gutenberg. On se voit là-bas!