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