Supports : ajouter des fonctionnalités à vos blocs sur-mesure sans code

Lorsque j’ai écrit la première version de cette formation en 2019, on devait coder chaque fonctionnalité que l’on voulait ajouter à un bloc. C’était plutôt long et rébarbatif !

Mais vous allez voir qu’aujourd’hui c’est beaucoup plus simple, car pour ajouter les fonctionnalités de couleurs, espacements, ombres, typographie à votre bloc, il suffira d’ajouter une simple instruction dans le block.json ! Magique.

Et justement, on va voir tout cela dans ce cours, avant de se lancer dans le développement de fonctionnalités sur-mesure dans la suite de la formation.

Les supports

Au sein du block.json se trouve une propriété très intéressante qui s’appelle supports. C’est elle qu’on va étudier en détails dans ce cours.

Pour ceux qui ont acquis la version premium de cette formation, vous pouvez ouvrir le bloc 02-supports dans le dossier /src/.

Voici à quoi ressemble un block.json classique tel qu’on l’a vu précédemment :

Pour le moment, il n’y a rien dans supports. Du coup, si on insère notre bloc dans l’éditeur, on ne verra aucune option dans l’inspecteur (la colonne latérale de droite) lorsqu’on le sélectionne.

Mais lorsqu’on va rajouter des supports, par exemple tous ceux-là :

On va se retrouver cette fois avec toute une ribambelle d’options et de réglages dans la colonne latérale.

Dans cet exemple j’ai volontairement mis toutes les propriétés disponibles (ou presque) pour vous montrer l’étendue des possibilités des supports. Dans la suite de ce cours, on va décortiquer les fonctionnalités une par une.

L’objectif étant bien évidemment à terme de ne proposer que les fonctionnalités vraiment utiles à votre utilisateur afin de conserver une expérience utilisateur minimaliste. e n’est pas Elementor ici !

L’alignement et la largeur du bloc

On va commencer avec les options d’alignement.

Si on ajoute simplement cette ligne dans supports, on va pouvoir choisir l’alignement de notre bloc :

Dans l’éditeur, une option apparaît au niveau de la barre d’outil supérieure qu’on appelle également la toolbar.

Avec ces réglages, votre bloc pourra être aligné à gauche ou à droite comme pour les images, avec des float.

Ce n’est pas idéal, du coup je vous recommande plutôt de définir les options possibles manuellement :

Cette fois, on permet de sélectionner uniquement parmi « Grande largeur » et « Pleine largeur ». C’est beaucoup mieux !

Les couleurs

Grâce aux supports, on va également pouvoir personnaliser les couleurs de notre bloc.

Et on a pas mal de choix à notre disposition :

Voici l’utilité de chacune de ces propriétés :

• background : la couleur du fond du bloc ;
• text : la couleur du texte du bloc ;
• link : la couleur des liens du bloc ;
• button : la couleur d’un bouton enfant du bloc ;
• heading : la couleur des titres du bloc ;
• gradients : activer la possiblité d’utiliser les dégradés sur les fonds, le bouton et le titre.

Dans l’éditeur, on obtient ceci :

Cela fait pas mal d’options, même si dans la réalité, j’utilise en général seulement ces deux-là :

En général, je vais faire en sorte de contrôler l’apparence du lien automatiquement via le CSS du bloc pour éviter de donner trop de possibilités à mon utilisateur.

Les limites des réglages du support

Ces options de couleur vont vous faire gagner énormément de temps, mais elles ne peuvent s’appliquer que globalement sur le bloc.

Si vous cherchez à modifier la couleur d’un seul texte par exemple, il faudra procéder autrement. Mais ne vous inquiétez pas, on va justement voir comment ajouter un réglage de couleur à un texte en particulier un peu plus tard dans cette formation.

Les espacements

Concernant les options d’espacement, on va retrouver en substance les mêmes que dans le theme.json, que je montre dans la formation Full Site Editing.

On va pouvoir activer 3 options :

Voici leur utilité :

• padding : les marges internes, les plus utiles ;
• margin : les marges externes ;
• blockGap : l’espacement de base entre les éléments enfant du bloc.

En activant toutes ces options, voici ce que ça donne dans l’éditeur :

En général, je n’utilise pas trop margin, car au final c’est le blockGap du bloc parent qui fera foi pour gérer l’espacement entre les blocs.

