Si tu envisages de créer un site web avec WordPress, tu as probablement déjà entendu parler de Gutenberg . Gutenberg est l'éditeur de WordPress, sorti avec la version 5.0. 

Depuis la première publication, de nombreuses fonctions ont été ajoutées à l'éditeur de blocs WordPress - notamment le regroupement de blocs et les motifs de blocs. Mais si Gutenberg est si populaire, c'est surtout parce qu'il permet d'éditer des articles et des pages de manière beaucoup plus visuelle qu'avec l'éditeur WordPress standard.

Ce guide comprend

• Ce qui est Gutenberg
• un guide complet sur Gutenberg pour les développeurs
• une brève liste des différentes caractéristiques en Gutenberg

Et je peux déjà te promettre une chose : Après avoir lu ce guide, tu sauras comment créer des mises en page professionnelles pour tes sites web à l'aide de Gutenberg .

Quelles sont les nouveautés de l'éditeur de blocs Gutenberg ?

Avant de nous plonger concrètement dans le tutoriel WordPress Gutenberg , voyons d'abord ce qu'est réellement Gutenberg . 

Gutenberg remplace l'éditeur TinyMCE et te permet d'utiliser des blocs de contenu pour ajouter du texte, des images et d'autres médias à tes messages et pages. L'éditeur TinyMCE classique était basé sur le texte - et limitait les nouveaux utilisateurs qui n'avaient aucune connaissance en codage. 

Alors que des connaissances en HTML n'étaient pas absolument nécessaires pour utiliser l'éditeur classique, tu devais souvent aller dans l'affichage HTML pour pouvoir effectuer la moindre modification. Sinon, tu devais installer un plugin séparé pour ajouter des fonctions simples comme des tableaux ou des galeries d'images à ton site.

Avec Gutenberg , tu peux concevoir ton site web non pas avec du texte, mais avec des images. Avec l'éditeur de blocs de WordPress Gutenberg , tu peux facilement ajouter des blocs de contenu à tes pages et à tes articles. Il existe des blocs pour les images, pour les paragraphes - et pour presque tous les autres éléments que tu souhaites avoir sur ton site.

Gutenberg est désormais l'éditeur de blocs par défaut de WordPress et il est livré avec de nombreux blocs out-of-the-box . Tu peux également ajouter des plugins WordPress qui te permettront de disposer d'encore plus de blocs pour intégrer facilement différentes fonctions dans tes articles et pages. 

Tutoriel WordPress Gutenberg

Lorsque tu crées des sites web, il n'est jamais inutile de simplifier ton flux de travail. Gutenberg peut te faire gagner beaucoup de temps à cet égard. Il est donc grand temps de nous intéresser de plus près à l'éditeur de blocs WordPress. Tout d'abord, nous allons passer en revue ensemble les bases de Gutenberg. Nous allons ensuite nous pencher sur le fonctionnement de l'outil.  

Comment utiliser Gutenberg

1. Crée une nouvelle entrée de blog dans WordPress comme d'habitude. 
2. Clique sur le signe plus bleu dans le coin supérieur gauche. 
3. Sélectionne le bloc que tu souhaites insérer dans ton message. 
4. Adapte les paramètres du bloc au sein du projet de contribution. 
5. Réorganise tes blocs en les déplaçant par glisser-déposer.

C'est tout ! Seulement pour comprendre comment fonctionnent les différents blocs, les adapter et les regrouper, il faut un peu plus d'explications. C'est exactement ce que nous allons faire dans le reste de notre tutoriel WordPress Gutenberg . 

Manuel détaillé sur Gutenberg Block Editor 

Maintenant que les bases ont été évacuées, plongeons dans les particularités de l'éditeur de bloc WordPress. Lorsque tu charges pour la première fois l'écran de l'éditeur d'une page ou d'un article avec Gutenberg , l'éditeur semble plutôt vide - plus encore que l'éditeur classique, car les options de menu traditionnelles sont absentes. Ce n'est pas grave. La première étape consiste à ajouter quelques blocs. 

1. ajouter des blocs à ta contribution

Pour ajouter un bloc à ton message, appuie sur le signe plus dans le coin supérieur gauche du projet de message. Un nouveau bloc sera superposé avec un petit ensemble d'options de menu. 

Nous nous concentrerons d'abord sur le menu principal et nous verrons plus tard comment tu peux faire d'autres ajustements avec le menu secondaire.

