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

Ce nouvel éditeur par défaut était une refonte majeure pour l'édition des publications et des pages de 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.

Certains propriétaires de sites Web le détestaient tellement qu'ils ont évité la mise à niveau vers WordPress 5.0 et sont restés avec l'éditeur par défaut classique aussi longtemps que possible. D'autres propriétaires de sites Web ont adopté le changement pour sa simplicité et sa facilité d'utilisation.

Si vous effectuez la transition et que vous êtes curieux de savoir à quoi vous attendre, ce didacticiel WordPress Gutenberg vous guidera à travers les principales fonctionnalités que vous devez connaître et comprendre. Cela devrait rendre votre transition aussi facile que possible.

À quoi s'attendre dans WordPress Gutenberg

La principale chose à savoir sur l' éditeur Gutenberg est qu'il est basé sur des blocs. Cela signifie que tout ce que vous devez ajouter est géré via des blocs. Les blocs de Gutenberg incluent (mais ne sont pas limités à) :

• Paragraphe
• Entête
• Image
• Lister
• Devis
• Code
• Préformaté
• Pullquote
• Table

Il existe également quelques autres blocs avancés qui sont rarement utilisés. Vous pouvez voir des blocs supplémentaires si vous installez de nouveaux plugins WordPress^{(new WordPress plugins)} dans l'éditeur.

L'ajout de blocs est aussi simple que de sélectionner l'icône + à droite sous le bloc le plus récent que vous avez ajouté.

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

Avant d'arriver à ces blocs, commençons par le début et créons un nouveau post en utilisant Gutenberg dans WordPress .

Création de publications et ajout de blocs

L'ajout d'un article reste inchangé par rapport à la dernière version de WordPress . Sélectionnez simplement ^(Just)Messages^(Posts) dans la barre de navigation de gauche, puis sélectionnez Ajouter un nouveau^{(Add New)} en dessous. 

Cela ouvrira la fenêtre de l'éditeur de publication. C'est aussi là que tout est différent. Vous verrez l' éditeur  WordPress Gutenberg par défaut.^{(Gutenberg WordPress)}

Ajout d' éléments de bloc^{(Block Items)} dans l' éditeur Gutenberg^{(Gutenberg Editor)}

Vous pouvez saisir le titre de votre article dans le champ Titre. Sélectionnez ensuite l' icône + à droite pour ajouter le premier bloc.

Blocs de paragraphe^{(Paragraph Blocks)}

Le premier bloc le plus courant que les gens ajoutent après le titre est un bloc de paragraphe. Pour ce faire, sélectionnez Paragraphe^(Paragraph) dans la fenêtre contextuelle. 

Cela insérera un champ de bloc où vous pourrez commencer à taper le premier paragraphe de votre message. La mise en forme du bloc Paragraphe suit ^(Paragraph)la police par défaut^{(the default font)} des blocs de paragraphe de votre site. 

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

• Votre paragraphe peut être aussi long que vous le souhaitez. Le texte passera automatiquement à la ligne suivante, comme dans l'éditeur classique.
• Si vous appuyez sur Entrée^(Enter) , l' éditeur Gutenberg crée automatiquement un nouveau bloc de paragraphe, mais il ressemble à un deuxième paragraphe avec un saut de paragraphe.
• La mise en surbrillance de tout texte dans le paragraphe affichera une fenêtre de mise en forme dans laquelle vous pourrez modifier la mise en forme de 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^{(Remove block)} pour supprimer un bloc de paragraphe et le remplacer par autre chose.

Blocs d'images^{(Image Blocks)}

Si vous sélectionnez le bloc Image , vous verrez une zone Image^(Image) où vous pouvez sélectionner un bouton Télécharger pour télécharger une image dans votre publication depuis votre ordinateur. ^(Upload)Sélectionnez le lien Médiathèque^{(Media Library)} pour utiliser une image de votre médiathèque existante ou Insérer à partir de l'URL^{(Insert from 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 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 mise en forme sur le texte de légende que sur le texte de paragraphe normal.

Liste des blocs^{(List Blocks)}

Lorsque vous ajoutez un nouveau bloc et sélectionnez Liste^(List) , il insère le bloc de liste à cet endroit de l'article.

Il affichera une puce, mais lorsque vous tapez et appuyez sur Entrée^(Enter) , chaque nouvelle puce apparaîtra selon vos besoins.

