Blocs Gutenberg : Guide de l'utilisateur ultime avec considérations essentielles pour 2022

Avec la nouvelle version du 6 décembre 2018, WordPress 5.0 Kirk a introduit un éditeur de blocs par défaut alias Gutenberg. Ce nouvel éditeur de contenu vous aide à créer du contenu dans une approche complètement différente. Il a remplacé l'éditeur WordPress TinyMCE et apporte un moyen plus visuel pour la création de contenu sous forme de blocs.

Gutenberg Editor fournit une riche bibliothèque d'éléments ou de blocs prédéfinis. Et vous pouvez les utiliser tout en travaillant sur un site WordPress. Là, chaque élément de contenu est un bloc déplaçable. Et ces blocs sont les blocs de l'éditeur qui sont utilisés pour créer des mises en page de contenu.

Que vous ayez ou non mis à jour votre site vers WordPress 5.0, vous devriez apprendre à utiliser Gutenberg Block pour votre future évolution. Ici, vous aurez une idée complète et une liste de tous les blocs Gutenberg Blocks WordPress ainsi que des blocs trentenaires populaires.

WordPress Gutenberg Blocks : votre meilleur compagnon pour l'avenir

Les blocs Gutenberg rendent définitivement le processus de création de contenu plus optimisé et intelligent. Une fois que vous vous serez habitué à cet éditeur, il réduira considérablement le temps de développement de votre site.

En un mot, Gutenberg est un nouvel éditeur de style bloc pour la plate-forme WordPress. Cela a progressivement changé la façon dont vous créez des publications, des pages, des produits et presque tout sur votre site.

En fait, vous pouvez gérer tous les types de composants de manière plus organisée avec Gutenberg. Tels que texte, image, vidéo, tableau et autres. Si vous débutez avec Gutenberg Editor, consultez ce guide du débutant pour obtenir des conseils et astuces utiles.

Remarque : La vue frontale des blocs dépend en grande partie du thème que vous utilisez sur votre site.

Blocs Gutenberg par défaut dans WordPress

Afin d'être prêt pour l'avenir, vous devez connaître les noms par défaut des blocs Gutenberg et leurs utilisations. En tant qu'utilisateur de WordPress, vous devrez probablement vous familiariser avec ces blocs tôt ou tard.

Donc, fondamentalement, les blocs Gutenberg sont organisés selon les catégories suivantes :

• Plus utilisé
• Blocs communs
• Mise en page
• Mise en page
• Widget
• Intègre
• Réutilisable

En cliquant sur l'icône "+" plus, vous pouvez ajouter un nouveau bloc sur votre site. En haut de la liste, vous trouverez les blocs les plus utilisés. Les blocs que vous utilisez le plus souvent sur votre site apparaîtront ici.

En dessous, les blocs sont regroupés par catégorie. Cliquez sur un titre pour dévoiler les blocs.

De plus, à partir du panneau d'édition de droite, vous pouvez définir la taille de la police, la lettrine, modifier le texte et les couleurs d'arrière-plan pour un bloc particulier.

Voyons comment ils fonctionnent réellement !

Blocs communs - Régulièrement utilisés dans n'importe quel message

Voici les blocs les plus courants dont tout le monde a besoin pour ses publications, y compris le texte et l'image. Vous avez besoin de ces éléments de base pour personnaliser une page ou publier sur votre site.

1. Paragraphe : bloc de texte simple pour ajouter un seul paragraphe de contenu.
2. Image : insérez une seule image n'importe où dans votre publication
3. En- tête : Ajouter une balise d'en-tête
4. Galerie : afficher un groupe d'images dans un style de galerie
5. Liste : Ajouter des listes à puces ou numérotées
6. Citation : Inclure une citation dans 2 styles différents
7. Audio : Uploader un fichier audio sur votre site
8. Cover : Insérer un fichier vidéo ou audio avec superposition de texte
9. Fichier : Ajouter un lien vers un fichier téléchargeable
10. Vidéo : téléchargez un fichier vidéo et lisez-les directement sur votre site

Formatage - Options de personnalisation supplémentaires

Ces blocs sont utilisés pour ajouter des options de mise en forme supplémentaires pour votre contenu, telles que du code, des vers et d'autres types de texte nécessitant une mise en forme spéciale.

