Formation « Créer des blocs avec Gutenberg »

Paramètres supplémentaires des blocs

Lecture : 4 minutes • 0

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.

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 manipuler ces paramètres supplémentaires, voici le code :

JS
src/16-parametres/index.js
import './style.scss'
import './editor.scss'

const { __ } = wp.i18n
const { registerBlockType, RichText } = wp.blocks // On charge le composant RichText

registerBlockType(
	'capitainewp/parametres',
	{
		title: __( "Bloc avec paramètres supplémentaires"),
		description: __("Un blocqui tire parti des autres paramètres de registerBlockType"),
		icon: 'edit',
		category: 'common',
		keywords: [
			__( 'Rich Text' ),
		],

		attributes: {
			content: {
				type: 'array',
				source: 'children',
				selector: '.content'
			},
    	},

		supports : {
			multiple: false, //  Ne peut-être utilisé qu'une seule fois
			anchor: true, // Permet de définir un ID sur le bloc afin de créer une ancre
			customClassName: false, // Enleve le champ qui permet d'assigner une classe personnalisée
			className: false, // Désactive la génération automatique du nom de classe .wp-block-capitainewp-monbloc
			html: false, // Empêche l'utilisateur d'éditer directement le HTML
			align: true, // Méthode plus rapide pour ajouter l'alignement
			reusable: false, // Empecher de convertir ce bloc en bloc réutilisable
		},

		edit: props => {

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.

Le bloc « Lire la suite » apparait grisé s’il a déjà été utilisé

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.

une ancre HTML dans un bloc
Définir une ancre dans un bloc

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.

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…

Transformer un bloc en un autre
Transformer un bloc en un autre

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.

Ca 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 :

JS
save: props => {
	return (
      <div>
      	<p className="content">{ props.attributes.content }</p>
      </div>
    )
},

transforms: {
	from: [
      {
        type: 'block',
        blocks: [ 'core/paragraph' ],
        transform: ( { content } ) => {
          return createBlock( 'capitainewp/parametres', {
            content,
          } )
        },
      },
    ]
  },

Comme on utilise une nouvelle fonction createBlock, il ne faut pas oublier de la charger au début du fichier : const { registerBlockType, RichText, createBlock } = wp.blocks.


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

    Laisser un commentaire