Tu peux parcourir les types de blocs ou utiliser la barre de recherche pour trouver le type de bloc souhaité. Ajoute ensuite un bloc en tapant "/" et le type de bloc. Par exemple, si tu veux insérer une image, tu taperas "/image".

De nombreux blocs sont disponibles, notamment

• Paragraphes
• Images
• Titres
• Écouter
• Tableaux
• Séparateur
• Galerie
• Boutons
• Vidéos
• Fichiers audio 

Si tu as installé des plugins avec des blocs personnalisés, ils apparaissent également dans cette liste. 

Tu peux aussi ajouter un bloc en cliquant sur le signe plus noir : Celui-ci apparaît lorsque tu cliques dans le brouillon, où il est dit : "Écrire quelque chose ou taper pour sélectionner un bloc". 

Ou tu peux suivre les instructions du texte et taper "/" pour choisir dans une liste déroulante d'options.  

2. réorganise tes blocs

Tu peux déplacer des blocs en utilisant les flèches sur le bloc lui-même ou en appuyant sur les points entre les flèches par glisser-déposer des blocs à l'endroit où ils doivent apparaître.

Avec l'éditeur de blocs WordPress, il est beaucoup plus facile de réorganiser ton contenu qu'avec l'éditeur classique. Tu n'as pas à t'inquiéter de casser le code, car toutes les informations sur le contenu du bloc (y compris la police, la couleur et la taille) se déplacent avec le bloc. 

La simplicité avec laquelle tu peux agencer tes blocs est l'une des meilleures caractéristiques de l'éditeur de blocs Gutenberg . Tu gagnes du temps en corrigeant les erreurs de code et tu n'as pas besoin de faire du copier-coller pour faire le travail.

3. adapte les paramètres de style de ton bloc

La prochaine étape de notre tutoriel WordPress Gutenberg est de se familiariser avec le menu Style Settings. Dans certains cas, certaines options apparaissent à proximité du bloc lorsque tu cliques dessus. Par exemple, si tu édites un bloc de paragraphe, certaines options connues apparaissent juste au-dessus du bloc. 

Cependant, un menu secondaire apparaît également sur le côté droit de l'écran. Clique sur l'onglet "Paramètres".  

Les options des Style Settings que tu peux personnaliser dépendent du bloc en question. Par exemple, les paramètres du bloc de paragraphe ont un aspect différent de ceux du bloc d'image.

Le menu Style Settings te permet d'adapter très facilement les blocs de tes messages. Là encore, contrairement à l'éditeur classique, tu n'as pas à te soucier d'apporter des modifications à la légende d'une image et de bouleverser ainsi le formatage du texte sous-jacent. 

Créer des blocs réutilisables Gutenberg Editor

Nous allons maintenant passer aux conseils avancés du tutoriel WordPress Gutenberg . Tu économiseras beaucoup de temps et d'efforts en sauvegardant des blocs que tu pourras réutiliser dans de futurs articles, pages et autres sites WordPress.

Les blocs réutilisables sont utiles si tu as des éléments qui doivent être ajoutés régulièrement à une page ou à un type de publication spécifique. 

Supposons que tu rédiges des critiques de films et que tu disposes d'un tableau qui affiche ton classement pour chaque film. Celui-ci doit toujours avoir la même apparence, avec un style spécifique et le même nombre de colonnes et de lignes. En créant un bloc réutilisable, tu peux gagner un temps considérable en le recréant à chaque article. 

L'enregistrement du style et des différents attributs des éléments peut également représenter un véritable gain de temps pour les boutons. 

Supposons que tu aies besoin du même CTA (Call to Action) dans chaque message que tu écris. Pour créer un bouton réutilisable, tu commences par suivre le processus typique d'ajout d'un bloc de boutons. Ajuste le style et le texte jusqu'à ce qu'il ressemble à ce que tu souhaites.  

Cliquez ensuite sur les trois points du menu des blocs et sélectionnez Ajouter aux blocs réutilisables. 

Ici, tu peux donner un nom à ton nouveau bloc. 

Si tu veux réutiliser ce bloc, va dans le menu "Blocs réguliers", passe à l'onglet "Réutilisable" et sélectionne ton bloc sauvegardé. 

Tu peux aussi exporter des blocs réutilisables pour les utiliser sur d'autres sites web. Pour cela, il suffit de cliquer sur les trois points à côté du bloc, de sélectionner Exporter en JSON et de télécharger le fichier. 

