Tutoriel WordPress Gutenberg: comment utiliser le nouvel éditeur de blocs WordPress 5.0

Le 6 décembre 2018, avec la sortie de WordPress 5.0, WordPress a beaucoup changé. Il n’y a plus d’ancien éditeur de contenu tinymce, mais un nouvel éditeur de bloc nommé Gutenberg. Bien que le nouvel éditeur de blocs vous permette de faire quelque chose que vous n’auriez pas pu faire auparavant dans WordPress, il n’est pas toujours l’outil le plus intuitif lorsque vous vous asseyez pour la première fois. Pour vous aider à tirer le meilleur parti de votre nouvel éditeur de bloc, nous avons décidé de créer ce tutoriel pour vous aider à vous familiariser avec l’utilisation de l’éditeur de bloc pour effectuer le même type d’action que vous avez fait auparavant avec l’éditeur tinymce.
Que vous ayez mis votre site à jour vers WordPress 5.0 ou que vous utilisiez encore WordPress 4.9, ce tutoriel vous aidera. Note: Bien que le nouvel éditeur ait été appelé \
Les paragraphes sont des blocs séparés les images sont des blocs séparés les vidéos YouTube intégrées sont des blocs séparés les titres sont des blocs séparés… Tout est un quartier séparé. Dans ce tutoriel WordPress Gutenberg, je mentionnerai un peu \
Mi dans le tutoriel, laissez – moi vous montrer rapidement comment le faire avec précision. Il y a trois façons différentes d’insérer un nouveau bloc: premièrement, vous pouvez utiliser l’une des deux icônes plus. Ces icônes ouvrent une fenêtre contextuelle dans laquelle vous pouvez sélectionner le bloc à insérer:
L’icône plus dans le coin supérieur gauche est toujours visible. Insérer un nouveau bloc à la fin du contenu. Cette icône plus n’apparaît que si vous passez le curseur sur l’espace entre deux blocs existants. Vous permet d’insérer un nouveau bloc entre les blocs existants. Deuxièmement, vous pouvez également appuyer sur Entrée pour créer un nouveau bloc vide sous le bloc en cours de traitement. Vous pouvez ensuite utiliser l’icône la plus à gauche du bloc pour sélectionner le type de bloc à utiliser: Ces différents boutons auront plus de sens dans le tutoriel de l’éditeur de bloc.
Comment utiliser le texte dans l’éditeur de blocs WordPress commençons par le contenu le plus basique: le texte. Dans cette section, je vais vous montrer comment traiter le texte, le titre, les guillemets, etc., dans un paragraphe. Par conséquent, je vais également vous montrer comment insérer des liens et d’autres paramètres de base. Ajouter différents paragraphes de texte il est facile de créer un nouveau texte dans un paragraphe: il suffit de cliquer et de taper comme avec l’ancien éditeur. La seule différence est que chaque fois que vous appuyez sur Entrée, l’éditeur crée un bloc séparé pour le segment suivant: Ajouter un titre (H2, H3, H4) et d’autres blocs de texte si vous voulez insérer un titre, une façon est d’insérer un nouveau bloc de titre:
Alternativement, vous pouvez utiliser la barre d’outils pour convertir un bloc de paragraphe normal en titre: L’article se poursuit comme suit: Vous pouvez utiliser la même méthode pour d’autres blocs de texte, par exemple: liste de guillemets eccetera. Formatage du texte (alignement, couleur, etc.) Pour formater le texte, vous utiliserez deux zones. Premièrement, il y a
Déplacez la barre d’outils. Cette barre d’outils n’apparaît que si vous ne l’avez pas dactylographiée activement. Vous pouvez modifier l’alignement ici pour ajouter en gras et en italique Si vous n’aimez pas l’apparence et la disparition des barres d’outils formatées, vous pouvez également utiliser les paramètres de l’éditeur pour réparer les barres d’outils en haut de l’interface, qui fonctionne plus comme l’éditeur tinymce classique:
Pour d’autres options de formatage, telles que la couleur du texte ou la taille de la police, vous pouvez utiliser la barre latérale verrouillée (sélectionnée automatiquement lorsque vous cliquez sur un bloc). Par exemple, si vous cliquez sur un paragraphe, vous pouvez utiliser la barre latérale pour agrandir ou réduire le texte et \/ ou changer la couleur du texte: Malheureusement, ces options sont différentes pour chaque bloc. Par exemple, vous ne pouvez pas changer la couleur du titre pour le moment à moins que vous n’utilisiez un CSS personnalisé. L’article se poursuit comme suit: Insérer un lien pour insérer un lien, cliquez sur le bloc contenant le texte à lier. Ensuite, localisez l’icône du lien dans la barre d’outils de formatage. Une interface s’ouvre où vous pouvez ajouter un lien (vous pouvez également cliquer sur le bouton pour ouvrir le lien dans un nouvel onglet):
Comment insérer du contenu multimédia (images, vidéos, etc.) Maintenant que vous avez une bonne idée de la façon d’utiliser le texte dans l’éditeur de bloc, regardons un autre élément du contenu: les images et les vidéos. Insérer et formater une image (y compris du texte ALT) une façon d’insérer une image est d’ajouter un bloc d’image. Cela vous permettra d’accéder à la médiathèque WordPress (comme avec un ancien éditeur) ou d’insérer une image à partir d’une URL: Cependant, l’éditeur de bloc a également ajouté une nouvelle méthode
Un filtrage d’image plus facile. Maintenant, il vous suffit de faire glisser l’image directement du bureau vers l’interface de l’éditeur:
Une fois l’image insérée, vous pouvez utiliser la barre latérale droite: ajouter du texte alt pour changer la taille de l’image pour lier l’image à une URL spécifique vous pouvez également ajouter un titre en tapant directement sous l’image: Insérer des vidéos (et d’autres contenus intégrés) pour vous aider à intégrer des vidéos de YouTube, Vimeo et de nombreux autres services, l’éditeur de blocs vous offre un ensemble complet de blocs intégrés: Une fois le bloc sélectionné, il suffit de coller l’URL du contenu à intégrer:
Alternativement, vous pouvez simplement coller l’URL YouTube dans un bloc vide pour économiser vos clics: Vous pouvez utiliser la même méthode pour tous les autres types de contenu intégré. Comment déplacer et réarranger des blocs en utilisant l’ancien éditeur WordPress, vous devez utiliser couper et coller pour déplacer le contenu. Vous pouvez encore le faire avec le nouvel éditeur de bloc, mais ce n’est pas parfait. Par exemple, bien que vous puissiez couper et coller du texte à partir d’un bloc, un bloc vide à partir duquel le texte est coupé existera toujours, de sorte qu’il n’est pas exactement le même. Au lieu de cela, il est généralement préférable d’utiliser les contrôles intégrés de l’éditeur de bloc.
Il y a deux façons de déplacer un bloc. Pour y accéder, passez le curseur sur le bloc à manipuler. Tout d’abord, vous pouvez utiliser les flèches pour déplacer le bloc vers le haut ou vers le bas. Deuxièmement, vous pouvez également utiliser la fonction glisser – déposer de la sélection pour déplacer le bloc n’importe où sur la page (pour activer la fonction glisser – déposer de la sélection, vous devez placer la souris à six points entre les flèches): Plus de 20 conseils pour une utilisation plus efficace de l’éditeur de bloc je veux le tutoriel WordPress Gutenberg
Ce qui précède décrit comment utiliser l’éditeur de bloc au niveau de base. Cependant, une fois que vous avez appris les bases, il y a beaucoup de conseils pour vous aider à utiliser l’éditeur plus efficacement. Je parle d’insérer de nouveaux blocs plus rapidement en utilisant « \/ », de créer des mises en page de colonnes plus complexes, d’économiser du temps en utilisant des raccourcis clavier, etc. Sur la base de mon expérience pratique avec l’éditeur, j’a i rassemblé toutes ces techniques dans une liste de plus de 20 techniques d’éditeur de blocs pour vous aider à travailler plus efficacement. L’un des avantages de l’extension du contenu avec plus de blocs l’éditeur de blocs Gutenberg est que vous n’êtes pas limité à la collection par défaut de blocs. En utilisant le plugin de bloc Gutenberg tiers, vous pouvez ajouter de nouveaux blocs pour ce qui suit: liste de prix, galerie d’images, curseur, recommandations… en outre, pouvez – vous désactiver le nouvel éditeur de bloc WordPress? C’est exact. Il est facile de désactiver le nouvel éditeur de bloc et de continuer à utiliser l’éditeur tinymce. En fait, nous avons écrit un article entier consacré à ce sujet. Apprenez comment désactiver l’éditeur de bloc Gutenberg de WordPress et continuer avec l’éditeur tinymce classique. Profitez du tutoriel WordPress Gutenberg! Que vous soyez l’éditeur Gutenberg ou l’éditeur de blocs WordPress, j’espère que vous trouverez ce tutoriel utile et que vous avez maintenant une meilleure idée de la façon de créer du contenu en utilisant le nouvel éditeur de blocs. Si vous avez des questions sur la façon d’utiliser le nouvel éditeur de bloc, laissez un commentaire et nous ferons de notre mieux pour vous aider!