[Qu'est-ce que] WordPress Gutenberg Blocks & Comment bien les utiliser

L'éditeur WordPress Gutenberg est arrivé avec WordPress 5.0 en décembre 2018. Connu plus communément sous le nom d '«éditeur de blocs», la nouvelle fonctionnalité fait passer la page et la création de publication de la conception de boîte simple des versions précédentes à une expérience plus semblable à celle d'un constructeur de pages.

Gutenberg blocks proposent désormais une approche modulaire de la création de contenu. Plutôt que d'utiliser du code pour ajouter un élément différent sur une page, vous pouvez remplacer un bloc à la place. Par exemple, vous pouvez remplacer un bloc de texte par un bloc vidéo ou un tableau comme vous le feriez lors de la création d'une page dans Beaver Builder ou Elementor. C'est une évolution qui tardait à venir, mais maintenant c'est ici que vous vous demanderez rapidement comment vous avez pu créer des pages sans !

Gutenberg blocks

Si vous mettez à jour vers WordPress 5.0 et supérieur, et que vous devriez maintenant, vous aurez remarqué que l'interface utilisateur a évolué un peu. Vous verrez toujours le menu latéral traditionnel à gauche et le menu de contenu à droite, mais au centre, tout a changé.

Avant la mise à jour, vous avez vu un titre et une zone de contenu vierges dans lesquels vous avez créé votre page ou votre publication. Vous verrez maintenant une section vide au centre avec un cartouche et un bloc de texte déjà remplis. Le menu de droite changera dynamiquement en fonction de ce que vous faites. Au début, il affiche les options traditionnelles de catégorie, de balise et d'image d'entité comme auparavant, mais introduit maintenant un onglet Bloc.

L'onglet Bloc vous permet d'éditer le bloc individuel comme ces constructeurs de pages offrant beaucoup de liberté en termes de conception. Ce que vous voyez dans l'onglet Bloc dépend du bloc en question, mais tous auront la possibilité d'ajouter du CSS personnalisé.

Gutenberg blocks introduire une approche véritablement modulaire de la conception de pages. Vous avez la possibilité de continuer à faire les choses de la même manière ou de plonger plus profondément. Vous pouvez modifier chaque bloc pour qu'il soit subtilement ou nettement différent ou les faire tous fonctionner comme une coutureless entier. C'est un système très puissant et indulgent.

Comment l'utiliser ? Gutenberg blocks

L'avantage de la refonte de WordPress est qu'elle est suffisamment similaire à la façon dont les choses fonctionnaient avant que l'interface utilisateur soit toujours familière. Même si vous ne vous êtes pas familiarisé avec les nouveaux blocs, vous pouvez toujours ajouter le titre de votre page, ajouter votre contenu, ajouter des codes et des widgets et publier comme avant. Cela peut sembler un peu différent, mais il fonctionne à peu près de la même manière.

C'est idéal pour les blogueurs occasionnels ou ceux qui découvrent WordPress. L'un des éléments clés du CMS étant sa facilité d'utilisation, les développeurs ont réussi à ajouter des fonctionnalités plus avancées sans rendre le système global plus difficile à utiliser.

Vous pouvez toujours créer une page en quelques minutes en utilisant les options par défaut, mais vous pouvez maintenant aller beaucoup plus loin sans avoir à apprendre une ligne de code ou même à savoir à quoi ressemble un shortcode.

Ce sont ces choses qui font Gutenberg blocks tellement utile.

Vous pouvez soit utiliser Gutenberg blocks ou non.

Le paramètre de page et de publication par défaut signifie que vous pouvez toujours préformater le contenu de votre page ailleurs et simplement le copier et le coller sur la page. Collez le titre dans le cartouche et le contenu de la page dans le bloc de texte. Si c'est tout ce dont vous avez besoin, le processus de création est aussi simple qu'avant. Si vous voulez aller plus loin, vous pouvez.

Si vous souhaitez vous plonger dans le fonctionnement de l'éditeur de blocs, vous verrez quelques options supplémentaires:

• Sélectionnez la petite icône «+» à côté du bloc central pour ajouter un nouveau bloc.
• Sélectionnez le «H» pour ajouter un titre.
• Sélectionnez l'icône de liste pour ajouter une liste à votre bloc.
• Sélectionnez l'icône d'image pour ajouter une image.

Ces quatre options sont disponibles dans le menu de contenu, mais les avoir disponibles pour chaque bloc signifie que vous pouvez créer votre contenu dans n'importe quelle conception que vous aimez. Les blocs individuels peuvent être modifiés et encadrés individuellement et chacun sera reflété dans la page finie.

C'est quelque chose Elementor (et les constructeurs de pages l'aiment comme Divi) font depuis des années avec un grand effet. Vous pouvez maintenant faire à peu près la même chose dans WordPress.

