Formation « Créer des blocs avec Gutenberg »

Désactiver des blocs Gutenberg avec ou sans code

Lecture : 3 minutes • 9

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 3 méthodes, avec et sans code !

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 de désactiver les blocs directement à partir de l’interface de l’éditeur, mais le réglage sera à refaire pour chacun des utilisateurs du site.

Pour cela, cliquez sur les 3 points en haut à droite de l’éditeur, puis Préférences > Blocs :

L'interface de désactivation des blocs dans l'éditeur de WordPress
Désactivez les blocs inutiles à partir de cette interface

Tous les blocs sont listés, les natifs comme ceux ajoutés par des extensions. Un moteur de recherche vous permettra de les trouver plus facilement, car la liste est devenue très longue depuis l’ajout des blocs de sites, avec l’arrivée du Full Site Editing dans WP 5.9.

Sélectionnez ceux que vous ne désirez plus voir apparaitre dans la bibliothèque de blocs. Et le tour est joué !

Méthode 2 : 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.

Méthode 3 : via Javascript

Et enfin, cette dernière méthode ne va pas nous nécessiter beaucoup de code mais risque de ne plus fonctionner à l’avenir !

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.


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

9

Questions, réponses et commentaires

  1. 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.

  2. Mike

    Le 25 janvier 2019

    Sympa ces méthodes ! hop bookmark !

  3. Andrew

    Le 23 mai 2019

    Bonjour,

    Est-il possible de choisir les types de blocs à afficher dans l’admin selon le modèle choisi en back office ?

    Merci d’avance pour ton retrour 😉

    1. Maxime BJ

      Le 23 mai 2019

      C’est possible nativement depuis la 5.2 dans le menu supérieur puis outils > gestionnaires de blocs !

  4. sebastien.chandonay

    Le 21 février 2020

    Bonjour Maxime et merci pour tes tutos. Une question, quelle est la meilleure solution pour désactiver un bloc en fonction du type de contenu (post-type) sans avoir, pour la part PHP, à écrire à la main tous les slugs de blocs à laisser actif ?
    Merci

    1. Maxime BJ

      Le 23 mars 2021

      Grâce à la méthode 3 du PHP, tu vérifies le type de publication au début de la fonction. Tu pourrais donc créer des cas spéciaux en fonction via des if/else.

  5. Mitch

    Le 28 mai 2024

    Bonjour,
    Voilà des bonnes astuces !
    Par hasard, il n’y aurait pas une solution sans plugin pour retirer un bloc (table des matières en l’occurrence) présent sur presque toutes des pages sans avoir à le faire page par page… galère ;(
    Merci d’avance

    1. Maxime BJ

      Le 28 mai 2024

      Par défaut les pages sont vides. Si les blocs y sont déjà, c’est que le thème ou une extension a configuré ça ainsi. Si tu désactives le bloc dans l’éditeur, le template affichera qu’il contient un bloc inconnu. D’ailleurs, il n’y a pas de bloc “table des matières” par défaut dans WordPress. Il faut déjà que tu trouves qui apporte ce bloc dans ton site.

Laisser un commentaire