WordPress Gutenberg Tutoriel pour les utilisateurs

Si vous envisagez de créer un site web avec WordPress , vous avez probablement entendu parler de Gutenberg . Gutenberg est l'éditeur de WordPress , qui a été publié avec la version 5.0. 

Depuis sa sortie initiale, de nombreuses fonctionnalités ont été ajoutées à l'éditeur de blocs de WordPress - notamment le regroupement de blocs et les modèles de blocs. Mais la raison principale pour laquelle Gutenberg est si populaire est qu'il vous permet d'éditer des messages et des pages de manière beaucoup plus visuelle que l'éditeur standard WordPress .

Ce guide comprend :

• Ce qu'est Gutenberg
• un guide complet de Gutenberg pour les développeurs
• une courte liste des différentes caractéristiques de Gutenberg

Et je peux vous promettre une chose dès maintenant : Après ce guide, vous saurez comment créer des mises en page professionnelles pour vos sites web avec l'aide de Gutenberg .

Quoi de neuf sur le site Gutenberg Block Editor ?

Avant de nous plonger spécifiquement dans le tutoriel WordPress Gutenberg , jetons d'abord un coup d'œil sur ce qu'est réellement Gutenberg . 

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

Si la connaissance du HTML n'est pas indispensable pour utiliser l'éditeur classique, il faut souvent passer en mode HTML pour effectuer des modifications. Sinon, vous deviez installer un Plugin séparé pour ajouter des fonctionnalités simples comme des tableaux ou des galeries d'images à votre site web.

Avec Gutenberg , vous pouvez concevoir votre site web non pas avec du texte mais avec des images. Avec l'éditeur de blocs WordPress Gutenberg , vous pouvez facilement ajouter des blocs de contenu à vos pages et à vos messages. Il y a des blocs pour les images, pour les paragraphes - et pour presque tous les autres éléments que vous voulez avoir sur votre site web.

Gutenberg est maintenant l'éditeur de blocs par défaut de WordPress et il est livré avec de nombreux blocs prêts à l'emploi. Vous pouvez également ajouter WordPress Plugins qui vous donnera encore plus de blocs pour intégrer facilement diverses fonctionnalités dans vos messages et vos pages. 

WordPress Gutenberg Tutoriel

Lorsque vous créez des sites web, il n'y a pas de mal à simplifier votre flux de travail. Gutenberg peut vous faire gagner beaucoup de temps. Il est donc grand temps d'examiner de plus près l'éditeur de bloc WordPress . Tout d'abord, passons ensemble en revue les bases de Gutenberg.  

Comment utiliser Gutenberg

1. Créez une nouvelle entrée de blog comme d'habitude sur WordPress . 
2. Cliquez sur le signe plus bleu dans le coin supérieur gauche. 
3. Sélectionnez le bloc que vous voulez inclure dans votre poste. 
4. Ajustez les paramètres du bloc dans la conception du poste. 
5. Réorganisez vos blocs en les faisant glisser et tomber.

C'est tout ! La seule chose qui nécessite un peu plus d'explications est de comprendre comment fonctionnent les différents blocs, comment les personnaliser et comment les regrouper. Nous y reviendrons dans la suite de notre tutoriel WordPress Gutenberg . 

Manuel détaillé pour l'éditeur de bloc Gutenberg 

Maintenant que nous avons éliminé l'essentiel, plongeons dans les détails de l'éditeur de bloc WordPress . Lorsque vous chargez pour la première fois l'écran de l'éditeur d'une page ou d'un message avec Gutenberg , l'éditeur semble assez 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 à votre poste

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

Nous nous concentrerons d'abord sur le menu principal, puis nous discuterons de la manière dont vous pouvez faire d'autres ajustements avec le menu secondaire.

Vous pouvez parcourir les types de blocs ou utiliser la barre de recherche pour trouver le type de bloc que vous souhaitez. Ensuite, ajoutez un bloc en tapant "/" et le type de bloc. Par exemple, si vous voulez insérer une image, vous devez taper "/image".

