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',
) );
} );
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.
