# wp_enqueue_block_style : charger le CSS d’un thème bloc par bloc > Découper style.css en petites feuilles chargées uniquement quand le bloc correspondant est présent sur la page, avec wp_enqueue_block_style. - Auteur : Clément Hadrot - Publié le : 2023-04-13 - Mis à jour le : 2023-04-13 - Catégorie : Thèmes - URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/wp-enqueue-block-style-css-par-bloc/ ## L’essentiel - Une feuille CSS par bloc au lieu d'un style.css monolithique - wp_enqueue_block_style ne charge le fichier que si le bloc est utilisé - should_load_separate_core_block_assets sépare aussi le CSS du cœur Sur un thème bloc classique, tout le CSS du thème atterrit dans un unique `style.css` chargé sur chaque page, qu'elle contienne ou non les blocs concernés. Sur un site vitrine avec une trentaine de blocs personnalisés, ce fichier finit par peser plusieurs dizaines de kilo-octets, alors qu'une page de contenu simple n'utilise en réalité qu'une poignée de ces blocs. La fonction `wp_enqueue_block_style()`, disponible depuis WordPress 5.9, permet de découper ce fichier en autant de petites feuilles que de blocs, chacune chargée uniquement quand son bloc est réellement présent sur la page rendue. Sur un projet éditorial récent, ce découpage a réduit le poids du CSS chargé sur la page d'accueil de près de 40 %, simplement parce qu'elle n'utilise pas tous les blocs disponibles dans le thème. ## Le principe de wp_enqueue_block_style Contrairement à un `wp_enqueue_style()` classique, cette fonction ne charge pas la feuille immédiatement : elle enregistre une dépendance associée à un nom de bloc, et WordPress ne l'injecte que si ce bloc est effectivement rendu sur la page en cours. ``` add_action( 'init', function() { wp_enqueue_block_style( 'mon-theme/carte-evenement', array( 'handle' => 'mon-theme-carte-evenement', 'src' => get_theme_file_uri( 'assets/css/blocks/carte-evenement.css' ), 'path' => get_theme_file_path( 'assets/css/blocks/carte-evenement.css' ), ) ); } ); ``` Le paramètre `path` est important : il permet à WordPress d'inliner le CSS directement dans le `` si le fichier est suffisamment petit, ce qui évite une requête HTTP supplémentaire pour de minuscules feuilles de style. ## Découper style.css en feuilles par bloc La mise en pratique demande de réorganiser l'arborescence des assets du thème. Sur nos projets récents, nous adoptons une structure de ce type : ``` assets/ css/ base.css blocks/ carte-evenement.css hero-accueil.css grille-temoignages.css ``` `base.css` continue de contenir les règles globales — reset, typographie de base, utilitaires — chargées sur toutes les pages via un `wp_enqueue_style()` classique dans `wp_enqueue_scripts`. Chaque fichier de `blocks/` ne contient que les règles spécifiques à un bloc précis, enregistrées via `wp_enqueue_block_style()`. > L'essentiel à retenir : Une feuille CSS par bloc au lieu d'un style.css monolithique ; wp_enqueue_block_style ne charge le fichier que si le bloc est utilisé ; should_load_separate_core_block_assets sépare aussi le CSS du cœur ## should_load_separate_core_block_assets pour les blocs du cœur Le même principe existe côté cœur de WordPress : depuis la version 5.8, le filtre `should_load_separate_core_block_assets` permet de demander au CMS de charger le CSS des blocs natifs (paragraphe, colonnes, groupe…) séparément plutôt que dans un unique fichier fusionné. ``` add_filter( 'should_load_separate_core_block_assets', '__return_true' ); ``` Activer ce filtre a un effet direct sur le nombre de requêtes CSS générées pour les blocs natifs : chaque bloc du cœur utilisé sur la page charge sa propre petite feuille, plutôt qu'un fichier global qui inclut le style de tous les blocs possibles, y compris ceux absents de la page. L'effet est comparable à celui de `wp_enqueue_block_style()` pour les blocs personnalisés, mais s'applique cette fois aux blocs fournis nativement par WordPress. ## Mesurer le gain sur un projet réel Sur le projet éditorial cité en introduction, nous avons comparé le poids du CSS chargé sur trois gabarits avant et après ce découpage : - Page d'accueil (8 blocs personnalisés sur 22 disponibles) : CSS réduit de 41 %. - Article de blog (12 blocs sur 22) : CSS réduit de 28 %. - Page de contact (3 blocs sur 22) : CSS réduit de 63 %. Le gain est logiquement plus important sur les gabarits les plus simples, qui n'utilisent qu'une fraction des blocs du thème. Sur des pages riches en blocs, l'écart se réduit, mais reste favorable puisqu'aucun CSS inutile n'est jamais chargé. > Ne découpez pas systématiquement chaque règle CSS dans son propre fichier : en dessous d'une certaine granularité, la multiplication des petites requêtes annule le gain. Regroupez plutôt par famille de blocs proches, par exemple tous les blocs liés à une grille de contenu dans une seule feuille. ## Limites de l'approche Ce découpage concerne le CSS déclaré dans le thème lui-même. Il ne traite pas le CSS chargé par les extensions tierces qui ajoutent leurs propres blocs : ce sujet, souvent plus complexe car il dépend des choix de chaque éditeur d'extension, mérite un traitement à part entière et n'est pas couvert ici. ## En résumé `wp_enqueue_block_style()` transforme une feuille CSS monolithique en un ensemble de petites feuilles chargées à la demande, sans rien changer au rendu visuel du site. Combinée au filtre `should_load_separate_core_block_assets` pour les blocs natifs, cette approche réduit sensiblement le poids CSS des pages les plus simples, pour un coût de mise en œuvre limité à une réorganisation des assets et à quelques appels supplémentaires dans `functions.php`.