Addons Gutenberg : 133 nouveaux blocs disponibles depuis l’éditeur !

Gutenberg est bien là… Il a changé radicalement la manière de construire nos pages et nos articles au sein de nos sites WordPress et pourtant, quelques semaines après « le tsunami », rien n’a vraiment changé… On installe Classic Editor ou on s’adapte et on essaie de tirer parti de cette nouvelle interface… et c’est ce que je vous propose de faire dans cet article !

Comment tirer avantage de Gutenberg, comment voir le verre à moitié plein et surtout, comment booster l’éditeur en ajoutant de nouveaux blocs avec des addons Gutenberg ?

 

Gutenberg et les blocs de base

Pour l’instant, Gutenberg met à notre disposition pas moins de 63 blocs !

Bon, avouons-le, la moité d’entre eux sont inutiles (et je pèse mes mots) mais c’est souvent le jeu auquel les pages builders aiment jouer : mettre plein de blocs ou de modules histoire de faire croire que c’est le « meilleur constructeur de page au monde ! ».

Effectivement, si on voit le bon côté des choses, on ne peut qu’en conclure que l’autre moitié des blocs est très utile ;-)

Voici une brève liste des blocs proposés nativement par Gutenberg (pour plus de détails, vous pouvez lire cet article).

 

Les blocs communs :

Ils sont au nombre de 10. Ils remplacent tout simplement une bonne partie des outils anciennement proposés par l’éditeur classique (la barre d’outils qui se trouvait tout en haut de l’éditeur). Les voici :

1. paragraphes
2. listes
3. images
4. titres
5. citation
6. galerie
7. son
8. bannière
9. fichiers
10. vidéo

Donc pour une rédaction « basique », ces blocs feront amplement l’affaire…

 

Les blocs de mise en forme :

7 blocs se classent sous la catégorie « mise en forme ». Ils permettent de créer des tableaux ou d’ajouter du code, du HTML etc. Les voici :

1. HTML
2. Classique
3. Tableau
4. Couplet
5. Code
6. Pré-formaté
7. Citation en exergue

Ces blocs sont tout aussi utiles que les blocs communs. La fonctionnalité de HTML a remplacé la version « texte » de l’ancien éditeur. Le bloc classique peut également nous être d’un grand secours (il fait office d’ancien éditeur). Quant aux blocs Tableau et Code, ils viennent enrichir les possibilités… Donc, tout va bien jusqu’ici.

 

Les blocs de mise en page :

Pour construire vos pages, vous pourrez choisir des blocs de mise en forme, qui sont au nombre de 7. Les voici :

1. Colonnes
2. Bouton
3. Média & Texte
4. Lire la suite
5. Saut de page
6. Séparateur
7. Espacement

Le bloc Colonnes et le bloc Bouton vont vite devenir indispensables ! C’était les principales fonctionnalités qui manquaient à l’ancien éditeur et qui nous poussaient à installer des pages builders ou des plugins de shortcodes. Quant aux autres blocs, ils auront tous une utilité plus ou moins intéressante selon vos besoins…

 

Les blocs de widgets :

Bien que les « widgets de base » de WordPress sont plus nombreux, Gutenberg vous offre un choix parmi les 5 widgets les plus pertinents.

1. Code court
2. Archives
3. Catégories
4. Commentaires récents
5. Articles récents

Certains de ces blocs – couplés au bloc « Colonnes » – vous permettront de « reconstruire » une « pseudo sidebar » qui a définitivement disparue depuis la sortie du nouveau thème WordPress (TwentyNineteen)…

Disons que dans ce nouveau « thème officiel », la sidebar n’existe plus mais la fonctionnalité au sein du CMS est toujours présente. Lisez cet article pour savoir comment ajouter une zone de Widgets à son thème.

 

Les blocs de contenus embarqués :

Au total, 34 blocs de contenu embed sont proposés par Gutenberg. Pour n’en citer que quelques-uns :

1. Facebook
2. Twitter
3. YouTube
4. Viméo
5. Article WordPress
6. Instagram

C’est plutôt dans cette partie que vous trouverez de nombreux « blocs inutiles »… Surtout quand on constate que coller un lien YouTube dans un bloc de paragraphe a le même comportement que de le coller dans un bloc YouTube (le bloc sera converti automatiquement)…

 

133 addons Gutenberg pour booster vos mises en page !

Au vu de ce recensement, on pourrait se dire que 63 blocs disponibles en natif, c’est déjà pas mal ?

Et si je vous proposais de multiplier les possibles grâce à des addons Gutenberg ? C’est-à-dire, de nouveaux blocs disponibles directement depuis l’éditeur en activant simplement une extension prévue à cet effet ?

 

1 – Advanced Gutenberg (18 addons)