Ensuite, pour ajouter un bloc réutilisable exporté à un autre site WordPress, va dans l'onglet Réutilisable du menu Blocs et sélectionne Gérer tous les blocs réutilisables. 

Cela ouvre une section d'apparence plus traditionnelle dans WordPress DashboardDans cette section, tu peux gérer tous les blocs réutilisables que tu as créés. 

Si tu as enregistré des blocs réutilisables provenant d'autres sites, tu peux les télécharger en cliquant sur Importer depuis JSON. Une fois que tu as fait cela, tu devrais pouvoir y accéder comme d'habitude via l'onglet Réutilisable du menu Blocs. 

Place tes blocs en groupes

La prochaine astuce pro de notre tutoriel WordPress Gutenberg concerne le regroupement de blocs. En plaçant deux blocs ou plus dans un groupe, tu peux les personnaliser et les manipuler comme s'ils ne formaient qu'un seul bloc. 

Par exemple, tu peux regrouper un bloc d'appel à l'action des médias sociaux avec un bloc qui contient des icônes de partage social. Tu peux également regrouper un bloc de paragraphes avec un bloc de boutons pour créer un CTA standard que tu peux insérer à la fin de tes messages. 

Pour créer un groupe de blocs avec l'éditeur de blocsGutenberg , sélectionne tous les blocs que tu veux regrouper. Clique ensuite sur l'icône en couches sur le côté gauche du petit menu superposé :

Un nouveau menu apparaît avec la mention "Transformer en", clique sur Groupe. C'est tout ce qu'il y a à faire. Tu peux maintenant déplacer et adapter ces blocs comme s'ils ne faisaient qu'un. 

Tu peux toujours apporter des modifications aux paramètres de chaque bloc. Tu peux par exemple ajouter du texte à un bloc de paragraphe et modifier son apparence. 

Si tu veux défaire le regroupement de blocs, sélectionne le groupe et clique ensuite sur les trois points du menu de superposition. Fais défiler vers le bas et clique sur Dégrouper.

Cette fonction fonctionne également avec les blocs réutilisables. Après avoir regroupé des blocs, tu peux les enregistrer en tant que blocs réutilisables en suivant la même procédure que celle décrite ci-dessus. 

Utiliser les Block Patterns dans l'éditeur de blocs de WordPress

Avec WordPress Block Patterns, tu peux créer des mises en page de blocs prédéfinies et les partager. Avec Block Patterns, tu peux créer des mises en page complexes en quelques clics de souris.

Pour accéder à Block Patterns, clique sur le même signe plus que celui que tu as utilisé pour accéder au menu Block . Sélectionne l'onglet Motifs. 

À première vue, les block patterns ressemblent à des blocs réutilisables. Cependant, les block patterns sont ce qui ressemble le plus à la capacité de créer des pages entières dans Gutenberg est ce qui s'en rapproche le plus. 

Avec Block Patterns, tu peux ajouter des sections de mise en page complètes à tes messages ou pages en un seul clic. Elles sont idéales si tu souhaites créer et enregistrer une mise en page à utiliser dans plusieurs publications. 

L'éditeur de blocs WordPress est livré avec plusieurs modèles prédéfinis, dont

• plusieurs colonnes de texte
• boutons juxtaposés
• en-têtes définis par l'utilisateur
• Citations avec images

Un autre avantage des Block Patterns est qu'ils vous permettent de passer plus facilement d'un thème à l'autre. Comme ton formatage est lié aux blocs eux-mêmes, il n'est pas affecté par un autre thème. 

Si tu souhaites créer manuellement tes propres block patterns, cela nécessite quelques connaissances en programmation. Dans le manuel de développement, on les appelle les blocks layouts prédéfinis. 

La création de Block Patterns à partir de zéro nécessite l'utilisation de l'interface de programmation d'application (API) Block. Le plugin Block Pattern Builder peut toutefois aider. 

Ajouter des blocs supplémentaires à Gutenberg

Avant de poursuivre ce tutoriel WordPress Gutenberg , tu dois savoir qu'il existe plusieurs plugins qui te permettent d'ajouter encore plus de types de blocs à l'éditeur, notamment

• Table des matières
• Listes de prix
• Google Maps
• Formulaires de contact

