Styles de blocs (Block Styles)

Définition : Les styles de blocs sont des variantes visuelles appliquées à un type de bloc existant. Ils permettent de proposer plusieurs apparences sans multiplier les types ni dupliquer leurs données.

Comprendre et utiliser

À quoi cela sert ?

Une variante de style ajoute généralement une classe spécifique au bloc. Le thème ou le plugin fournit ensuite les règles CSS qui donnent un aspect cohérent à cette classe.

Comment cela fonctionne ?

Les styles peuvent être enregistrés côté PHP avec register_block_style() ou côté JavaScript. Le rédacteur choisit l’apparence dans les options du bloc concerné.

Dans quel contexte l’utiliser ?

À privilégier lorsqu’il faut proposer des présentations d’un même contenu sans modifier ses attributs métier ou la structure de ses enfants.

Cas concret : ATOOLPHA

ATOOLPHA propose un style « Encadré technique » pour les blocs Citation déjà présents dans les articles.

Exemple de code commenté

Extrait documentaire : le contexte WordPress du plugin/éditeur et les dépendances décrites sont nécessaires ; ne pas coller dans le contenu d’une page.

<?php
add_action( 'init', function () {
    register_block_style( 'core/quote', array(
        'name'  => 'atoolpha-technical',
        'label' => __( 'Encadré technique', 'atoolpha' ),
    ) );
} );
// Ajouter ensuite une règle CSS .is-style-atoolpha-technical.

Décryptage de l’exemple

L’appel enregistre l’option visible dans l’éditeur. Une feuille de style doit apporter l’apparence correspondante ; ce fragment ne crée pas automatiquement la règle CSS.

Résultat attendu

Le bloc Citation conserve son type et son contenu, mais peut recevoir la classe is-style-atoolpha-technical lorsque la variante est sélectionnée.

Atelier pratique de vérification

Enregistrer deux styles d’un bloc Citation, puis passer de l’un à l’autre sur une page de test. Vérifier la classe is-style-* dans le HTML et le chargement de la CSS associée. Supprimer temporairement la règle CSS, constater que l’option existe toujours, puis restaurer le style.

Précautions et limites

Ne pas confondre enregistrement d’une variation visuelle et fourniture du CSS. Tester l’affichage dans l’éditeur et sur le site public.

Contrôle avant intégration dans un plugin

Livrer les règles CSS associées à chaque variante et contrôler leur comportement responsive. Tester la version sans feuille de style pour vérifier que l’information reste intelligible et que l’option n’est pas purement décorative.