Il existe de nombreux blocs disponibles, notamment

• Talons
• Images
• A la une
• Écouter
• Tableaux
• Séparateur
• Galerie
• Boutons
• Vidéos
• Fichiers audio 

Si vous avez installé Plugins avec des blocs personnalisés, ils apparaîtront également dans cette liste. 

Vous pouvez également ajouter un bloc en cliquant sur le signe plus noir : Cela apparaît lorsque vous cliquez dans le brouillon où il est écrit "Écrivez quelque chose ou tapez pour bloquer la sélection". 

Vous pouvez également suivre les instructions du texte et taper "/" pour choisir dans une liste déroulante d'options.  

2. Réorganisez vos blocs

Vous pouvez déplacer les blocs à l'endroit où vous voulez qu'ils apparaissent en utilisant les flèches sur le bloc lui-même ou en appuyant sur les points entre les flèches pour faire glisser et déposer les blocs.

Avec l'éditeur de bloc WordPress , il est beaucoup plus facile de réorganiser votre contenu qu'avec l'éditeur classique. Vous n'avez pas à vous soucier de casser le code, puisque 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 vous pouvez organiser vos blocs est l'une des meilleures caractéristiques de Gutenberg Block Editor. Vous gagnez du temps en réparant les codes cassés et vous n'avez pas besoin de faire des copier-coller pour faire le travail.

3. ajuster les paramètres de style de votre bloc

L'étape suivante de notre tutoriel WordPress Gutenberg consiste à faire connaissance avec le menu des paramètres de style. Dans certains cas, certaines options apparaissent près du bloc lorsque vous cliquez dessus. Par exemple, si vous modifiez un bloc de paragraphes, certaines options familières apparaîtront juste au-dessus du bloc. 

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

Les options de réglage du style que vous pouvez personnaliser dépendent du bloc. Par exemple, les paramètres du bloc Paragraphe sont différents de ceux du bloc Image.

Le menu Paramètres de style vous permet de personnaliser facilement les blocs de vos messages. Là encore, contrairement à l'éditeur classique, vous n'avez pas à vous soucier de modifier la légende d'une image et de salir le formatage du texte sous-jacent. 

Créer des blocs d'édition Gutenberg réutilisables

Nous en venons maintenant aux conseils avancés du tutoriel WordPress Gutenberg . Vous gagnerez beaucoup de temps et d'efforts en sauvegardant des blocs que vous pourrez réutiliser dans de futurs messages, pages et autres sites web WordPress .

Les blocs réutilisables sont utiles lorsque vous avez des éléments qui doivent être ajoutés régulièrement à une page ou un type de message particulier. 

Imaginons que vous rédigiez des critiques de films et que vous ayez un tableur qui affiche votre classement pour chaque film. Vous voulez qu'il soit toujours le même, avec un style spécifique et le même nombre de colonnes et de lignes. Si vous créez un bloc réutilisable, vous pouvez gagner un temps considérable en le recréant pour chaque poste. 

La sauvegarde du style et des différents attributs des éléments peut également permettre de gagner du temps pour les boutons. 

Supposons que vous ayez besoin du même CTA (call to action) dans chaque message que vous écrivez. Pour créer un bouton réutilisable, commencez par suivre le processus habituel d'ajout d'un bloc de boutons. Ajustez le style et le texte jusqu'à ce qu'il ressemble à ce que vous voulez.  

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

Ici, vous pouvez donner un nom à votre nouveau bloc. 

Si vous souhaitez réutiliser ce bloc, allez dans le menu"Blocs réguliers", passez à l'onglet"Réutilisable" et sélectionnez votre bloc sauvegardé. 

Vous pouvez également exporter des blocs réutilisables pour les utiliser sur d'autres sites web. Il suffit de cliquer sur les trois points à côté du bloc, de sélectionner Exporter en tant que JSON et de télécharger le fichier. 

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

