Vous venez de mettre à jour vers WordPress 6.9 et vos blocs sont pétés ? Pas de panique, on va voir pourquoi et comment réparer ça …
WordPress 6.9 a introduit un changement majeur : le chargement « on-demand » des styles CSS des blocs. WordPress ne charge à présent que les styles des blocs réellement utilisés sur chaque page. C’est un gain non négligeable pour les performances (-45% de CSS en moyenne), cela dit ça peut casser la compatibilité de certains layout, dans certains cas.
On a eus le soucis sur quelques uns des sites de mon agence actuelle, on a pu identifier le problème et appliquer le correctif qui convient, je vous explique en 10 minutes chrono.
L’ancien système (≤ WP 6.8)
Tous les styles des blocs Gutenberg étaient chargés via un seul fichier : wp-includes/css/dist/block-library/style.min.css (120 ko).
Ce fichier contenait les styles de TOUS les blocs (colonnes, boutons, galeries, etc.), que vous les utilisiez ou non.
Le nouveau système (WP 6.9)
A présent WordPress charge les styles à la demande, c’est à dire qu’il :
- Analyse votre page
- Détecte quels blocs sont utilisés
- Ne charge QUE les CSS nécessaires
Résultat : Amélioration des performances de 26% à 45% selon le type de thème.
Problème : Le système ne détecte pas toujours correctement les blocs sur les thèmes classiques, et certains styles ne sont jamais chargés.
Option 1 : Forcer le chargement d’une liste de blocs spécifiques
Pour résoudre le problème de manière pérenne, il faut identifier et lister les blocs qui ont été impactés sur votre site. Avec cette liste ,ajouter un add_action sur le hook wp_enqueue_scripts dans le fichier functions.php de votre thème, pour renseigner les styles de blocs à charger (à chaque chargement) :
/**
* Fix WordPress 6.9 - Force le chargement d'une liste de styles de blocs spécifique
*
* Le système on-demand de WP 6.9 ne détecte pas toujours correctement
* les blocs utilisés. Cette fonction force l'enqueue des styles essentiels.
*
* @since WordPress 6.9
*/
function labside_force_block_styles() {
// Liste des blocs dont on force le chargement des styles
$blocks_to_load = array(
'columns', // Blocs Colonnes
'buttons', // Blocs Boutons
'group', // Blocs Groupe
'gallery', // Galeries
'media-text', // Médias & Texte
);
// Pour chaque bloc, on force l'enqueue de son style
foreach ( $blocks_to_load as $block ) {
$style_handle = 'wp-block-' . $block;
// Vérifier si le style existe avant de l'enqueue
if ( wp_style_is( $style_handle, 'registered' ) ) {
wp_enqueue_style( $style_handle );
}
}
}
add_action( 'wp_enqueue_scripts', 'labside_force_block_styles', 10 );
Important : Utilisez un thème enfant pour ne pas perdre vos modifications lors des mises à jour.
Option 2 : Désactiver le système on-demand (déconseillée)
Si vous souhaitez restaurer rapidement l’ensemble de la méthode de chargement disponible avant WordPress 6.9 vous pouvez aussi utiliser le filtre should_load_separate_core_block_assets dans le fichier functions.php après le chargement de votre thème.
/**
* Désactive le chargement on-demand de WordPress 6.9
*
* ATTENTION : Ceci annule les optimisations de performance de WP 6.9
*
* Impact : +120 Ko de CSS chargés sur toutes les pages
* même si vous n'utilisez qu'un seul type de bloc.
*
*/
add_action( 'after_setup_theme', function() {
add_filter( 'should_load_separate_core_block_assets', '__return_false' );
}, 1 );
Attention : Cette solution annule les optimisations de performance de WP 6.9. Vous rechargez les 120 Ko de CSS sur toutes les pages. À utiliser en connaissance de cause !
Et voilà !
Le passage au chargement on-demand dans WordPress 6.9 est une excellente évolution pour les performances, mais elle peut nécessiter un ajustement pour certains sites/themes.
Si vous rencontrez ce problème, ceci vous aidera peut être !
A très vite !