Formation « Créer des blocs avec Gutenberg »

Désactiver des blocs Gutenberg

Lecture : 2 minutes • 3

Gutenberg fournit trop de blocs par défaut ? Vous voulez en désactiver pour alléger l’interface, ou éviter que votre client fasse des siennes ? Je vous propose dans cet article 2 méthodes, une avec et une autre sans code !

La formation en vidéo

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

Il y a pleins de raisons à vouloir désactiver des blocs Gutenberg, la principale étant de vouloir alléger l’interface et limiter les possibilités à nos utilisateurs.

Méthode 1 : Rapide et sans code

La solution « sans code » est d’installer une extension comme Advanced Gutenberg Blocks, qui propose un tableau de bord permettant de lister tous les blocs natifs, et les désactiver au besoin d’un seul clic :

L'interface de désactivation des blocs
L’interface de désactivation des blocs

Télécharger Advanced Gutenberg Blocks

Méthode 2 : via JavasCript

L’autre méthode ne va pas nous nécessiter beaucoup de code !

Il va nous falloir un simple bout de JS qu’il faudra charger au bon moment : après l’éditeur et après la déclaration des blocs natifs.

Pour cela on va utiliser le hook PHP enqueue_block_editor_assets et ne pas oublier de déclarer la bonne dépendance (les fichiers JS à charger avant nous) :

PHP
functions.php

D’ailleurs on a déjà utilisé ce hook pour déclarer les styles et scripts nécessaires au bon fonctionnement de Gutenberg.

Et dans le fichier deactivator.js on va simplement utiliser la fonction wp.blocks.unregisterBlockType (sachant que wp est un objet global déjà déclaré).

JS
js/deactivator.js

Le tout est empaqueté dans une « promesse » Javascript, ce qui permet d’attendre que tous les blocs soient déclarés dans l’éditeur avant de les désactiver. Sans ça, on aurait une erreur undefined dans la console.

Ce code ne nécessite pas de compilation via Webpack. Il est utilisable en l’état.

À Éviter

N’essayez pas de mettre ces instructions dans le JS standard de vos blocks Gutenberg, sous prétexte d’économiser une requête HTTP : l’autre script est lancé trop tôt et ce code n’aura donc aucun effet.

Comment trouver les noms des blocs natifs ?

Le plus simple est d’afficher le code HTML du bloc depuis l’éditeur, via le bouton menu 3 petits points en haut à droite de l’écran.

Ensuite, dans le commentaire, vous aurez le nom du bloc. Pour les blocs natifs il faudra ajouter core/ avant le nom, par exemple core/button pour le bouton.

Vous pouvez du coup très bien désactiver également les blocs d’extensions tierces, par exemple woocommerce/products.

Méthode 3 : la méthode PHP

Il est également possible de désactiver les blocs directement grâce à du PHP, d’après le Handbook Gutenberg. Pour cela, un filtre vous permet de définir la liste des blocs autorisés :

PHP
functions.php ou plugin.php

Cette méthode est d’autant plus efficace que vous pourrez définir des cas spécifiques en fonction du type de publication (Post Type).

À noter que si $allowed_block_types est à true, tous les blocs seront autorisés, et s’il est à false, aucun ne le sera.


Voilà, libre à vous de faire du tri, et de vous approprier cet éditeur visuel afin qu’il corresponde entièrement à vos besoins !

3

Questions, réponses et commentaires

  1. Mike

    Le 25 janvier 2019

    Sympa ces méthodes ! hop bookmark !

  2. Bicou

    Le 10 décembre 2018

    Bonjour,
    Il a aussi l’extension
    Disable Gutenberg

    1. Maxime BJ

      Le 12 décembre 2018

      Oui mais je pense que c’est plus fiable de passer par classic editor comme c’est une solution officielle.

Laisser un commentaire