# register_block_style() sans classe CSS custom : un style de bloc en plus

> register_block_style() ajoute un style alternatif à un bloc natif en quelques lignes PHP, sans classe CSS gérée à la main ni bloc dupliqué.

- Auteur : WordPress Développement
- Publié le : 2020-11-16
- Mis à jour le : 2020-11-16
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/register-block-style-sans-classe-css-custom/

## L’essentiel

- Une fonction PHP suffit à ajouter un style alternatif
- Aucune classe personnalisée à maintenir à la main
- Le style apparaît directement dans le panneau latéral

Pourquoi écrire une nouvelle classe CSS, la documenter, puis expliquer à un rédacteur où la coller dans le champ « classes supplémentaires », quand une seule fonction PHP fait exactement ce travail, avec en prime un aperçu visuel dans l'inserteur ? `register_block_style()` existe depuis longtemps dans le cœur de WordPress et reste pourtant sous-utilisée sur les projets confiés en agence.

Ce billet montre comment déclarer un style de bloc supplémentaire pour un bloc natif comme `core/quote` ou `core/button`, sans toucher au balisage du bloc lui-même. On ne parlera pas des variations de blocs, une notion voisine mais distincte, réservée à un autre article.

## Le problème de la classe CSS ajoutée à la main

Sur un projet éditorial classique, la demande revient souvent : « on voudrait une citation qui ressemble à un encart, avec un fond de couleur et une bordure à gauche ». Le réflexe le plus répandu consiste à créer une classe `.citation-encart` dans la feuille de style du thème, puis à demander au rédacteur de la coller dans le champ « classe CSS supplémentaire » du bloc `core/quote`.

Ce fonctionnement pose trois problèmes concrets : la classe n'apparaît nulle part dans l'inserteur, elle se perd à la moindre faute de frappe, et elle n'a aucun aperçu visuel avant publication. Le rédacteur doit se souvenir du nom exact, sans filet.

## Déclarer un style avec register_block_style()

La fonction s'utilise côté PHP, typiquement dans le fichier `functions.php` du thème ou dans une extension, accrochée au hook `init` :

```
function agence_declarer_style_citation_encart() {
    register_block_style(
        'core/quote',
        array(
            'name'  => 'encart-colore',
            'label' => __( 'Encart coloré', 'agence' ),
        )
    );
}
add_action( 'init', 'agence_declarer_style_citation_encart' );
```

> L'essentiel à retenir : Une fonction PHP suffit à ajouter un style alternatif ; Aucune classe personnalisée à maintenir à la main ; Le style apparaît directement dans le panneau latéral

Une fois cette fonction chargée, un nouveau style « Encart coloré » apparaît dans le panneau latéral du bloc citation, sous les styles natifs déjà proposés par le thème. WordPress ajoute automatiquement une classe au format `is-style-encart-colore` sur le bloc, qu'il ne reste plus qu'à cibler en CSS.

## Écrire le CSS correspondant

Le style visuel se déclare ensuite normalement, dans la feuille de style du thème :

```
.wp-block-quote.is-style-encart-colore {
    background-color: #f3ede3;
    border-left: 4px solid #b08d57;
    padding: 24px;
}
```

Rien de plus n'est requis côté front. Le rédacteur choisit le style dans le panneau, comme il choisirait n'importe quel style natif fourni par WordPress, sans jamais toucher à un champ texte libre.

## Retirer un style natif jugé inutile

La même fonction sert aussi dans l'autre sens : masquer un style natif que le projet ne veut pas voir traîner dans l'inserteur, avec `unregister_block_style()`.

- Utile pour retirer le style « épinglé » d'un bloc de liste, rarement pertinent sur un site éditorial classique
- Évite de laisser un rédacteur choisir un style qui casse la charte graphique
- S'applique bloc par bloc, sans toucher au cœur de WordPress

```
function agence_retirer_style_epingle() {
    unregister_block_style( 'core/list', 'checkmark-list' );
}
add_action( 'init', 'agence_retirer_style_epingle', 20 );
```

## Charger un aperçu avec inline_style

Pour que l'aperçu dans l'inserteur reflète vraiment le rendu final, on peut aussi enregistrer une petite feuille de style dédiée à l'éditeur, via l'argument `inline_style` ou `style_handle` de la même fonction. Cela évite qu'un rédacteur choisisse un style « à l'aveugle » sans savoir à quoi il ressemblera une fois publié.

> Sur nos projets, on préfère toujours déclarer les styles de blocs côté PHP plutôt que de laisser courir des classes CSS libres dans un champ texte : c'est trois fois moins de tickets de support liés à une classe mal recopiée.

## En résumé

`register_block_style()` reste l'un des outils les plus rentables du développement de blocs WordPress : quelques lignes PHP suffisent à transformer une classe CSS anonyme en option visible, documentée et sûre pour le rédacteur. Pour un thème qui propose plusieurs variantes visuelles d'un même bloc natif, c'est souvent la meilleure première étape avant d'envisager un bloc entièrement personnalisé.