Vous pouvez en savoir plus sur Divi dans notre Elegant Themes Avis Client.

Créer une page à l'aide de l'éditeur de blocs est simple:

1. Sélectionnez Nouvelle page ou Nouvel article dans le menu latéral de WordPress.
2. Écrivez ou collez le titre de votre page dans le cartouche.
3. Écrivez ou collez votre contenu dans le bloc de texte.
4. Sélectionnez l'icône «+» à droite du bloc pour ajouter un nouveau bloc.
5. Sélectionnez le bloc le plus approprié dans la boîte contextuelle.
6. Complétez les principaux éléments du bloc dans le volet central.
7. Sélectionnez l'icône à trois points en haut du bloc que vous avez ajouté pour modifier la conception ou personnaliser.
8. Pour ajouter du CSS personnalisé, sélectionnez Avancé dans le menu de droite.
9. Sélectionnez Publier deux fois pour mettre en ligne.

Bien que l'utilisation de l'éditeur de blocs soit très simple, vous pouvez plonger beaucoup plus profondément si vous en avez besoin. Cette icône de menu à trois points de chaque bloc ouvre une pléthore d'options de personnalisation en fonction du bloc. Tu peux dupliquer le bloc, insérez d'autres blocs avant ou après, modifiez les attributs HTML, regroupez des blocs et plus encore en fonction des options disponibles.

De plus, en plus des blocs standard fournis avec WordPress, les développeurs peuvent également créer leurs propres plugins de bloc. Compte tenu de l'énorme base d'utilisateurs et du talent de développeur de WordPress, il existe déjà de nombreux plugins de bloc disponibles après seulement un an d'utilisation.

Blocs couramment utilisés

WordPress a inclus une gamme de blocs qui couvrent la création de pages principales. Chacun facilite l'ajout de différents éléments de page tout en permettant des fonctionnalités de conception personnalisées pour ce bloc seul. C'est une option d'édition puissante qui peut être utilisée avec beaucoup d'effet.

La norme Gutenberg blocks dans WordPress incluent :

• Bloc de texte - Le bloc de contenu traditionnel dans lequel vous pouvez travailler exactement comme avant et modifier à l'aide de HTML ou de codes courts.
• Titre - Blocs d'en-tête avec les paramètres standard H1, H2, H3, H4.
• Lister - Un bloc séparé que vous pouvez utiliser pour créer des listes remarquables ordonnées ou non.
• Galerie - Un bloc de galerie qui a permis la mise en forme personnalisée des images en fonction du contenu de votre page.
• Image - Un bloc d'image spécifique qui fonctionne de la même manière que la galerie mais pour des images uniques.
• Chances - Un bloc remarquable qui vous permet de mettre en évidence des citations ou des critiques dans une page.
• L'audio - Un bloc spécifique pour présenter un clic pour lire des clips audio dans le contenu de la page.
• Couverture - Un nouveau bloc qui vous permet de placer une image de couverture pour votre page ou votre article qui peut compléter l'image en vedette.
• Vidéo - Un bloc vidéo qui fonctionne comme l'audio et facilite la présentation de la vidéo dans une page ou une publication.

Tout ce que vous pouvez faire avec Gutenberg blocks vous pouviez faire avec l'éditeur d'origine, mais il n'était pas toujours convivial ou accessible pour les nouveaux utilisateurs. Cette conception de bloc permet à quiconque de créer facilement ses pages de manière logique et linéaire.

Les meilleurs plugins de bloc Gutenberg

Le WordPress standard Gutenberg blocks couvrent la plupart de ce dont vous avez probablement besoin de votre CMS. Cependant, nous avons mentionné plus tôt que les développeurs ont également commencé à produire leurs propres plugins de bloc Gutenberg pour ajouter encore plus de fonctionnalités. Il existe des dizaines de plugins de blocs de différentes qualités et nous avons rassemblé ici certains de nos favoris.

Jetons un coup d'œil à certains d'entre eux maintenant.

Nous examinerons:

1. Blocs d'outils
2. Blocs ultimes
3. Addons ultimes pour Gutenberg
4. Avancé Gutenberg Blocks
5. Empilable Gutenberg Blocks
6. Blocs atomiques
7. Blocs de loutre
8. Blocs par Templatic
9. Blocs de Kadence

