Il existe quelques paramètres de registerBlockType que l’on n’a pas encore vu et qui pourraient bien vous être utiles, comme la possibilité de mettre une classe personnalisée dans un bloc ou de limiter un bloc à une seule utilisation.
Sommaire du cours
Quand on a parlé de registerBlockType() dans le cours Déclarer un bloc Gutenberg, j’ai volontairement omis certains paramètres pour me cantonner seulement aux plus importants.
Il est maintenant temps de passer en revue ces autres paramètres qui pourraient trouver leur utilité dans vos blocs.
Tout d’abord voici un lien vers la documentation, qui liste chaque possibilité :
L’objet supports
L’objet supports va nous permettre de définir certains paramètres supplémentaires. Voici le code :
Limiter un bloc à une seule utilisation
Il y a actuellement 2 blocs qui ne peuvent être utilisés qu’une seule fois : le bloc Read more, et le bloc Next Page.
Vous pouvez copier ce comportement en ajoutant multiple: false, dans les paramètres de votre bloc, à la suite des attributes et avant la méthode edit par exemple.
Si vous tentez de réutiliser l’un de ces blocs, il apparaitra grisé dans l’interface et ne sera pas cliquable.
On pourrait utiliser ce paramètre pour notre bloc « liste d’ingrédients » qui n’a pas d’intérêt à apparaitre plusieurs fois dans le même article.
D’autres options facultatives sont disponibles dans cet objet. Je vais les passer en revue :
L’ancre
En activant le paramètre anchor: true, un champ sera ajouté dans l’inspecteur afin de permettre de définir un ID sur le bloc, afin de faire une ancre HTML depuis un lien.
Classe personnalisée
Chaque bloc peut se voir attribuer un nom de classe personnalisée via l’inspecteur, mais vous pouvez désactiver cette fonctionnalité en ajoutant customClassName: false, dans supports.
Cela peut être utile si vous ne souhaitez pas que vos utilisateurs ou clients personnalisent trop facilement le CSS de votre bloc.
Nom de classe auto généré
Par défaut on récupère props.className pour nommer notre bloc, et on écope d’une classe du style .wp-block-capitainewp-monbloc.
Même si vous devez l’écrire manuellement dans edit, cette classe est automatiquement appliquée dans le save. Si vous regardez dans tous mes exemples, vous verrez que je ne la met jamais, et pourtant elle apparait quand même en front.
Si vous n’en voulez pas, ajoutez simplement className: false, dans supports.
Empêcher l’édition du HTML
C’est peut-être le paramètre le plus important si vous faites des blocs pour des clients. En ajoutant html: false, dans supports, vous désactivez la possibilité pour l’utilisateur d’éditer le HTML du bloc.
Et c’est peut-être bien mieux comme ça, afin d’éviter les carnages ! Bon malheureusement, ça désactive simplement l’édition du HTML au niveau du bloc (menu à droite du bloc). Si l’utilisateur passe en mode code HTML sur tout l’article, il pourra quand même modifier. Dommage.
Dans index.js ou dans block.json ?
Vous avez probablement remarqué que j’ai également rapatrié le titre et la description du bloc dans index.js car c’est le seul moyen de rendre ces éléments traduisibles.
J’ai également écrit les supports ici, mais j’aurais pu tout aussi bien les déclarer dans block.json. Peu importe votre choix, il faudra les déclarer une seule fois.
Si vous optez pour index, votre fichier block se trouvera allégé :
Transformer son bloc
Je ne sais pas si vous avez remarqué mais lorsque vous êtes sur un bloc de type paragraphe, vous avez une option pour transformer le bloc en un titre, une liste, une citation…
Vous allez pouvoir faire la même chose avec vos blocs. L’idée c’est que la personne commence à écrire un paragraphe normal puis bascule sur votre bloc.
Et ça marche dans les deux sens : vous pouvez dire que l’utilisateur peut transformer un simple paragraphe en votre bloc, ou partir de votre bloc le convertir en un autre.
On va utiliser pour cela l’objet transforms avec le sous objet from ou to. Voici l’exemple qui permet de transformer un paragraphe basique en ce bloc :
Comme on utilise une nouvelle fonction createBlock, il ne faut pas oublier de la charger au début du fichier :
Ces petits paramètres peuvent s’avérer plutôt utiles dans certaines situations. Consultez régulièrement la documentation au cas où de nouveaux paramètres aient été ajoutés.
Il reste maintenant un dernier paramètre que je ne vous ai pas présenté, mais il mérite son cours à part entière : le bloc de dépréciation, qui vous permettra de mettre à jour le HTML de votre bloc sans qu’il devienne invalide. Je vous le présente dans le prochain cours.
0
Questions, réponses et commentaires