Si tu envisages de créer un site web avec WordPress, tu as probablement déjà entendu parler de Gutenberg . Gutenberg est l'éditeur pour WordPress, qui a été publié 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 est possible 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 bloc 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 articles et pages. L'éditeur TinyMCE classique était basé sur le texte - et limitait les nouveaux utilisateurs:-trices 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 faire le moindre changement. 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 créer ton site web non pas avec du texte, mais avec des images. Avec WordPress Gutenberg Block Editor, tu peux facilement ajouter des blocs de contenu à tes pages et 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 maintenant l'éditeur de blocs standard de WordPress et il est livré avec de nombreux blocs out-of-the-box . Tu peux aussi ajouter des plugins WordPress qui te fourniront encore plus de blocs pour intégrer facilement différentes fonctions dans tes articles et pages. 

WordPress Gutenberg Tutoriel

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 d'examiner de plus près l'éditeur de bloc WordPress. Tout d'abord, nous allons voir ensemble les bases de Gutenberg.  

Comment utiliser Gutenberg

1. Crée comme d'habitude une nouvelle entrée de blog dans WordPress. 
2. Clique sur le signe plus bleu dans le coin supérieur gauche. 
3. Sélectionne le bloc que tu veux insérer dans ton message. 
4. Ajuste les paramètres du bloc à l'intérieur du projet de post. 
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 la partie restante de notre tutoriel WordPress Gutenberg . 

Manuel détaillé sur Gutenberg Block Editor 

Après avoir éliminé les bases, nous allons maintenant nous plonger dans les particularités de l'éditeur de bloc WordPress. Lorsque tu charge 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 - encore plus 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 à ta contribution, appuie sur le signe plus dans le coin supérieur gauche du projet de contribution. Un nouveau bloc sera superposé avec un petit ensemble d'options de menu. 

Nous nous concentrerons d'abord sur le menu principal, puis nous discuterons plus tard de la façon dont 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
• Écoute
• Tableaux
• Séparateur
• Galerie
• Boutons
• Vidéos
• Fichiers audio 

Si tu as installé des plugins avec des blocs personnalisés, ils apparaîtront é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 : "écris quelque chose ou tape 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 les 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 bloc 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 facilité avec laquelle tu peux organiser tes blocs est l'une des meilleures caractéristiques de l'éditeur de blocs Gutenberg . Tu gagnes du temps en corrigeant les codes erronés et tu n'as pas besoin de compter sur le 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 paramètres de style que tu peux ajuster dépendent du bloc en question. Par exemple, les paramètres du bloc de paragraphe sont différents des paramètres du bloc d'image.

Le menu Style Settings te permet d'adapter facilement les blocs dans tes contributions. 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 d'édition réutilisables Gutenberg

Passons maintenant aux conseils avancés du tutoriel WordPress Gutenberg . Tu économises 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 spécifique ou à un type de publication particulier. 

Supposons que tu écrives des critiques de films et que tu aies un tableau qui affiche tes classements 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. Si tu crées un bloc réutilisable, tu peux gagner un temps considérable en le recréant à chaque article. 

Enregistrer le style et les différents attributs des éléments peut aussi représenter un réel gain de temps pour les boutons. 

Supposons que tu aies besoin du même CTA (appel à l'action) dans chaque post 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.  

Clique ensuite sur les trois points dans le menu des blocs et sélectionne 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 enregistré. 

Tu peux aussi exporter des blocs réutilisables pour les utiliser sur d'autres sites. 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 plutôt traditionnelle dans le Tableau de bord WordPress. Dans 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 dans le menu Blocs. 

Place tes blocs en groupes

La prochaine astuce Pro de notre tutoriel WordPress Gutenberg concerne le regroupement de blocs. Si tu mets deux blocs ou plus dans un groupe, tu peux les ajuster 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 aussi 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 l'inscription "Transformer vers", clique sur Groupe. C'est tout ce que tu as à faire. Maintenant, tu peux déplacer et ajuster ces blocs comme s'ils ne faisaient qu'un. 

Tu peux toujours faire des changements dans les paramètres de chaque bloc. Tu peux par exemple ajouter du texte à un bloc de paragraphe et changer son apparence. 

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

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 des motifs de bloc dans l'éditeur de bloc de WordPress

Avec WordPress Block Patterns, tu peux créer des mises en page de bloc 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. 

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

Avec Block Patterns, tu peux ajouter des sections de mise en page complètes à tes posts ou pages en un seul clic. Ils sont parfaits si tu veux 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, notamment

• plusieurs colonnes de texte
• boutons juxtaposés
• En-têtes personnalisés
• Citations avec images

Un autre avantage des Block Patterns est qu'ils te permettent de passer plus facilement d'un thème à l'autre. Comme ton formatage est lié aux blocs eux-mêmes, il ne sera 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, ils sont appelés blocklayouts 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. Cependant, le plugin Block Pattern Builder peut t'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 . 

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

Édition complète de sites web en Gutenberg

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

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

Avec WordPress Block Editor, 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. Ainsi, les utilisateurs ont 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 bloc Gutenberg ne soit pas encore un constructeur de page WordPress à part entière, il est en bonne voie pour le devenir. En attendant, les patrons de bloc, comme ceux expliqués plus haut 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 façon dont de nombreux utilisateurs:trices 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 de ces problèmes ont été résolus depuis. 

Une chose qui n'est cependant pas un bug, c'est le fait que Gutenberg est toujours incompatible avec de nombreux thèmes. Donc 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 essaies, le résultat est souvent tout simplement un désordre. 

Eh bien, Gutenberg est compatible avec certains thèmes, mais pas suffisamment pour pouvoir se vanter d'une compatibilité généralisée. 

Un autre problème que Gutenberg met sur la table est le fait qu'il n'offre pas la même flexibilité que l'éditeur classique. Bien sûr, Gutenberg élimine quelques-uns des problèmes de formatage particuliers qui se produisent 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 de thème 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 bloc sont disponibles. 

Les ressources disponibles pour l'utilisation de Gutenberg augmentent à un rythme soutenu - mais Gutenberg n'est pas 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 le design par glisser-déposer. 

Réflexions finales : guide sur WordPress Gutenberg 

L'éditeur Gutenberg fait désormais partie du cœur de WordPress. L'équipe de développement derrière WordPress a de grands projets pour cela. Un jour, 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 à adapter le contenu de ton site. Et assure-toi que ton site web soit hébergé avec une offre d'hébergement de site web WordPress de Raidboxes fonctionne avec une vitesse optimale.