Beaucoup de ces plugins de blocs Gutenberg sont entièrement gratuits, tandis que d'autres offriront des blocs gratuits avec la possibilité de passer à des blocs premium plus avancés. Nous avons mentionné dans chaque description ceux qui sont gratuits et où il existe des options premium.

Chacun s'installera de la même manière que vous installez tout autre plugin WordPress. Sélectionnez-le sur WordPress.org et installez et activez ou téléchargez les fichiers sur votre ordinateur et téléchargez-les sur votre installation WordPress. Une fois installé, vous devriez voir vos nouvelles options de blocage apparaître avec la norme bloquée lorsque vous sélectionnez «+» dans une page.

1. Blocs de jeu d'outils

Blocs d'outils est l'un de nos plugins d'éditeur de blocs préférés pour WordPress. C'est un plugin premium qui prouve que même si vous pouvez obtenir de bonnes choses gratuitement, cela vaut parfois la peine de payer un peu plus pour la puissance et la commodité. Le plugin s'installe de la même manière que les autres plugins et ajoutera les nouveaux blocs au menu existant.

Les blocs incluent des types de publication personnalisés, une taxonomie personnalisée, des champs personnalisés, des modèles, des vues, une pagination, un défilement infini, des blocs Ajax, WooCommerce, Google Maps, des formulaires, des paiements et même un contrôle d'accès. Certains de ces blocs que vous ne trouverez dans aucun plugin gratuit, c'est pourquoi nous avons mis en évidence les blocs Toolset.

L'une des meilleures fonctionnalités de Toolset est la possibilité de créer du contenu généré dynamiquement SANS avoir à faire de code PHP personnalisé. Toolset s'intègre directement à l'éditeur de blocs WordPress et vous permet d'extraire du contenu dynamique de n'importe où.

Voici quelques exemples de ce que vous pouvez faire: 

• Créer des en-têtes basés sur des titres
• Définir des textes de bouton et des CTA à partir de champs personnalisés
• Définir les sources d'image pour les champs ou les champs personnalisés
• et ainsi de suite

La vidéo suivante est une excellente explication des capacités des blocs Toolset:

La plupart d'entre nous savent à quel point les champs personnalisés et les types de publication peuvent être puissants et être en mesure de les implémenter dans une page est superbe. Outre les formulaires, les mises en page, les vues, les contrôles d'accès et les autres fonctionnalités puissantes, il est incroyablement facile de recommander ce plugin même s'il s'agit d'un produit premium.

Parfois, la gratuité n'est pas le meilleur prix et c'est l'un de ces moments.

2. Blocs ultimes

Blocs ultimes est présenté aux blogueurs mais fonctionnerait aussi bien sur n'importe quel site Web WordPress. Le plugin est gratuit et contient une sélection de blocs d'édition promotionnels et très utiles qui sont idéaux pour les blogueurs mais pourraient également s'avérer utiles pour les spécialistes du marketing, les sites de commerce électronique, les petites entreprises et tous ceux qui souhaitent que leur contenu se démarque.

Les blocs incluent les critiques, la table des matières, les appels à l'action, les basculements de contenu, le curseur d'image, les classeurs de contenu, les témoignages, le partage social, les comptes à rebours, les barres de progression, les grilles de publication et les notes par étoiles. Le développeur dit qu'ils ont également plus à faire.

Ultimate Blocks a un autre tour dans sa manche dans son gestionnaire de blocs. Une interface simple qui vous aide à activer ou désactiver les blocs pour simplifier la création de page. Cela signifie que vous pouvez télécharger la collection et n'activer que les blocs que vous êtes susceptible d'utiliser, en gardant la page libre de tout encombrement pendant que vous créez.

3. Gutenberg Blocks – Addons ultimes pour Gutenberg

Gutenberg Blocks – Addons ultimes pour Gutenberg est des mêmes développeurs que le superbe Thème WordPress Astra. Le plugin gratuit ajoute une gamme de blocs pour une utilisation quotidienne qui sont simples à utiliser et offrent un large éventail d'options de personnalisation. Ils fonctionneront également tous avec Astra, ce qui est très bien si vous utilisez ce thème.

Les blocs incluent les infoboxes, les boutons, les en-têtes avancés, les blocs d'équipe, les prix, les partages sociaux, les témoignages, les listes d'icônes, les blocs Gravity Form, les blocs marketing, les citations, les appels à l'action, les blocs Contact Form 7, Google Maps et plus encore.