1. Code : écrivez facilement tout type de code technique
2. Classique : Fournit les outils d'édition de l'éditeur WordPress classique
3. HTML personnalisé : insérez un code HTML personnalisé et prévisualisez-le directement dans l'éditeur WordPress
4. Préformaté : ajoutez du texte qui respecte l'espacement et les tabulations
5. Pullquote : ajoutez un accent visuel particulier à une citation de votre texte
6. Tableau : utiliser un tableau pour afficher des données tabulaires
7. Vers : écrivez de la poésie et d'autres expressions littéraires, y compris tous les espaces et les sauts de ligne

Éléments de mise en page - Améliorer le style de conception

Ces blocs vous aident à représenter le contenu du site de manière attrayante. Cela rend votre site plus attrayant pour vos visiteurs.

1. Bouton : créez un bouton et insérez un lien avec une couleur de fond et de texte différente
2. Colonnes : créez des mises en page multi-colonnes et vous pouvez inclure d'autres types de blocs dans chaque colonne.
3. Média et texte : insérez du texte et un fichier multimédia côte à côte dans un seul bloc ; différentes colonnes
4. Plus : Divisez votre contenu en 2 parties, y compris un bloc "Lire la suite"
5. Saut de page : divise le contenu de votre site en plusieurs pages
6. Séparateur : Ajoutez une courte ligne horizontale dans votre message
7. Espaceur : incluez un grand espace vide rectangulaire entre deux blocs dans votre publication
8. Colonnes de texte : ajoutez du texte et affichez-le dans deux à quatre colonnes, comme un journal.

Widgets - Ajoutez des widgets à n'importe quelle page ou publication

Ces blocs vous permettent d'ajouter des Widgets WordPress à l'intérieur de votre contenu. Ils sont plus susceptibles d'être utilisés dans la barre latérale et le pied de page.

1. Shortcode : Insérez du contenu personnalisé comme des formulaires via un shortcode WordPress
2. archives : affiche une archive mensuelle de vos messages
3. calendrier : Affichez un calendrier mensuel de vos publications
4. catégories : liste de toutes vos catégories de publication
5. derniers commentaires : aperçu des 5 derniers commentaires (pas le commentaire complet)
6. latest-posts : liste de vos messages récents
7. RSS : ajoutez un flux RSS à n'importe quelle page ou publication
8. Recherche : ajoutez une recherche WordPress à n'importe quelle page ou publication
9. Tag Cloud : Une liste cloud de vos balises de publication

Intègre - Insérer du contenu à partir d'autres sources

Les blocs d'intégration vous permettent d'intégrer des images, des vidéos, des tweets, de l'audio, des publications sur Facebook et d'autres contenus provenant de sources externes.

• Youtube
• Twitter
• Facebook
• Instagram
• Viméo
• Nuage de son
• Spotify
• Flickr
• Animoto
• Nuage
• CollègeHumour
• Dailymotion
• Drôle ou mourir
• Hulu
• Imgur
• Issuu
• Démarreur
• Meetup.com
• Mixcloud
• Photobucket
• Polldaddy
• Reddit
• ReverbNation
• Capture d'écran
• Scribd
• Slideshare
• SmugMug
• Conférencier
• TED
• Tumblr
• VidéoPresse
• Wordpress
• WordPress.tv

Blocs réutilisables :

Une fois que vous avez appuyé sur "Ajouter aux blocs réutilisables", un bloc devient réutilisable pour une utilisation ultérieure. Vous pouvez peut-être le trouver dans la section du menu partagé.

Plugins tiers pour étendre à la fois vos listes de blocage et vos fonctionnalités

Vous pouvez installer d'autres plugins essentiels pour étendre vos listes de blocage avec des attributs avancés et puissants. En choisissant un plugin riche en fonctionnalités, il peut être facile d'ajouter de nouveaux blocs à votre éditeur. Et vous pouvez effectuer de nombreuses activités hautement fonctionnelles qui ne sont pas possibles avec les éléments de bloc par défaut.

Par exemple, certains plugins de galerie vous permettent d'ajouter une galerie avec de nombreux effets avancés à l'aide de blocs.

Au-delà de cela, vous trouverez également de nombreux plugins qui se concentrent uniquement sur l'ajout de nouveaux blocs. Ici, nous avons répertorié certains des meilleurs plugins WordPress que vous pouvez utiliser pour ajouter de nouveaux blocs avec ceux par défaut.

