Le bloc Citation propose par défaut deux présentations au choix dans sa barre latérale, l’une classique avec une bordure latérale, l’autre en grand format centré : ce sont deux styles de bloc pour un seul et même type de bloc. Contrairement à une variation de bloc, qui peut modifier les attributs par défaut et même l’icône proposée à l’insertion, un style de bloc ne change qu’un habillage visuel, appliqué après coup via une simple classe CSS additionnelle.
Fonctionnement dans WordPress
Un style se déclare en PHP avec register_block_style() (nom, libellé, éventuellement un fragment de CSS embarqué directement), ou en JavaScript avec registerBlockStyle(). Une fois choisi dans l’éditeur, il ajoute au bloc une classe du type is-style-nom-du-style, que la feuille de style du thème ou de l’extension doit ensuite cibler pour produire l’effet visuel attendu.
Exemple
register_block_style( 'core/quote', [
'name' => 'encadre',
'label' => 'Encadré',
] );
/* CSS associé, dans la feuille de style du thème */
.wp-block-quote.is-style-encadre { border: 2px dashed #999; }À ne pas confondre avec
- Une variation de bloc, qui peut changer les attributs de départ, l’icône et la description d’un bloc, alors qu’un style de bloc reste une simple classe CSS supplémentaire sur un bloc inchangé par ailleurs.
- Les styles globaux définis dans l’éditeur de site, qui s’appliquent à tous les blocs d’un même type sur l’ensemble du site, sans nécessiter de choix explicite bloc par bloc.
- Un style en ligne ajouté manuellement via l’attribut de classe CSS additionnelle : ce dernier n’active aucune bascule dans l’interface, contrairement à un style de bloc enregistré.