Le padding sera par contre essentiel à partir du moment où vous activez le choix de couleur du fond. Car sinon, le texte sera collé aux bords du bloc.

Pour contrôler les valeurs possibles d’espacement, il faudra modifier le fichier theme.json de votre thème. Reportez-vous au cours gratuit sur les espacements de ma formation Full Site Editing pour en savoir plus !

La typographie

Place maintenant à la typographie.

Cette fois il y a moins d’options que dans le theme.json pour une raison que j’ignore.

Mais vous allez pouvoir tout de même agir sur plusieurs aspects :

• fontSize permet de modifier la taille du texte ;
• lineHeight permet de modifier l’interlignage des textes ;
• textAlign permet de gérer l’alignement (gauche, droite et centre).

Activez les options que vous voulez uniquement si vous en avez besoin. Dans Gutenberg, ça donne ceci :

Petit détail : l’option d’alignement se trouve dans la barre d’outils au dessus du bloc, alors que la taille du texte et l’interlignage se trouvent à droite dans l’inspecteur.

Les images de fond

En plus de la couleur de fond, vous allez pouvoir permettre l’ajout d’une image au fond de votre bloc.

Pour cela, on a accès à 2 options :

La première vous permet d’activer le choix d’une image de fond, et la seconde active les options pour configurer la taille, la répétition et la position de cette image :

Si vous voulez limiter les options offertes à votre utilisateur, activez uniquement backgroundImage et ajoutez du CSS pour contraindre le comportement de l’image d’arrière-plan (taille, répétition…).

Les dimensions

On dispose également d’une propriété nommée dimensions.

Pour l’instant, une seule option est proposée : c’est la hauteur minimum du bloc.

Cette option sera très utile si vous activez la possibilité de définir une image de fond. Une fois activée, elle apparaît dans la section « Dimensions » dans l’inspecteur :

D’ailleurs, vous trouverez l’unité vh dans les valeurs disponibles, qui est très pratique car elle vous permet de faire une section qui prend par exemple 70% de la hauteur de l’écran du navigateur.

La position sticky

L’option de position va vous permettre d’accrocher votre bloc en haut de l’écran lors du scroll via la propriété CSS position : sticky.

C’est très pratique pour faire un sommaire qui suit l’utilisateur lors du défilement dans la page par exemple.

Cette fois, l’option n’apparait pas dans l’onglet « Styles » de l’inspecteur, mais dans l’onglet principal :

Seul bémol, WordPress ne permet pas de sélectionner le décalage avec le haut de la page, votre bloc sera donc collé tout en haut, ce qui est pratique pour une en-tête par exemple, mais pas pour un bloc sommaire.

Pour corriger ça, il faudra ajouter un peu de CSS à votre bloc, comme par exemple :

Il y a un petit calcul à faire pour prendre en compte la hauteur de la barre d’administration si celle-ci est présente dans la page.

J’utilise également !important pour surcharger la propriété déjà existante de WordPress qui permet justement d’éviter par défaut l’admin bar.

Les ombres

Vous pouvez également activer les ombres pour vos blocs sur mesure.

Pour cela, il faut tout simplement ajouter la propriété shadow.

Dans l’interface de l’éditeur, les ombres se trouveront en bas à droite de l’inspecteur :

Il est bien entendu possible de définir des ombres personnalisées dans le theme.json.

Les options avancées

Et pour en terminer avec les supports, il nous reste à voir quelques propriétés qui peuvent s’avérer plutôt utiles dans certaines situations.

Elles vont permettre d’accéder à des options avancées et des interactions dans l’éditeur de blocs.

L’ancre

La propriété anchor va permettre d’activer l’ancre HTML, qui sera utile si vous souhaitez faire un lien vers votre bloc en utilisant #mon-bloc dans une balise <a> par exemple.

L’ancre doit contenir uniquement des chiffres, des lettres et des tirets. Aucun espace ou caractère spécial n’est autorisé, puisque l’ancre va finir dans l’URL.

On utilisera les ancres notamment lorsque l’on abordera à la fin de la formation le bloc « Sommaire » généré automatiquement.

Classes CSS personnalisées

La propriété customClassName permet d’ajouter des classes CSS personnalisées à la main à votre bloc.