Les développeurs disent que ces blocs ont été optimisés pour la vitesse de la page tout en offrant une coutureless intégration avec le thème Astra et au sein de tout autre thème. Vous disposez d'options de personnalisation similaires à celles de ces autres plugins pour glisser des blocs dans des pages existantes. Cela seul rend ce plugin intéressant.

4. Gutenberg avancé

Gutenberg avancé de Joom United ajoute plus de vingt blocs d'éditeur en tant que plugin WordPress gratuit. Il existe une gamme décente d'options ici, de la colonne et du titre habituels aux blocs plus avancés. Ils sont bien conçus avec une interface minimale qui offre encore d'une manière ou d'une autre toutes les options de personnalisation dont vous aurez probablement besoin.

Les blocs incluent les profils d'auteur, les blocs CCS personnalisés, WooCommerce, les boutons avancés, les formulaires de contact, les listes avancées, les cartes, les témoignages, les compteurs, les blocs de connexion et d'enregistrement, les blocs vidéo et d'image, le partage et les liens sociaux, les résumés de publication, le bloc Lightbox et bien plus encore .

Chacun intègre la couturelessly dans une page et est livré avec l'option de personnalisation avancée à l'aide du menu à trois points. Les options exactes diffèrent selon le bloc en question mais couvrent les situations les plus courantes, la couleur, la taille, le retrait, l'alignement, etc.

5. Empilable Gutenberg Blocks

Empilable Gutenberg Blocks était une autre arrivée précoce de la mise à jour et a publié des blocs personnalisés très utiles pour l'éditeur WordPress. La plupart des blocs empilables sont gratuits, mais le développeur propose également des blocs premium qui répondent à des utilisations spécifiques si vous en avez besoin.

Les blocs gratuits incluent des blocs de publication, une grille de fonctionnalités, un accordéon, un appel à l'action, une carte, un en-tête, une fenêtre contextuelle vidéo, un bloc de tarification, un bloc de notification, un espaceur, un diviseur, une liste de fonctionnalités, etc. Il y a 23 blocs gratuits en tout.

En tant qu'avantage supplémentaire, Stackable est un système modulaire qui vous permet d'ajouter les blocs dont vous aurez probablement besoin tout en laissant les autres de côté. Cela peut avoir un petit avantage en termes de stockage et de vitesse de page en fonction de la configuration de votre site Web. Quoi qu'il en soit, c'est une fonctionnalité supplémentaire intéressante qui peut garder les choses minces à l'arrière.

6. Blocs atomiques

Blocs atomiques était un autre des premiers plugins sur la scène et propose désormais 15 blocs gratuits et quelques thèmes WordPress pour compléter cette nouvelle liberté de conception. Les blocs incluent des témoignages, des prix, une newsletter, une grille de publication, des colonnes avancées, des icônes de partage, un appel à l'action, le profil de l'auteur et d'autres blocs utiles.

Le plugin est gratuit, comme la plupart des thèmes. Une fois installé, vous verrez une nouvelle série de blocs dans la section de bloc d'une nouvelle page ou d'un nouvel article. Recherchez AB Post Grid, etc. pour identifier les fonctionnalités du bloc atomique.

Comme ces autres plugins de bloc d'éditeur, vous pouvez personnaliser leur apparence et leur convivialité dans le menu avancé. Vous avez des options similaires en termes d'opacité, de couleur, de positionnement, etc. avec l'avantage supplémentaire de choix supplémentaires si vous utilisez un thème Atomic Block. C'est une fonctionnalité supplémentaire mineure mais elle est là!

7. Gutenberg Blocks et bibliothèque de modèles par Otter

Gutenberg Blocks et bibliothèque de modèles par Otter est une bouchée d'un nom beaucoup plus digeste en termes de fonctionnalités. C'est un plugin gratuit et léger qui comprend des blocs bien conçus qui s'appuient sur ceux fournis par WordPress avec plus d'options de conception.

Les blocs incluent des sections, des en-têtes avancés, des boutons, des prix, des témoignages, Google Maps, des blocs de bio auteur, une grille de publication, Font Awesome, le partage et un bloc de cartes. Tous sont optimisés pour la vitesse de la page ainsi que pour les fonctionnalités et, bien que légers sur ces fonctionnalités, ils constituent un excellent complément aux blocs par défaut.