Advanced Gutenberg va apporter quelques fonctionnalités qui vont vraiment améliorer votre expérience utilisateur comme :

• la possibilité d’élargir la largeur de l’éditeur. Ça parait insignifiant comme ça mais la fenêtre d’édition d’un contenu avec Gutengerg classique est vraiment étroite… et c’est assez agaçant. Avec l’option « full width », Advanced Gutenberg propose une amélioration significative de notre expérience lors de la création de contenus.
• la possibilité de créer des profils-utilisateurs avec des accès restreints à certains blocs. Si votre site compte plusieurs rédacteurs, vous pourrez désactiver certains blocs afin qu’ils ne soient jamais insérés dans des contenus. Vous pourrez même attribuer ces profils en fonction des rôles (admin, contributeur, auteur etc.).
• la possibilité de customiser certains blocs proposés par Advanced Gutenberg. Vous pourrez assigner un design « par défaut » à certains blocs afin de correspondre à votre identité visuelle. Ainsi, lorsque vous insèrerez ces blocs, ils seront déjà personnalisés (gain de temps).

Outre ces fonctionnalités bienvenues, ce plugin freemium va apporter 18 nouveaux blocs à Gutenberg. Voici les addons que vous pourrez utiliser :

1. Accordéon
2. Bouton avancé
3. Image avancée
4. Liste avancée
5. Tableau avancé
6. Vidéo avancée
7. Formulaire de contact
8. Conteneur
9. Compteur
10. Slider d’image
11. Map
12. Newsletter
13. Articles récents
14. Lien de réseaux sociaux
15. Sommaire
16. Onglet (tabs)
17. Témoignages
18. Produits WooCommerce

Ces addons Gutenberg seront disponibles directement depuis l’éditeur, en dessous de la liste des blocs natifs de Gutenberg. Quant aux fonctionnalités listées au début, vous les trouverez depuis l’onglet des réglages du plugin.

 

2 – Advanced Gutenberg Blocks (14 addons)

Advanced Gutenberg Blocks est un plugin gratuit qui ajoute 14 nouveaux blocs à l’éditeur ! Tout comme Advanced Gutenberg (le plugin vu précédemment), cette extension propose également de désactiver certains blocs inutiles.

Vous pourrez améliorer votre expérience utilisateur grâce à des options disponibles depuis l’onglet « améliorer l’éditeur » (dans le cas où votre thème ne gèrerait pas certaines fonctionnalités de l’éditeur).

Le plus de ce plugin : il est en français… et Made in France !

Voici les blocs disponibles :

1. Notice
2. Plugin
3. Publicité
4. Texte et publicité
5. Carte de prévisualisation de site
6. Article
7. Témoignage
8. Google Map
9. Click to Tweet
10. Sommaire
11. Intro
12. Giphy
13. Unsplash
14. Code

 

3 – Atomic Blocks (12 addons)

Atomic Blocks est une collection de 12 addons pour Gutenberg, faciles d’utilisation. Comme les autres, ils vont vous apporter un certain confort dans votre création de contenus. À la suite des blocs natifs de Gutenberg, vous découvrirez une nouvelle catégorie proposant :

1. Post Grid (afficher vos articles de blog au format « grille » au sein de votre contenu)
2. Conteneur (qui ressemble beaucoup au bloc paragraphe ?)
3. Boutons de partage
4. Témoignages
5. Profil d’auteur
6. Notice
7. Drop Cap
8. Bouton personnalisable
9. Espacement et diviseur
10. Accordéon
11. Call-To-Action
12. Tableau de prix

 

4 – CoBlocks (16 addons)

La librairie de CoBlocks est plutôt intéressante car elle propose des blocs que les autres addons Gutenberg ne proposent pas.

J’aime bien, notamment, l’idée de pouvoir insérer un Gif directement depuis l’éditeur de WordPress (sans avoir à se perdre dans les méandres de Giphy) ou de pouvoir ajouter des « dividers à la Divi » (ou Elementor)… Mais ce n’est pas tout ! Voici la liste complète des addons :

1. Alerte
2. Gif
3. Accordéon
4. Boite auteur
5. Clic-to-Tweet
6. HR personnalisable (trait de séparation)
7. Gist
8. Highlight (mise en avant)
9. Tableau des tarifs
10. Ligne
11. Icône de partage social
12. Carte (map)
13. Carte de média
14. Divider (séparation avec des formes comme avec Divi ou Elementor)
15. Icônes
16. Features (mise en avant avec icône)

 

5 – Editor Blocks for Gutenberg (12 addons)

Editor Blocks vient ajouter 12 nouveaux blocs à votre éditeur. Même si ceux-là ont des noms différents, on se rend vite compte que l’on retrouve plus ou moins les mêmes fonctionnalités que les autres addons Gutenberg. Voici la liste :