1. Addons ultimes pour Gutenberg - Plugin gratuit avec plus de 15 blocs Gutenberg
2. CoBlocks - Générateur de pages Blocs Gutenberg
3. Empilable – Blocs Gutenberg
4. Blocs ultimes - Blocs Gutenberg personnalisés
5. Advanced Gutenberg – Plus de 20 nouveaux blocs pour Gutenberg
6. Bloc Kadence – Boîte à outils Gutenberg Page Builder
7. Envira Gallery – Bloc WordPress pour les galeries de photos
8. Blocs atomiques – Collection de blocs Gutenberg

Addons ultimes pour Gutenberg - Plugin gratuit avec plus de 15 blocs Gutenberg

C'est l'un des addons populaires parmi de nombreux utilisateurs de Gutenberg. The Ultimate Addons for Gutenberg est un ensemble complet de blocs uniques et créatifs. Par conséquent, vous pouvez booster votre éditeur pour créer de belles pages et publications à l'aide de ce plugin.

Il comprend plus de 15 blocs Gutenberg, dont les suivants :

• Boutons multiples : ajoutez plusieurs boutons personnalisables dans un seul bloc réactif.
• Titre avancé : incluez des titres et des sous-titres tendance et attrayants avec un séparateur
• Zone d' informations : insérez une image ou une icône avec un titre et une description
• Liste de prix : créez facilement une liste de prix comme un menu de restaurant
• Témoignage : Ajouter un avis client en utilisant ce bloc

Plus étonnamment, ce plugin est livré avec un support intégré pour le thème Astra. Et Astra est entièrement compatible avec Gutenberg.

CoBlocks - Générateur de pages Blocs Gutenberg

CoBlocks propose un ensemble créatif de blocs WordPress de création de pages pour le nouvel éditeur Gutenberg. Cela améliorera votre expérience de création de pages avec Gutenberg. Ce plugin WordPress léger vous aidera à créer de belles pages Web.

Il prend actuellement en charge plus de 20 blocs interactifs :

• Bloc accordéon
• Blocage d'alerte
• Bloc Profil de l'auteur
• Bloc de boutons
• Bloc Galerie Carrousel
• Cliquez pour bloquer les Tweets
• Bloc de galerie de collages
• Bloc séparateur dynamique
• Bloc Événements (Nouveau !)
• Bloc de fonctionnalités
• Bloc de nourriture et de boissons
• Bloc de formulaire
• Bloc GIF
• Bloc GitHub Gist

et d'autres.

Vous pouvez créer l'intégralité du site Web avec les fonctionnalités de CoBlocks. En outre, il vous permet de concevoir des pages Web avec des éléments typographiques séduisants.

Empilable – Blocs Gutenberg

Stackable est spécialement conçu pour le nouvel éditeur de blocs WordPress. Il prend en charge 23 blocs de construction de pages de qualité pour Gutenberg et plus de 50 mises en page de blocs et des conceptions de sections/blocs prédéfinies. Il fournit des options de conception Web avancées et flexibles pour faciliter votre parcours de développement Web.

Certains blocs empilables populaires sont les suivants :

• Bloc conteneur
• Bloc de grille de fonctionnalités
• Bloc de cartes
• Bloc d'en-tête
• Compter le bloc
• Blocage des membres de l'équipe
• Blocage des notifications

Améliorez votre capacité de conception avec ces dispositions de conception personnalisables et diverses.

Blocs ultimes - Blocs Gutenberg personnalisés

Ce plugin de blocs Gutenberg est spécialement conçu pour les blogueurs et les spécialistes du marketing. Ainsi, vous pouvez créer un contenu meilleur et attrayant avec Gutenberg sans effort.

À l'heure actuelle, Ultimate Blocks prend en charge environ 20 blocs pour rendre votre parcours de développement plus excitant. Certaines caractéristiques notables sont données ci-dessous :

• Filtre de contenu
• Compte à rebours
• Curseur d'images
• Contenu à onglets
• Boîte stylisée
• Basculement de contenu

Vous pouvez rejoindre leur groupe Facebook interactif pour toute assistance supplémentaire.

Advanced Gutenberg – Plus de 20 nouveaux blocs pour Gutenberg