Il existe des personnalisations supplémentaires et des options de bibliothèque pour chaque bloc. Vous pouvez adapter chaque bloc à vos besoins spécifiques ou utiliser une option de bibliothèque pour prendre une conception prête à l'emploi et l'utiliser dans le bloc. C'est rapide et très simple.

8. Blocks par Templatic

Blocs par le développeur Templatic est une autre entrée solide dans notre liste de superbes plugins de bloc Gutenberg. Nous avons beaucoup de respect pour les thèmes Templatic et ces blocs fonctionneront avec ou sans l'un de leurs thèmes. Si vous utilisez un thème Templatic, ces blocs s'intègrent parfaitement et sont prêts à être utilisés. Si vous n'utilisez pas de thème Templatic, ces blocs intégreront toujours la couturelessment dans votre conception.

Les blocs sont gratuits et incluent une biographie de l'auteur, des alertes, le partage de médias sociaux, des séparateurs, une image de couverture, des options de titre, une carte, des prix, des boutons et un bloc Tweet. Chacun a les fonctionnalités de base à l'avant et au centre avec des personnalisations disponibles via le menu. Ils sont très simples à utiliser et apparaîtront à côté de tous les blocs par défaut dans la nouvelle page ou l'écran de publication.

Il y a quelques bons blocs ici mais le plugin n'a pas été mis à jour depuis près d'un an. Ils fonctionnent avec la version actuelle de WordPress car nous les avons testés à temps pour cet article, mais nous ne savons pas quand de nouveaux blocs arriveront.

9. Blocs de Kadence

Blocs de Kadence propose des options gratuites et premium qui renforcent les blocs par défaut dans WordPress. La version gratuite comprend douze blocs et un éditeur intégré, tandis que la version premium à 59 $ par an ajoute sept blocs premium, des options d'animation uniques et une prise en charge. Il existe également une troisième option, pour 99 $ par an, vous pouvez accéder à tous les blocs d'édition premium ainsi qu'à tous les thèmes et produits Kadence.

Les blocs comprennent des blocs de mise en page, des boîtes d'informations, des galeries avancées, des témoignages, des blocs vidéo, un accordéon, des boutons, des onglets, des icônes, des en-têtes avancés et des images. La version premium ajoute des blocs de grille et de carrousel, des carrousels de produits, des blocs de modèle, des superpositions d'images, du contenu fractionné et des fenêtres contextuelles vidéo.

Chaque bloc a une section d'édition personnalisée où vous pouvez changer la position, le contour, la couleur, la taille de l'image, l'opacité et une gamme d'autres facteurs. Si vous travaillez dans une conception ou un cadre spécifique, vous pouvez facilement implémenter des blocs dans cette conception à l'aide de l'éditeur.

Résumé des Gutenberg blocks et leurs plugins

Gutenberg blocks sont une excellente évolution de WordPress. Ils prennent tout ce que nous savons et aimons à propos de la création rapide de pages ou de publications et le font avancer. WordPress offre toujours sa facilité d'utilisation et sa faible barrière à l'entrée pour les débutants tout en offrant aux utilisateurs plus expérimentés ou orientés design la possibilité de se démarquer. Cet équilibre entre forme et fonction mérite d'être célébré.

Tout comme les plugins de bloc Gutenberg, nous figurons dans cette liste. Les plugins gratuits offrent à peu près tout ce dont vous avez besoin, de la création de la page. La possibilité de diviser une page ou un article en composants individuels et de les styliser individuellement jusqu'à ce qu'ils soient tout simplement parfaits.

Même ces plugins premium en valent le coût. Ils ont tendance à offrir des normes plus élevées en termes de conception et de convivialité, ainsi que certains blocs non disponibles ailleurs. Bien que premium, Toolset Blocks se distingue par l'offre d'une gamme de blocs que vous ne trouverez dans aucun plugin gratuit comme la recherche, le contrôle d'accès, WooCommerce et les publications personnalisées, et les champs personnalisés.

Avez-vous un plugin de bloc Gutenberg préféré? Aimez-vous celui que nous n'avons pas mentionné ici? Parlez-nous-en ci-dessous si vous le faites!

À propos de l’auteur

Auteur : Jamie KavanaghSite Web : https://www.coastalcontent.co.ukCourriel : Jamie@collectiveray.com

Jamie, ingénieur de formation, est notre principal rédacteur et chercheur technique. Jamie dirige également Coastal Content, une société de marketing de contenu, de rédaction et de conception Web basée à Cornwall au Royaume-Uni.