# Créer des styles de blocs personnalisés pour enrichir l’éditeur

> register_block_style permet d'ajouter des variantes visuelles aux blocs natifs, sans créer un bloc entier ni surcharger le rédacteur d'options.

- Auteur : Clément Hadrot
- Publié le : 2023-08-02
- Mis à jour le : 2023-08-02
- Catégorie : Tips
- URL : https://wpmoderne.dev.wordpress-developpement.fr/tips/creer-styles-blocs-personnalises-editeur-wordpress/

## L’essentiel

- register_block_style ajoute une variante sans nouveau bloc
- Chaque style se traduit par une simple classe CSS
- Peu de styles bien choisis valent mieux qu'une liste longue

Créer un bloc personnalisé complet pour ajouter une simple variante visuelle à un bloc existant est souvent disproportionné. WordPress propose une solution plus légère depuis l'arrivée de l'éditeur de blocs : les styles de blocs, enregistrés via `register_block_style()`, qui ajoutent une option de présentation supplémentaire directement dans le panneau des styles d'un bloc natif, comme le bouton ou la citation.

Cet article détaille comment créer ces styles, les associer à du CSS réel, et éviter le piège le plus fréquent : une liste de styles si longue qu'elle finit par désorienter le rédacteur plutôt que de l'aider.

## Enregistrer un style de bloc simple

La fonction `register_block_style()` s'utilise typiquement sur le hook `init`, et prend en paramètres le nom du bloc ciblé et un tableau décrivant le nouveau style :

```
add_action( 'init', function() {
    register_block_style(
        'core/button',
        array(
            'name'  => 'contour-arrondi',
            'label' => 'Contour arrondi',
        )
    );
} );
```

Une fois ce code actif, le panneau des styles du bloc « Bouton », dans l'éditeur, affiche une nouvelle vignette « Contour arrondi » aux côtés des styles natifs comme « Rempli » ou « Contour ». Sélectionner ce style ajoute la classe `is-style-contour-arrondi` au bloc, tant côté éditeur que côté rendu public.

## Écrire le CSS correspondant

Le style enregistré n'a aucun effet visuel tant que le CSS associé à sa classe n'est pas défini. Il doit être chargé à la fois dans l'éditeur et sur le site public, pour que l'aperçu corresponde exactement au rendu final :

```
.is-style-contour-arrondi {
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 999px;
    color: inherit;
}

.is-style-contour-arrondi:hover {
    background: currentColor;
    color: #fff;
}
```

Ce fichier CSS doit être enregistré via `wp_enqueue_block_style()`, une fonction dédiée qui permet de charger un style uniquement lorsque le bloc concerné est réellement présent sur la page, évitant ainsi du CSS inutile sur les pages qui ne l'utilisent pas :

```
add_action( 'init', function() {
    wp_enqueue_block_style( 'core/button', array(
        'handle' => 'style-bouton-contour-arrondi',
        'src'    => get_stylesheet_directory_uri() . '/css/styles-blocs.css',
        'path'   => get_stylesheet_directory() . '/css/styles-blocs.css',
    ) );
} );
```

> L'essentiel à retenir : register_block_style ajoute une variante sans nouveau bloc ; Chaque style se traduit par une simple classe CSS ; Peu de styles bien choisis valent mieux qu'une liste longue

## Enregistrer un style avec du JavaScript

Pour un contrôle plus fin, notamment quand le style doit être disponible immédiatement sans dépendre du chargement complet de la page PHP, l'équivalent JavaScript existe côté client, via le module `@wordpress/blocks` :

```
import { registerBlockStyle } from '@wordpress/blocks';

registerBlockStyle( 'core/quote', {
    name: 'accent-gauche',
    label: 'Accent à gauche',
} );
```

Cette approche est particulièrement adaptée quand le style de bloc fait partie d'un thème bloc complet, dont les scripts sont déjà structurés en modules JavaScript.

## Définir un style par défaut

Il est possible de désigner un style personnalisé comme option par défaut pour un bloc, plutôt que de laisser le style natif de WordPress s'appliquer automatiquement à l'insertion :

```
register_block_style(
    'core/button',
    array(
        'name'         => 'contour-arrondi',
        'label'        => 'Contour arrondi',
        'is_default'   => true,
    )
);
```

## Retirer un style natif encombrant

À l'inverse, certains styles natifs n'ont pas leur place dans un projet donné et peuvent créer de la confusion. La fonction `unregister_block_style()` les retire proprement :

```
add_action( 'init', function() {
    unregister_block_style( 'core/separator', 'dots' );
} );
```

## Limiter le nombre de styles proposés

Le piège le plus fréquent avec cette fonctionnalité : multiplier les styles de blocs jusqu'à ce que le panneau devienne illisible, avec une dizaine de vignettes aux différences subtiles. Quelques principes simples évitent cet écueil :

- Ne proposer que des variantes réellement distinctes visuellement, pas des nuances trop fines
- Nommer chaque style de façon explicite pour un rédacteur non technique, sans jargon de développeur
- Retirer les styles natifs qui ne correspondent pas à la charte graphique du projet
- Documenter, même brièvement, l'usage prévu de chaque style pour l'équipe éditoriale

> Un panneau de styles surchargé de dix variantes n'aide personne : trois ou quatre options bien choisies et bien nommées suffisent presque toujours à couvrir les besoins réels d'un projet.

## En résumé

`register_block_style()` reste l'une des fonctionnalités les plus sous-utilisées de l'éditeur de blocs, alors qu'elle permet d'enrichir considérablement les options visuelles offertes aux rédacteurs, sans jamais créer un bloc personnalisé complet pour un simple habillage. Le vrai travail de conception se situe ensuite dans le choix des styles proposés : mieux vaut peu d'options bien pensées qu'une liste interminable de variantes qui finit par perdre tout le monde.