Advanced Gutenberg rend l'éditeur Gutenberg par défaut plus puissant pour créer des sites Web professionnels incroyablement faciles. Il fournit plus de 20 nouveaux blocs et options pour personnaliser votre site WordPress en douceur.

Ici, vous obtiendrez des blocs uniques comme :

• Gestionnaire de colonnes
• Curseur de la dernière publication
• Bloc d'onglets
• Bloc d'icônes
• Bloc Image avancé
• Bloc d'inscription aux e-mails
• Et beaucoup plus

Néanmoins, ils disposent d'une documentation élaborée et d'un forum personnalisé pour apporter un soutien à leurs utilisateurs.

Kadence Block - Boîte à outils Gutenberg Page Builder

Avec ce plugin, vous pouvez ajouter des blocs et des options personnalisés à votre éditeur Gutenberg. Peut-être que cela peut étendre les capacités d'édition de Gutenberg afin que vous puissiez créer des mises en page personnalisées et un contenu plus attrayant.

Kadence supporte en effet les blocs suivants :

• Disposition des lignes
• Galerie avancée
• Forme
• Titre avancé
• Bouton Avancé
• Onglets
• Accordéon
• Témoignages
• Icône
• Entretoise / Séparateur
• Boîte d'info
• Liste des icônes

En dehors de cela, cela vous permet de créer facilement tout type de mise en page. Cela n'est possible qu'avec les plugins WordPress Page Builder populaires.

Envira Gallery – Meilleur bloc WordPress pour les galeries de photos

Envira est un plugin entièrement optimisé et puissant pour insérer une galerie sur votre site WordPress sans compromettre la vitesse du site. Avec ce plugin de galerie, vous pouvez inclure des albums, des balises, l'intégration des médias sociaux, des modèles de galerie/mises en page de galerie, des liens profonds, la pagination, le commerce électronique, l'épreuvage d'image et bien plus encore.

Après avoir activé ce plugin, vous trouverez une nouvelle option sous Common Blocks. À partir de là, vous pouvez rechercher différents types de style de galerie selon vos besoins. Ce plugin est entièrement compatible avec le plugin WooCommecre afin que vous puissiez facilement l'utiliser pour n'importe quel site de photographie pour vendre des photos.

Blocs atomiques – Collection de blocs Gutenberg

Atomic Blocks apporte un ensemble de blocs Gutenberg nouveaux et élégants. La même équipe talentueuse de Array Themes travaille également derrière cette collection de blocs tendance.

Actuellement, Atomic Blocks compte 15 blocs Gutenberg, et d'autres sont en préparation :

• Section et bloc de mise en page
• Bloc de colonnes avancées
• Bloc Newsletter
• Bloc de tarification
• Bloc de grille de publication
• Bloc conteneur
• Bloc Témoignage
• Bloc d'avis en ligne
• Bloc accordéon
• Partager le bloc d'icônes
• Bloc d'appel à l'action
• Bloc de boutons personnalisable
• Entretoise et bloc diviseur
• Bloc Profil de l'auteur
• Bloc lettrine

Après avoir installé le plugin, vous obtiendrez une nouvelle section Atomic Blocks dans l'interface Gutenberg. Vous pouvez consulter les démos en direct de tous les blocs avant de les utiliser sur votre site Web. Construire des pages avec l'éditeur de blocs et Atomic Blocks vous donne un contrôle total pour concevoir et lancer rapidement tout type de site que vous voulez !

Cependant, vous pouvez trouver des plugins plus utiles avec d'excellents blocs pour créer un beau contenu de manière optimisée. N'oubliez pas de nous faire part de vos réflexions !

Gutenberg Blocks ouvre une nouvelle ère de conception de sites

L'éditeur Gutenberg est principalement construit sur le concept de blocs. Ces blocs ont introduit une toute nouvelle façon de modifier les articles et le contenu des pages dans l'éditeur WordPress. Grâce à ces blocs, vous pouvez facilement ajouter plusieurs types de contenu à vos publications et pages.

Dans ce blog, nous avons essayé de partager toutes les informations concernant les blocs Gutenberg. Ainsi, vous pouvez facilement vous mettre à jour avec la mise en page de conception révolutionnaire du nouvel éditeur WordPress.

Vous pouvez également nous raconter votre histoire et poser toutes les questions liées à WordPress dans la section des commentaires ci-dessous.