Dans l’article précédent, nous avons vu comment les variations de blocs permettent de proposer plusieurs préréglages d’un même bloc dans l’inserteur, en jouant sur les attributs par défaut. Il existe un second mécanisme, plus léger, souvent confondu avec le premier : les styles de blocs, activés via registerBlockStyle(). Le résultat visuel se ressemble parfois, mais le fonctionnement interne est très différent, et savoir lequel choisir évite bien des complications.
Un style de bloc n’ajoute ni ne modifie aucun attribut : il se contente d’ajouter une classe CSS au bloc, du type is-style-nom-du-style, que votre feuille de styles peut ensuite cibler. C’est le mécanisme derrière les styles natifs que vous connaissez peut-être déjà, comme les styles « Par défaut » et « Arrondi » du bloc image, ou « Par défaut » et « Contour » du bloc citation.
Enregistrer un style de bloc
La fonction registerBlockStyle() s’utilise très simplement, côté JavaScript, dans un fichier chargé dans l’éditeur :
import { registerBlockStyle } from '@wordpress/blocks';
registerBlockStyle( 'core/quote', {
name: 'bandeau-accent',
label: 'Bandeau accent',
} );Ce seul appel suffit à faire apparaître une nouvelle option dans le panneau « Styles » de la barre latérale, aux côtés des styles natifs du bloc citation. Lorsque l’utilisateur la sélectionne, Gutenberg ajoute simplement la classe is-style-bandeau-accent au bloc. Il ne reste plus qu’à écrire le CSS correspondant, côté éditeur et côté site public :
.is-style-bandeau-accent {
border-left: 4px solid var(--wp--preset--color--accent);
background-color: #f6f6f6;
padding: 1.5rem;
}Ce CSS peut être enregistré via wp_enqueue_block_style(), une fonction qui permet de ne charger le style que lorsque le bloc concerné est réellement présent sur la page, ou plus simplement via votre feuille de styles de thème habituelle si vous préférez une approche plus globale.
Déclarer un style directement dans block.json
Pour un bloc personnalisé, il est également possible de déclarer ses styles directement dans block.json, via la propriété styles, ce qui évite un appel JavaScript séparé :
{
"name": "wpmoderne/encadre-conseil",
"styles": [
{ "name": "defaut", "label": "Par défaut", "isDefault": true },
{ "name": "ombre-portee", "label": "Avec ombre" }
]
}
Styles ou variations : comment choisir
La confusion entre ces deux mécanismes est fréquente, car tous deux ajoutent des « présentations alternatives » à un bloc. Le tableau suivant résume les différences essentielles.
| Critère | Style de bloc | Variation de bloc |
|---|---|---|
| Mécanisme | Ajout d’une classe CSS | Attributs par défaut différents |
| Change le contenu inséré | Non | Peut pré-remplir des blocs enfants |
| Peut changer d’icône dans l’inserteur | Non, une seule entrée | Oui, chaque variation a sa propre icône |
| Modifiable après insertion | Oui, via le panneau Styles à tout moment | Non, la variation ne s’applique qu’à l’insertion |
| Cas d’usage typique | Changer une apparence visuelle | Proposer des usages distincts d’un même bloc |
En pratique, retenez ceci : si vous voulez qu’un rédacteur puisse changer d’avis après coup et basculer facilement d’une présentation à une autre sur un bloc déjà inséré, le style de bloc est la bonne solution, puisqu’il reste modifiable à tout moment depuis la barre latérale. Si en revanche le choix se fait au moment de l’insertion et implique une structure ou des valeurs par défaut différentes, la variation est plus adaptée.
Un exemple concret : les styles d’un bloc « bouton »
Prenons un cas très courant sur un site vitrine : un bloc bouton personnalisé qui doit proposer plusieurs traitements visuels : plein, contour, et texte souligné sans fond. Les trois partagent exactement la même structure de données (un lien, un libellé), seul le rendu visuel change. C’est le cas d’école du style de bloc :
import { registerBlockStyle, unregisterBlockStyle } from '@wordpress/blocks';
wp.domReady( () => {
unregisterBlockStyle( 'core/button', 'outline' );
registerBlockStyle( 'core/button', {
name: 'plein',
label: 'Plein',
isDefault: true,
} );
registerBlockStyle( 'core/button', {
name: 'souligne',
label: 'Texte souligné',
} );
} );Notez l’usage de unregisterBlockStyle() pour retirer un style natif qui ferait doublon avec votre propre style « contour ». Cette fonction prend le nom du bloc puis le nom du style à retirer, et s’utilise généralement dans un hook wp.domReady() pour s’assurer que le style natif est bien enregistré avant d’être retiré.
Attention à la portée de vos styles CSS
Un piège classique : écrire un style de bloc dont le CSS n’est chargé que côté éditeur, et l’oublier côté site public, ou inversement. Pensez systématiquement à charger votre feuille de styles avec wp_enqueue_block_style(), ou à déclarer le fichier correspondant dans les propriétés style et editorStyle de votre block.json, pour que le rendu reste identique entre l’éditeur et le site public.
Conseil maison : nommez vos styles de façon descriptive du résultat visuel (« contour », « ombre-portee »), jamais du contexte d’usage (« page-accueil »). Un style de bloc est réutilisable par nature ; un nom trop spécifique en limite artificiellement l’usage.
En résumé
Les styles de blocs offrent un moyen simple et léger d’enrichir l’éditeur de présentations visuelles alternatives, sans toucher à la structure de données du bloc. Contrairement aux variations, ils restent modifiables à tout moment après l’insertion, ce qui en fait l’outil de choix pour tout ce qui relève purement de l’apparence. Bien articulés avec les variations vues précédemment, ils permettent de construire une bibliothèque de blocs à la fois riche pour les rédacteurs et légère à maintenir pour les développeurs.
