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