# register_block_style ajoute une variante visuelle à un bloc du cœur

> Dupliquer le rendu d'un bloc natif pour lui donner une apparence différente revient à réinventer la roue. Une fonction native ajoute simplement une classe CSS alternative, sans toucher au bloc d'origine.

- Auteur : WordPress Développement
- Publié le : 2022-09-16
- Mis à jour le : 2022-09-16
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/register-block-style-variante-visuelle-bloc-coeur/

## L’essentiel

- Ajoute une classe CSS alternative sans dupliquer le rendu du bloc
- Apparaît automatiquement dans le panneau Styles de l'inspecteur
- Peut être retirée pour un bloc précis avec unregister_block_style

`register_block_style( 'core/quote', [ 'name' => 'encadre', 'label' => 'Encadré' ] );` : cette seule fonction, appelée depuis un hook `init`, suffit à ajouter une variante visuelle « Encadré » au bloc citation natif, visible directement dans le panneau Styles de l'inspecteur, sans jamais dupliquer le rendu du bloc `core/quote` ni réécrire son fichier `save.js`.

Ce guide détaille comment fonctionne `register_block_style()`, la différence essentielle avec les variations de blocs, et comment fournir le CSS correspondant proprement, sans surcharger le style global du thème.

## Ce que fait exactement register_block_style

La fonction ajoute une entrée dans la liste des styles disponibles pour un bloc donné. Une fois enregistrée, cette entrée apparaît dans le panneau « Styles » de l'inspecteur, aux côtés des styles natifs déjà proposés par WordPress pour ce bloc :

```
add_action( 'init', function () {
    register_block_style(
        'core/quote',
        [
            'name'  => 'encadre',
            'label' => 'Encadré',
        ]
    );
} );
```

Sélectionner ce style dans l'inspecteur ajoute simplement la classe `is-style-encadre` au bloc, sans toucher aux attributs existants ni à la structure HTML générée. C'est cette classe qu'il reste à habiller avec du CSS pour obtenir l'effet visuel voulu.

## Fournir le CSS associé

> L'essentiel à retenir : Ajoute une classe CSS alternative sans dupliquer le rendu du bloc ; Apparaît automatiquement dans le panneau Styles de l'inspecteur ; Peut être retirée pour un bloc précis avec unregister_block_style

Le style visuel proprement dit se déclare dans une feuille de style enregistrée séparément, ciblant la classe générée automatiquement :

```
.wp-block-quote.is-style-encadre {
    border: 2px solid #1e1e1e;
    border-radius: 8px;
    padding: 24px;
    background-color: #f6f6f6;
}
```

Cette feuille de style doit être chargée à la fois côté éditeur et côté front, via `enqueue_block_editor_assets` et `wp_enqueue_scripts` respectivement, ou plus simplement via la clé `style_handle` acceptée en troisième paramètre de `register_block_style()` depuis WordPress 5.9, qui prend en charge ce double chargement automatiquement.

```
wp_register_style( 'style-quote-encadre', get_theme_file_uri( 'css/quote-encadre.css' ), [], '1.0' );

register_block_style(
    'core/quote',
    [
        'name'         => 'encadre',
        'label'        => 'Encadré',
        'style_handle' => 'style-quote-encadre',
    ]
);
```

## Différence essentielle avec les variations de blocs

- Un style de bloc (`register_block_style`) ajoute uniquement une classe CSS alternative : il ne modifie ni les attributs par défaut, ni les valeurs pré-remplies du bloc.
- Une variation de bloc (`registerBlockVariation`, côté JavaScript) peut prédéfinir des attributs différents, voire une icône et un titre distincts dans l'inserteur, pour un même bloc sous-jacent.
- Un style convient donc à un simple habillage visuel, une variation convient à un préréglage plus complet incluant des valeurs par défaut différentes.

## Retirer un style existant du cœur

À l'inverse, `unregister_block_style()` permet de retirer un style natif jugé non pertinent pour l'identité visuelle d'un site, par exemple le style « Épinglé » du bloc citation :

```
add_action( 'init', function () {
    unregister_block_style( 'core/quote', 'plain' );
} );
```

Cette fonction doit s'exécuter après l'enregistrement du bloc concerné, généralement via le même hook `init` avec une priorité légèrement supérieure à celle utilisée par le cœur de WordPress.

## Cas d'usage fréquents pour une agence

- Ajouter un style « Carte » au bloc `core/group`, avec ombre portée et coins arrondis, cohérent avec l'identité visuelle du client.
- Ajouter un style « Bouton fantôme » au bloc `core/button`, avec fond transparent et bordure, sans dupliquer tout le bloc bouton natif.
- Retirer les styles natifs qui ne correspondent à aucune convention graphique validée par le client, pour éviter qu'un rédacteur ne les sélectionne par erreur.

> Sur nos gabarits de thème, on documente systématiquement, dans un fichier dédié, la liste des styles de blocs ajoutés et retirés : cette liste sert ensuite de référence directe pour la charte graphique transmise au client.

## En résumé

`register_block_style()` reste l'un des moyens les plus économes pour enrichir visuellement les blocs natifs de WordPress, sans jamais dupliquer leur code ni complexifier leur maintenance lors des futures mises à jour du cœur. Sa documentation complète, avec l'ensemble des paramètres acceptés, reste disponible sur [developer.wordpress.org](https://developer.wordpress.org/reference/functions/register_block_style/).