1. Callout (je suppose que c’est un Call-To-Action)
2. Header Hero (un titre mis en avant avec un bouton)
3. Profil de l’auteur
4. Brand (suite de 4 images : idéal pour les logos)
5. Feature (mise en avant)
6. Vertical Feature (mise en avant verticale, idéal pour les colonnes)
7. Horizontal Feature
8. Introduction
9. Tableau des tarifs
10. Team (mise en avant de l’équipe)
11. Témoignage
12. Wrapper (??? : on dirait un paragraphe)

 

6 – Kadence Blocks (8 addons)

Rien de très extraordinaire pour cet addon. Mais Kadence Blocks peut-être idéal si vous n’avez pas de besoins extravagants. L’essentiel est là :

1. Espacement
2. Bouton
3. Row Layout (division de votre page de 1 à 6 colonnes)
4. Icône
5. Titre avancé
6. Tabs (onglets)
7. Boite d’info
8. Accordéon

 

7 – Premium Blocks for Gutenberg (12 addons)

Premium Blocks propose quelques blocs sympas, mais rien de bien « fou ». Vous les trouverez à la fin de la liste des blocs natifs de Gutenberg (tout comme les autres addons listés dans cet article, d’ailleurs). Voici la liste des blocs :

1. Bannière
2. Décompte
3. Duo de titre (sous-titre)
4. Icône
5. Boite d’icône
6. Boite vidéo
7. Bouton
8. Carte (map)
9. Tableau des tarifs
10. Section
11. Témoignages
12. Accordéon

 

8 – Ultimate addons for Gutenberg (19 addons)

Ultimate Addons propose une librairie de 19 blocs supplémentaires ! On retrouve effectivement des blocs pas encore proposés par les autres extensions vues jusqu’à maintenant. Voici la liste :

1. Titre avancé
2. Post Grid (afficher vos articles en grille)
3. Post Masonry (afficher vos articles en grille décalée)
4. Post Carousel (afficher vos articles dans un carousel tournant)
5. Post Timeline (afficher vos articles sous forme de timeline)
6. Section
7. Boutons multiples
8. Boite d’info
9. Témoignage
10. Team (équipe)
11. Bouton de partage
12. Google Map
13. Icônes en liste
14. Liste des tarifs
15. Contenu en timeline
16. Appel à l’action
17. Colonnes avancées
18. Contact Form intégration
19. Citation

 

9 – Gutenberg Blocks by Stackable (22 addons)

Stackable est la librairie d’addons la plus complète de cette liste. Vous pourrez booster votre Gutenberg avec 22 nouveaux blocs… Rien que ça ! Ici aussi, vous découvrirez de nombreux blocs pas encore disponibles depuis les autres plugins présentés dans cet article. Voici la liste complète :

1. Accordéon
2. Citation
3. Liste d’articles
4. Bouton
5. Appel à l’action
6. Carte (affichage d’un contenu sous forme de carte = différent d’une Google Map)
7. Conteneur
8. Décompte
9. Diviseur
10. Voir plus
11. Grille de mise en avant
12. Mise en avant
13. Header (entête)
14. Liste d’icônes
15. Boite d’image
16. Boite de nombre
17. Notification
18. Boite de tarifs
19. Espacement
20. Membre de l’équipe
21. Témoignage
22. Vidéo dans une popup

 

Pour conclure : est-ce vraiment utile ?

Effectivement, certains des addons Gutenberg présentés ici sont utiles, voire indispensables selon les besoins de votre projet. Maintenant, de là à dire qu’il faut tous les installer sur votre site WordPress… ce serait une hérésie !

J’ai testé la quasi-totalité de ces 133 addons (oui, je suis plutôt « têtue ») et certains valent le détour…

Personnellement, je retiendrais peut-être CoBlocks et Stackable pour leur complémentarité et leur diversité, et Advanced Gutenberg (le 1er de la liste) pour ses fonctionnalités supplémentaires concernant l’UX.

Mais, vous pourriez effectivement les installer tous en parallèle : il ne devrait pas y avoir de conflits. Cependant, je vous conseille de vérifier vos besoins et de n’installer que ceux qui vous paraissent intéressants.

Sachez également que la plupart d’entre eux laisseront une « trace » si vous les désactivez alors que vous les avez utilisés dans vos contenus.

Idéalement, il faudrait les essayer sur une installation de test (sur MAMP, XAMPP ou FlyWheel par exemple), histoire de vous faire votre propre opinion et constater lesquels sont les plus pertinents.

Pour découvrir encore des centaines d’addons pour Gutenberg, je vous propose de visiter cette page.

À vous de jouer maintenant ;-)