Il existe un répertoire officiel de blocs WordPress où tu peux trouver et ajouter des blocs supplémentaires pour Gutenberg . 

À l'origine, il était prévu de créer un sous-répertoire pour les plugins monoblocs. Au lieu de cela, le répertoire actuel est une sous-section du répertoire standard des plug-ins de WordPress avec une liste consultable des plug-ins basés sur les blocs. 

Édition de site web complet en Gutenberg

Pour le moment, Gutenberg ne permet pas encore d'éditer entièrement le site. L'équipe de développement de WordPress fait toutefois de grands progrès dans ce sens, notamment en ajoutant des Block Patterns. 

Il existe actuellement une version expérimentale du thème Twenty Twenty, qui utilise l'édition complète du site et reprend l'idée d'un thème basé sur les blocs. 

Grâce à l'éditeur de blocs WordPress, tu peux désormais créer des mises en page entièrement personnalisées, basées sur des blocs - mais uniquement pour les articles et les pages. Une fois que l'édition complète du site web est arrivée sur Gutenberg , les widgets deviennent superflus. Les utilisateurs ont ainsi un contrôle total sur chaque élément de la mise en page, y compris les en-têtes, les pages et les pieds de page. 

Bien que l'éditeur de blocs Gutenberg ne soit pas encore un constructeur de pages WordPress à part entière, il est en passe de le devenir. En attendant, les Block Patterns, tels qu'ils sont expliqués ci-dessus dans le tutoriel WordPress Gutenberg Block, offrent un ensemble de fonctionnalités très proches de celles d'un éditeur de site web complet. 

Inconvénients de l'éditeur Gutenberg 

Bien que Gutenberg soit un outil utile qui a changé la manière dont de nombreux utilisateurs interagissent avec WordPress et créent du contenu, l'éditeur n'est évidemment pas sans inconvénients. 

Par exemple, lorsque Gutenberg a été introduit pour la première fois, il était assez sujet aux erreurs. La plupart d'entre elles ont été corrigées depuis. 

Une chose qui n'est cependant pas un bug est le fait que Gutenberg est encore incompatible avec de nombreux thèmes. Ainsi, si tu veux utiliser un thème particulier et que tu aimes son design, il est probable que tu ne puisses pas le personnaliser ou utiliser Gutenberg dedans. Si tu essayes, le résultat est souvent tout simplement un gâchis. 

Eh bien, Gutenberg est compatible avec certains thèmes, mais pas suffisamment pour pouvoir se vanter d'une compatibilité largement répandue. 

Un autre problème soulevé par Gutenberg est le fait qu'il n'offre pas la même flexibilité que l'éditeur classique. Certes, Gutenberg élimine certains des problèmes de formatage idiosyncratiques rencontrés avec l'éditeur classique - mais malheureusement, tu es limité dans le type de pages que tu peux créer. 

Comme des options plus larges de personnalisation des thèmes ne sont pas encore disponibles sur Gutenberg , tu dois te contenter de savoir quels thèmes compatibles avec Gutenberg sont disponibles et quels blocs et plugins de blocs sont disponibles. 

Les ressources disponibles pour l'utilisation de Gutenberg augmentent à un rythme soutenu, mais Gutenberg n'est pas pour autant un constructeur de thèmes. Pas encore. 

En fin de compte, Gutenberg est le choix idéal pour ceux qui sont soit déjà habitués aux Page Builders ou aux éditeurs purement visuels et qui souhaitent conserver cette expérience, soit pour ceux qui veulent se concentrer uniquement sur le contenu et faire du design par glisser-déposer. 

Réflexions finales : guide sur WordPress Gutenberg 

L'éditeur Gutenberg fait désormais partie du WordPress Core. L'équipe de développement derrière WordPress a de grands projets pour cela. À terme, tu seras en mesure de créer des menus de navigation avec Gutenberg , de créer des mises en page complètes de sites web et Gutenberg sera compatible avec encore plus de thèmes. 

En attendant, tu peux utiliser au mieux les fonctions offertes actuellement par l'éditeur de bloc WordPress et créer des articles et des pages visuellement attrayants - sans connaître une seule ligne de code. Une assez bonne affaire, si tu nous demandes. 

Continue donc : utilise les conseils de notre tutoriel WordPress Gutenberg et commence à personnaliser le contenu de ton site. Et assure-toi qu'avec une offre d'hébergement de site WordPress de Raidboxes fonctionne à une vitesse optimale.