# Les styles de blocs : personnaliser l’apparence sans dupliquer le code

> registerBlockStyle permet d'ajouter des présentations alternatives à un bloc en une poignée de lignes. On distingue enfin styles et variations.

- Auteur : Clément Hadrot
- Publié le : 2022-04-12
- Mis à jour le : 2022-04-12
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/styles-de-blocs/

## L’essentiel

- Ajoute une simple classe CSS, sans toucher aux attributs du bloc
- S'applique aussi bien aux blocs natifs qu'à vos blocs personnalisés
- Complémentaire des variations, pas concurrent

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" }
  ]
}
```

> L'essentiel à retenir : Ajoute une simple classe CSS, sans toucher aux attributs du bloc ; S'applique aussi bien aux blocs natifs qu'à vos blocs personnalisés ; Complémentaire des variations, pas concurrent

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