La mise en forme de la liste suit également le style et la taille de la police tels que définis par votre thème^{(your theme)} , alors ne soyez pas surpris si la police de votre liste est différente de celle de vos blocs de paragraphe.

Vous pouvez mettre en surbrillance du 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 modifier le style de police ici, mais vous pouvez mettre en gras, en italique, ajouter un lien hypertexte ou modifier entièrement le type de bloc.

Autres blocs^{(Other Blocks)}

Si vous voulez voir tous les blocs disponibles, sélectionnez + pour ajouter un bloc, puis sélectionnez Parcourir tout^{(Browse all)} pour voir la liste complète.

Cette liste est en fait assez longue. Tout ce dont vous vous souviendrez être disponible dans l'éditeur classique via son système de menus sera inclus ici. Ceux-ci incluent d'autres blocs couramment utilisés tels que :

• les tables
• Fichiers et médias
• Vidéos
• La balise "Plus"
• Sauts de page et séparateurs
• Widgets comme les icônes sociales, les nuages ​​de tags, le calendrier^(calendar) et les widgets de plugin WordPress
• Intégrez^(Embed) du code pour les sites sociaux, les sites multimédias tels que YouTube et Spotify , etc.

Autres fonctionnalités de Gutenberg

Vous n'avez pas à vous en tenir aux blocs que vous avez ajoutés où que vous les ayez ajoutés. Vous pouvez faire défiler vers le haut dans votre message et sélectionner l' 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. Dans l'éditeur WordPress^(WordPress) classique , il n'a pas toujours été facile de déplacer des éléments tels que des images vers d'autres sections de votre publication sans parfois gâcher le codage en arrière-plan.

Dans Gutenberg , déplacer des éléments tels que des images est aussi simple que de sélectionner le bloc, puis de sélectionner les flèches vers le haut ou vers le bas dans la barre de menu contextuelle pour déplacer le bloc vers le haut ou vers le bas dans le message.

Chaque fois que vous sélectionnez la flèche, elle fait glisser ce bloc d'une position dans la direction que vous avez sélectionnée.

Utilisation de l' éditeur Glutenberg^{(Glutenberg Editor)} dans WordPress

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

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

• L'icône d' édition^(Edit) du stylet vous permet de passer en mode de sélection pour sélectionner plus facilement des blocs. Double-cliquez sur^{(Double-click)} un bloc pour revenir au mode Édition^(Edit) .
• Les icônes Annuler^(Undo) ou Rétablir^(Redo) (flèches courbes gauche et droite) annuleront ou rétabliront votre dernière modification.
• L' icône i (Détails) vous indique le nombre de caractères, de mots, de titres, de paragraphes et de blocs dans votre publication.
• L' icône Plan^(Outline) vous permet de naviguer rapidement vers les blocs de votre article en fonction de leur ordre dans le plan de votre article.

Pour beaucoup de gens, l' éditeur Gutenberg de ^(Gutenberg)WordPress prend un certain temps pour s'y habituer. Mais après avoir constaté à quel point il est facile de créer, de modifier et de manipuler des blocs d'éléments dans vos publications, vous constaterez que votre processus de création de publications et de pages est plus rapide et plus productif.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor in WordPreѕs 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 plugins indispensables pour les nouvelles installations de WordPress

• Comment passer de l'éditeur WordPress classique à Gutenberg

• Comment masquer Quick Links sur une page New tab à Edge en utilisant Registry Editor

• Comment déplacer WordPress site d'un hôte à un autre

• Comment installer et installer WordPress sur Microsoft Azure

• Squarespace Vs WordPress : Quelle est la meilleure plateforme de site ?

• Comment faire pour exécuter rapidement WordPress sur blazingly Microsoft Azure

• Comment changer votre URL de connexion WordPress pour une meilleure sécurité

• Comment utiliser WP Super Cache sur le blog WordPress

• Comment effectuer des tests fractionnés efficaces dans WordPress

• 10 plugins WordPress essentiels pour un site Web de petite entreprise

• WordPress montre HTTP Error lorsque les images de téléchargement des

• Rediriger les utilisateurs de 404 page dans WordPress

• Comment créer un blog Wix aussi bon que WordPress

• Comment configurer Privacy dans WordPress et pourquoi il est important

• Comment installer WordPress sur Google Cloud Platform

• Comment vérifier si un site Web est banni de AdSense

• Comment configurer manuellement WordPress sur un domaine

• Comment faire un WordPress Site Secure

• Comment sauvegarder votre site WordPress