En général je désactive cette fonctionnalité car j’estime que mon utilisateur n’aura pas besoin d’ajouter de classe CSS sur mes blocs : j’aurai préparé des variations de styles de blocs et des compositions réutilisables pour lui.

La classe par défaut du bloc

La propriété className, à ne pas confondre avec la propriété précédente, permet de définir si WordPress doit donner le nom de classe par défaut à votre bloc, définie à partir du nom du bloc, défini dans la propriété name du block.json.

Dans notre cas, la classe sera .wp-block-capitaine-supports.

Mais en mettant className à false, cette classe ne sera pas ajoutée automatiquement au bloc.

Je vous recommande tout de même de la garder, afin de conserver une harmonie entre tous les blocs de votre site.

Désactiver la modification du HTML

Par défaut, l’utilisateur peut modifier le HTML d’un bloc en cliquant sur les 3 points de la Toolbar puis « Modifier en HTML ».

Bien sûr, c’est une très mauvaise idée (même pour nous développeurs) puisque ça risque de casser le bloc.

En plus, le code n’est pas formaté ni coloré, ce qui rend l’édition encore plus difficile.

Du coup, je désactive toujours cette propriété pour être sûr de ne pas tenter le diable. Cependant, ça n’empêche pas de passer tout l’éditeur en mode code à partir du menu 3 points qui se trouve en haut à droite de l’éditeur.

Un bloc unique

Dans certains cas, il se peut que vous voulez qu’un bloc apparaisse une seule fois dans la page. Par exemple un bloc Sommaire, qu’on abordera d’ailleurs en fin de formation dans les études de cas.

Pour cela, passez la propriété multiple à false. Une fois le bloc inséré dans le contenu, il ne pourra plus être inséré à nouveau dans cette page.

Renommage d’un bloc

Il est désormais possible dans WordPress de renommer certains blocs à partir de la « Vue en Liste ». C’est notamment très pratique pour les blocs « Groupe » afin de mieux comprendre leur usage (par exemple « Section CTA »).

Transformer en composition

Par défaut, vous pouvez transformer un bloc en une composition afin de la réutiliser plus tard. Autant ce n’est pas très utile pour un bloc simple, autant ça peut le devenir si votre bloc est un conteneur qui peut accueillir des blocs enfants.

Si vous ne souhaitez pas proposer l’option de transformer le bloc en composition, vous pouvez la désactiver en passant reusable à false.

Comment sont gérées les classes CSS ?

Vous avez vu, on peut déclarer beaucoup de fonctionnalités sans effort dans un bloc custom à l’aide de la propriété supports !

Mais du coup, comment fonctionne la magie derrière tout ça ? En fait, c’est tout simple : toutes ces options vont générer des classes CSS qui seront injectées à la racine du bloc.

Pour rappel, le code de nos blocs ressemble toujours à ceci :

La magie opère au niveau de la fonction useBlockProps() de WordPress, qui va générer automatiquement les attributs HTML de notre premier élément : classes, styles, ID…

Lorsqu’on regarde le HTML généré en front, une fois que l’on a mis plusieurs options, on obtient ceci :

Au niveau des classes CSS, on remarque plusieurs choses :

• wp-block-capitainewp-supports est la classe générée de base pour notre bloc, si className est à true ;
• has-accent-2-color est la classe qui applique la couleur accent-2 à nos textes ;
• has-accent-3-background-color est la classe qui applique le fond en accent-3 ;
• has-large-font-size est la classe qui agrandit la taille du texte.

les valeurs large, accent-2 et accent-3 sont celles définies dans le theme.json du thème que l’on a utilisé. Ces valeurs peuvent varier d’un thème à l’autre.

Maintenant, au niveau de l’attribut styles, on retrouve d’autres informations :

• Les marges internes (padding) sont gérées via les variables du thème, comme par exemple --wp--preset--spacing--40.
• La hauteur de ligne (line height) est définie directement, sans variable.

En résumé, n’oubliez jamais d’utiliser useBlockProps() dans votre edit.js et dans votre save.js, afin de bénéficier des nombreuses fonctionnalités offertes par les supports.

---

Finalement, grâce aux supports, vous avez déjà accès à de nombreuses fonctionnalités sans avoir à coder en React. Ce concept va donc vous permettre de faire beaucoup avec les blocs et sans effort !

Dans le prochain cours, on va aborder le composant RichText qui permet d’éditer le contenu d’un bloc avec des options de mise en page.