Cela ouvre une section d'aspect plus traditionnel dans le WordPress Tableau de bord où vous pouvez gérer tous les blocs réutilisables que vous avez créés. 

Si vous avez enregistré des blocs réutilisables provenant d'autres sites web, vous pouvez les télécharger en cliquant sur Importer de JSON. Une fois que vous avez fait cela, vous devriez pouvoir y accéder comme d'habitude à partir de l'onglet Réutilisable dans le menu Blocs. 

Placez vos blocs en groupes

Le prochain conseil de notre tutoriel WordPress Gutenberg concerne le regroupement des blocs. Si vous mettez deux ou plusieurs blocs dans un groupe, vous pouvez les ajuster et les manipuler comme s'il s'agissait d'un seul bloc. 

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

Pour créer un groupe de blocs à l'aide de l'éditeur de blocsGutenberg , sélectionnez tous les blocs que vous souhaitez regrouper. Cliquez ensuite sur l'icône en couches à gauche du petit menu superposé :

Un nouveau menu apparaît avec l'inscription"Transformer en", cliquez sur Groupe. C'est tout. Maintenant, vous pouvez déplacer et ajuster ces blocs comme s'ils ne faisaient qu'un. 

Vous pouvez toujours modifier les paramètres de chaque bloc individuel. Par exemple, vous pouvez ajouter du texte à un bloc de paragraphes et en modifier l'apparence. 

Si vous souhaitez dégrouper des blocs, sélectionnez le groupe et cliquez sur les trois points du menu de superposition. Faites défiler vers le bas et cliquez sur Dégrouper.

Cette fonction fonctionne également avec des blocs réutilisables. Après avoir regroupé les blocs, vous pouvez les sauvegarder comme blocs réutilisables en suivant la même procédure que ci-dessus. 

Utilisation des modèles de blocs dans l'éditeur de blocs WordPress

Avec WordPress Block Patterns, vous pouvez créer et partager des modèles de blocs prédéfinis. Avec les Block Patterns, vous pouvez créer des mises en page complexes en quelques clics de souris.

Pour accéder à Block Patterns, cliquez sur le même signe plus que celui que vous avez utilisé pour accéder au menu Block . Sélectionnez l'onglet Patterns. 

A première vue, les Block Patterns ressemblent à des blocs réutilisables. Cependant, les modèles de blocs sont ce qui se rapproche le plus de la possibilité de créer des pages entières dans Gutenberg le plus proche. 

Avec les Block Patterns, vous pouvez ajouter des sections de mise en page complètes à vos messages ou pages d'un simple clic. Ils sont idéaux si vous souhaitez créer et enregistrer une mise en page pour l'utiliser dans plusieurs messages. 

L'éditeur de blocs WordPress est livré avec plusieurs modèles pré-conçus, notamment

• plusieurs colonnes de texte
• boutons adjacents
• en-têtes personnalisés
• Citations avec photos

Un autre avantage des Block Patterns est qu'ils vous permettent de passer plus facilement de l'une à l'autre des Themes passer de l'un à l'autre. Comme votre formatage est lié dans les blocs eux-mêmes, il n'est pas affecté par un autre Theme . 

Si vous souhaitez créer vos propres modèles de blocs manuellement, cela nécessite des compétences en programmation. Dans le manuel de développement, ils sont appelés " blocs prédéfinis ". 

La création de modèles de blocs à partir de zéro nécessite l'utilisation de l'interface de programmation d'applications de blocs (API). Cependant, leBlock Pattern Builder Plugin peut vous aider. 

Ajouter des blocs supplémentaires à Gutenberg

Avant de poursuivre avec ce tutoriel WordPress Gutenberg , sachez qu'il existe plusieurs Plugins qui vous 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 des blocs WordPress où vous pouvez trouver et ajouter des blocs supplémentaires pour Gutenberg . 

