L’arrivée de l’éditeur de blocs Gutenberg, avec WordPress 5.x, a marqué un tournant décisif dans l’avènement du CMS le plus utilisé au monde.
D’une époque où l’on voyait une quantité toujours croissante de arriver sur le marché pour palier le côté rudimentaire de l’antique éditeur classique, est venue celle où seuls quelques uns tiennent le haut du panier, aux côtés du builder natif désormais intégré à WordPress : Gutenberg.
Cependant, les blocs natifs à WordPress, s’ils permettent de réaliser des mises en page déjà très sympathiques, sont limités fonctionnellement et n’autorisent pas toujours les choses pourtant simples que veulent les webdesigners :
- définir finement une marge intérieur ou extérieur,
- maîtriser la visibilité des blocs selon la résolution d’écran,
- sélectionner une couleur précise pour un arrière-plan,
- définir l’arrondi des angles d’une zone d’affichage,
- etc.
Voici, grâce à quelques plugins bien pratiques, comment étendre leurs possibilités, sans installer une multitude de blocs inutiles !
- Des blocs Gutenberg en pagaille
- Gérer la visibilité des blocs avec Block Visibility
- Enrichir les propriétés CSS avec Editor Plus
- Gérer visibilité ET mises en forme avec Gutenberg Blocks Editor Kit
- Étendre les possibilités des blocs réutilisables avec Reusable Blocks Extended
- Bonus : l’astuce pour cacher les blocs inutiles
- Conclusion : trop de blocs tuent les blocs !
Des blocs Gutenberg en pagaille
À l’arrivée de Gutenberg, les éditeurs de thèmes se sont très vite lancés dans la création de plugins destinés à apporter à leurs templates, des fonctionnalités complémentaires sous forme de blocs réutilisables. Bien souvent optimisés spécifiquement pour leur thème, ces ensembles de blocs reproduisent en tout ou partie ce qu’il est déjà possible de faire avec les principaux builders du marché : Elementor, Visual Composer, Beaver Builder, Brizy…
L’objet de cet article n’est pas de vous faire une n-ième énumération des meilleurs plugins pour ajouter de nouveaux blocs Gutenberg, mais de vous présenter quelques plugins en particulier, qui eux, permettent d’ajouter des fonctionnalités aux blocs existants dans votre WordPress (qu’ils soient natifs ou externes) !
Pour en savoir plus sur les meilleurs plugins de blocs Gutenberg, allez faire un tour sur cet excellent article chez WPMarmite !
Gérer la visibilité des blocs avec Block Visibility
Ce plugin, tout nouveau avec seulement 300 installations à ce jour, n’en demeure pas moins un indispensable dont je ne peux plus me passer, car il permet de gérer, vous l’aurez deviné, la visibilité de n’importe quel bloc dans vos mises en page !
Block Visibility inclut les fonctionnalités suivantes :
- masquage pur et simple d’un bloc (peut être utile sur une page publiée sur laquelle vous reviendrez plus tard)
- affichage programmé de telle date à telle date, ou à partir de telle date, ou jusqu’à telle date
- affichage selon le rôle de l’utilisateur (et/ou selon la connexion : bien pratique pour les zones membre !)
- affichage selon la résolution de l’écran (desktop / tablette / mobile)
Les possibilités sont donc bien présentes, le plugin ajoutant simplement un onglet de paramétrage dans les propriétés du bloc en cours d’édition. Pratique, simple, efficace !
J’utilise cet excellent plugin pour ainsi dire 100% de mes sites basés sur Gutenberg : il permet par exemple de définir des CTA spécifiques aux mobiles, comme un bouton d’appel téléphonique, qui n’a pas d’intérêt en version desktop ou tablette.
Enrichir les propriétés CSS avec Editor Plus
Ce second plugin, aux possibilités à la fois simples et efficaces, permet d’éditer à peu près toutes les propriétés CSS usuelles que l’on peut trouver sur un bloc : margin, padding, background, ombre, bordure, rayon de bordure (angles), taille et même animations (!)
En clair : Editor Plus offre à tous les blocs dépourvus de ces propriétés parfois bien utiles au webdesigner, tout ce qu’il faut pour ajuster vos mises en page au pixel près, en différenciant desktop, tablette et mobile !
Une dernière option, et non des moindres : le « Custom CSS », qui permet de saisir son propre code CSS sur chaque bloc : de quoi repousser toutes les limites et… donner aux versions gratuites des blocs freemium presque toutes les possibilités de leur version « pro » !
Editor Plus ajoute dans la barre de propriété de vos blocs, pas moins de 11 onglets destinés à enrichir les paramètres déjà existants.
Avec ce plugin, les blocs de base deviennent singulièrement plus faciles à manipuler : un simple paragraphe peut se voir affublé d’une couleur de fond, d’angles arrondis, d’une maîtrise totale des marges internes et externes, et d’un effet au survol : énorme !
Pour des raisons de performances, je vous conseille, dans les réglages de cette extension, de désactiver l’Icon Library (qui charge inutilement des polices complémentaires)
J’ai, depuis que je l’utilise, limité tous mes nouveaux projets à un seul ensemble de blocs complémentaires, tant l’extension décuple les possibilités de mise en forme.
Gérer visibilité ET mises en forme avec Gutenberg Blocks Editor Kit
Ce plugin EditorsKit depuis peu repris par Extendify (l’éditeur du plugin dont nous venons de parler) reprend en partie ce que font les deux précédents, ce qui permet d’éviter l’installation de deux plugins si vous n’avez pas besoin de toutes les fonctionnalités de ces derniers. Mais il ajoute également de belles possibilités dans l’éditeur de texte même des blocs :
- Ajout de nombreuses mises en forme (barré, exposant, surligné, justification du texte, etc.)
- Suppression en un clic des mises en forme
- Gestion des caractères spéciaux
- Gestion des markdowns pour une saisie ultra rapide (exemple : *expression devient expression)
- Espaces insécables
- etc.
En matière de visibilité des blocs, ce plugin propose moins de possibilités que Block Visibility, mais offre une option supplémentaire assez énorme : choisir la visibilité d’un bloc selon la valeur d’un champs ACF ! Les développeurs adeptes des apprécieront.
Pour découvrir toutes les possibilités de cet excellent plugin, vous pouvez regarder cette courte vidéo de présentation :
Étendre les possibilités des blocs réutilisables avec Reusable Blocks Extended
Ce plugin, créé par un français très connu dans le milieu WordPress, permet d’étendre les possibilités de Gutenberg et de ses blocs réutilisables :
- Gérer les blocs réutilisables directement depuis le panneau d’administration WordPress
- Afficher tous les posts où sont utilisés les blocs réutilisables (super pratique !)
- Permettre leur utilisation dans les widgets, via des shortcodes ou via du code PHP
- Prévisualiser les blocs dans l’admin
- etc.
Enfin bref, super pratique quand on veut industrialiser ses mises en page efficacement !
Bonus : l’astuce pour cacher les blocs inutiles
Rien de plus pénible, quand on utilise Gutenberg avec un ou plusieurs ensembles de blocs complémentaires (il m’arrive d’en utiliser jusqu’à 3 simultanément quand je veux obtenir des mises en page bien particulières) de se retrouver avec une quantité de blocs presqu’ingérable.
Si la majorité des plugins ajoutant des blocs autorisent la désactivation de ceux dont vous n’avez pas besoin, pour les blocs natifs, c’est une autre histoire : voici une astuce pour simplement les cacher de l’interface.
Rendez-vous dans le menu en haut à droite de votre éditeur de page/article, puis cliquez sur les trois petits points pour accéder aux préférences relatives de l’éditeur. Là, vous y trouverez le Gestionnaire de blocs !
Il suffit ensuite de décocher les blocs dont vous n’avez pas besoin : simple, efficace !
Mon seul regret est qu’il n’est pas possible, sur certaines versions de WordPress, de désactiver en partie les , dont nous n’avons pour la plupart jamais besoin.
A lire également…
Découvrez 5 plugins pour enrichir le back-office de vos sites WordPress.
Conclusion : trop de blocs tuent les blocs !
Autant j’ai littéralement redécouvert WordPress lorsque je me suis mis à utiliser Gutenberg, autant j’ai très vite été déçu par les blocs natifs, qui même s’ils suffisent pour beaucoup de cas, limitent fortement les possibilités de mise en page lorsque l’on veut réaliser des designs évolués et tendance.
Le risque est de recourir à une grande quantité de plugins pour obtenir les blocs intéressants : un CTA par ici, des colonnes aux réglages avancés par là, des boutons graphiques, des galeries d’images, etc.
Au final, on se retrouve à utiliser 3, 4 voire 5 plugins différents uniquement pour activer quelques blocs de chacun d’entre eux, parce qu’aucun ne propose (sauf peut-être quelques plugins payants) toutes les possibilités dont nous avons besoin.
C’est en recherchant à étendre les fonctionnalités des plugins existants, que j’ai progressivement découvert les plugins ci-dessus : simples, efficaces, et qui ouvre un panel de possibilités énorme, quand on en a appréhendé le fonctionnement !
Aujourd’hui, je ne fonctionne plus qu’avec un ensemble de blocs (Spectra, de chez BrainStormForce, qui fonctionne de paire avec mon thème préféré : Astra Pro) ; outre le côté webperfs énorme (une option de ce plugin gratuit permet de générer les Critical CSS selon les blocs utilisés, tout comme dans le thème du même éditeur), le mariage avec les plugins cités précédemment offre des possibilités autorisant une infinité de mises en page, sans fioritures.
Voir tous les articles de la catégorie WordPress
Bonjour,
sur mon site IDEOZ, j’ai ajouté le plugin PublishPress Blocks. Je l’avais préféré à Ultimate addons Gutemberg, mais grâce à l’article, je viens de le redécouvrir et je pense l’adopter. Il me semble plus complet que quand je l’ai testé pour essayer d’améliorer la mise en valeur de mon site. Le souci c’est que j’ai déjà Elementor et Elementor pro qui alourdissent. Je pense y renoncer mais j’ai fait trop de pages avec pour les supprimer comme ça. Je cherche des solutions plus souples et Ultimate addons a en effet l’avantage de permettre de n’activer que ce dont on a besoin contrairement à Publishpress blocks.
Merci pour ce compte rendu.