Tutoriel WordPress Gutenberg Comment utiliser le nouvel éditeur

Tutoriel WordPress Gutenberg Comment utiliser le nouvel éditeur

Si vous utilisez WordPress depuis plusieurs années, vous vous souvenez quand les gens de WordPress ont déployé l'éditeur de Gutenberg dans WordPress 5.0 en 2018.

Ce nouvel éditeur par défaut a été une refonte majeure pour éditer des publications et des pages sur votre site. Il a transformé la grande zone de texte à laquelle les propriétaires de sites Web étaient habitués en une plate-forme d'édition basée sur des blocs très différente.

Table des matières

    La sélection de l'un des blocs de la fenêtre contextuelle ajoute ce bloc comme la section suivante de votre page ou publication.

    Avant d'arriver à ces blocs, commençons depuis le début et créons un nouveau message à l'aide de Gutenberg dans WordPress.

    Création de messages et ajout de blocs

    L'ajout d'un message reste inchangé à partir de la dernière version de WordPress. Sélectionnez simplement Des postes à partir de la barre de navigation gauche et sélectionnez Ajouter un nouveau dessous.

    Cela ouvrira la fenêtre Post Editor. C'est aussi là que tout est différent. Vous verrez l'éditeur de Gutenberg WordPress par défaut.

    Ajouter des éléments de bloc dans l'éditeur de Gutenberg

    Vous pouvez taper le titre de votre message dans le champ de titre. Puis sélectionnez le + icône à droite pour ajouter le premier bloc.

    Paragraphes

    Le premier bloc le plus courant ajoute les gens après le titre est un bloc de paragraphe. Pour ce faire, sélectionnez Paragraphe de la fenêtre pop-up.

    Cela insérera un champ de blocs où vous pouvez commencer à taper le premier paragraphe de votre message. Le formatage pour le bloc de paragraphe suit la police par défaut des blocs de paragraphe de votre site. 

    Voici quelques conseils pour ajouter des blocs de paragraphe dans l'éditeur de Gutenberg.

    • Votre paragraphe peut être aussi long que vous le souhaitez. Le texte se terminera automatiquement dans la ligne suivante, tout comme dans l'éditeur classique.
    • Si vous appuyez Entrer, L'éditeur de Gutenberg crée automatiquement un nouveau bloc de paragraphe, mais il ressemble à un deuxième paragraphe avec une pause paragraphe.
    • La mise en évidence de tout texte dans le paragraphe affichera une fenêtre de formatage où vous pouvez modifier le formatage pour ce texte, ou modifier le bloc en une liste ou un autre type de bloc.
    • Sélectionnez les trois points et sélectionnez Supprimer le bloc Pour supprimer un bloc de paragraphe et le remplacer par quelque chose d'autre.

    Blocs d'image

    Si vous sélectionnez le bloc d'image, vous verrez une boîte d'image où vous pouvez sélectionner un bouton de téléchargement pour télécharger une image dans votre message sur votre ordinateur. Sélectionnez le Médiathèque lien pour utiliser une image de votre bibliothèque de médias existante, ou Insérer à partir de l'URL Pour créer un lien vers une image d'un autre site.

    Cela insérera l'image dans l'article où vous avez ajouté le nouveau bloc d'image. Vous remarquerez que vous pouvez taper la légende de l'image directement sous l'image elle-même.

    Vous pouvez utiliser les mêmes options de formatage sur le texte de légende que possible sur le texte de paragraphe ordinaire.

    Liste des blocs

    Lorsque vous ajoutez un nouveau bloc et sélectionnez Liste, il insérera le bloc de liste à ce moment-là de l'article.

    Il montrera une balle, mais pendant que vous tapez et appuyez sur Entrer, Chaque nouvelle balle apparaîtra comme vous en avez besoin.

    Le formatage de la liste suit également le style et la taille de la police tels que définis par votre thème, alors ne soyez pas surpris si la police de votre liste semble différente de celle de vos blocs de paragraphes.

    Vous pouvez mettre en surbrillance le texte dans le bloc de liste et vous verrez des options de formatage pour ce texte si vous souhaitez le modifier. Vous ne pouvez pas changer le style de police ici, mais vous pouvez en gras, en italique, ajouter un hyperlien ou changer entièrement le type de blocage.

    Autres blocs

    Si vous souhaitez voir tous les blocs disponibles, sélectionnez + Pour ajouter un bloc, puis sélectionnez Parcourir tout Pour voir la liste entière.

    Cette liste est en fait assez longue. Tout ce dont vous vous souvenez être disponible dans l'éditeur classique via son système de menu sera inclus ici. Il s'agit notamment d'autres blocs couramment utilisés comme:

    • les tables
    • Fichiers et médias
    • Vidéos
    • La balise «plus»
    • Pauses et séparateurs de page
    • Des widgets comme les icônes sociales, les nuages ​​de tag, le calendrier et les widgets de plugin wordpress
    • Embed Code pour les sites sociaux, les sites médiatiques comme YouTube et Spotify, et plus

    Autres fonctionnalités de Gutenberg

    Vous n'avez pas à rester avec les blocs que vous avez ajoutés partout où vous les avez ajoutés. Vous pouvez faire défiler vers le haut dans votre message et sélectionner le + icône entre l'un des blocs existants. Cela vous permettra d'insérer de nouveaux blocs entre ceux existants.

    Vous n'êtes pas non plus coincé avec le placement de vos blocs non plus. Dans l'éditeur WordPress classique, ce n'était pas toujours facile de déplacer des choses comme des images vers d'autres sections de votre message sans parfois gâcher le codage d'arrière-plan.

    Dans Gutenberg, les éléments déplacés comme des images sont aussi simples que de sélectionner le bloc, puis de sélectionner les flèches haut ou bas dans la barre de menu contextuelle pour déplacer le bloc vers le haut ou vers le bas dans le post.

    Chaque fois que vous sélectionnez la flèche, il glissera ce bloc une position dans la direction que vous avez sélectionnée.

    Utilisation de l'éditeur Glutenberg dans WordPress

    La zone de poste n'est pas le seul endroit pour ajouter de nouveaux blocs. Vous remarquerez qu'il y a un menu d'icônes très simple en haut de l'éditeur où vous pouvez utiliser le + icône pour ajouter des blocs également.

    Les autres icônes de ce menu vous donnent un accès rapide aux autres fonctionnalités de Gutenberg.

    • Le stylo Modifier L'icône vous permet de basculer pour sélectionner le mode pour sélectionner plus facilement les blocs. Double-cliquez sur un bloc pour revenir en mode édition.
    • annuler ou Refaire Les icônes (flèches incurvées gauche et droite) annulent ou refaire votre dernier montage.
    • Le je (Détails) L'icône vous montre le nombre de caractères, de mots, de titres, de paragraphes et de blocs dans votre message.
    • Le Contour L'icône vous permet de naviguer rapidement vers des blocs dans votre message en fonction de leur commande dans votre aperçu.

    Pour beaucoup de gens, le rédacteur en chef de Gutenberg dans WordPress prend un certain temps pour s'habituer à. Mais après avoir vécu la facilité de création, de modification et de manipulation des blocs d'éléments dans vos messages, vous constaterez que votre processus de création de messages et de pages est plus rapide et plus productif.