Le projet initial était de créer un sous-répertoire pour le bloc unique Plugins. Le répertoire actuel est plutôt une sous-section du répertoire standard Plugin de WordPress avec une liste interrogeable de blocs Plugins. 

Edition complète du site web en Gutenberg

Pour l'instant, Gutenberg ne permet pas encore l'édition complète du site. Toutefois, l'équipe de développement de WordPress fait de grands progrès vers cet objectif, notamment l'ajout de modèles de blocs. 

Il existe actuellement une version expérimentale de Twenty Twenty Themes, qui utilise l'édition complète du site web et adopte l'idée d'un Themesen bloc. 

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

Bien que l'éditeur de bloc Gutenberg ne soit pas encore un constructeur de pageWordPress s à part entière , il est en bonne voie de le devenir. En attendant, les Block Patterns, comme expliqué ci-dessus dans le tutoriel WordPress Gutenberg Block Tutorial, offrent un ensemble de fonctionnalités très proche de celui d'un éditeur de site web complet. 

Inconvénients de l'éditeur Gutenberg 

Si Gutenberg est un outil utile qui a changé la façon dont de nombreux utilisateurs interagissent avec WordPress et créent du contenu, l'éditeur n'est pas sans inconvénients. 

Par exemple, lorsque le site Gutenberg a été introduit pour la première fois, il était assez bogué. La plupart de ces problèmes ont été résolus depuis. 

Une chose qui n'est pas un bogue, cependant, est le fait que Gutenberg est toujours incompatible avec de nombreux Themes . Ainsi, si vous souhaitez utiliser un Theme particulier et que vous aimez le design, il est probable que vous ne pourrez pas le personnaliser ou utiliser Gutenberg dans ce dernier. Si vous essayez, le résultat est souvent tout simplement un gâchis. 

Eh bien, Gutenberg est compatible avec certains Themes , mais pas assez pour se vanter d'une compatibilité étendue. 

Un autre problème que le site Gutenberg pose est le fait qu'il n'offre pas la même flexibilité que l'éditeur classique. Bien sûr, Gutenberg élimine certains des problèmes de formatage idiosyncrasiques qui surviennent avec l'éditeur classique - mais malheureusement, vous êtes limité dans les types de pages que vous pouvez créer. 

Étant donné que les options de personnalisation plus larges de Theme ne sont pas encore disponibles sur Gutenberg , vous devrez vous contenter de ce qui est compatible avec Gutenberg Themes et de ce qui est disponible pour les blocs et le bloc Plugins . 

Theme Les ressources disponibles pour l'utilisation de Gutenberg augmentent à un rythme régulier - mais cela ne fait pas de Gutenberg un constructeur. Pas encore. 

En fin de compte, Gutenberg est le choix idéal pour ceux qui sont soit déjà habitués aux créateurs de pages ou aux éditeurs purement visuels et qui veulent conserver cette expérience, soit pour ceux qui veulent simplement se concentrer sur le contenu et faire du glisser-déposer de conception. 

Dernières réflexions : guide sur WordPress Gutenberg 

L'éditeur Gutenberg fait désormais partie du noyau WordPress . L'équipe de développement à l'origine du site WordPress a de grands projets à cet égard. À terme, vous pourrez créer des menus de navigation avec Gutenberg , créer des mises en page complètes de sites web et Gutenberg sera compatible avec encore plus de Themes . 

D'ici là, vous pouvez profiter des fonctionnalités actuellement offertes par WordPress Block Editor et créer des messages et des pages visuellement attrayants - sans connaître une seule ligne de code. Une bonne affaire, si vous nous demandez. 

Alors allez-y : utilisez les conseils de notre tutoriel WordPress Gutenberg et commencez à personnaliser le contenu de votre site web. Et assurez-vous que votre site web fonctionne à une vitesse optimale avec un plan d'hébergement de site webWordPress de RAIDBOXES avec une vitesse optimale.