WordPress 6.0 (add_editor_style) ne charge pas style.css dans l'éditeur Gutenberg

Question

Je suis le cours Udemy WordPress pour créer un thème de bloc WordPress personnalisé. J'ai enregistré avec succès le type de bloc dans function.php et je peux sélectionner mon bloc dans l'éditeur Gutenberg.

Le tutoriel suggérait d'utiliser la méthode suivante pour charger les styles de mon élément de bloc Gutenberg afin que le CSS soit également chargé sur le frontend.

function lr_theme_features() {

   // Enqueue editor styles
   // Borrowed from TwentyTwentyToTheme
   add_editor_style( 'style.css' );
   add_theme_support('editor-styles');

}

add_action('after_setup_theme', 'lr_theme_features');

Quoi qu'il en soit, peu importe ce que je fais, Gutenberg ne chargera pas le fichier style.css de mon bloc.

Image du backend Gutenberg

Des conseils ? Qu'est-ce qui pourrait me manquer ou comment puis-je déboguer le problème ?

Merci beaucoup !

Answer 1

J'ai également des problèmes avec mon CSS d'administration. J'ai trouvé que si vous importez du CSS dans admin style.css comme ceci, cela interrompt le chargement du style :

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

Bizarrement, cela fonctionne sans guillemets, comme ceci :

@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);

Mais je ne sais pas si c'est une bonne pratique... La meilleure pratique consiste à charger des bibliothèques externes comme celle-ci au lieu d'utiliser des instructions d'importation :

add_editor_style( 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

J'espère que cela aidera quelqu'un d'autre !

Answer 2

Dans thème basé sur des blocs, wp-block-styles est utilisé pour charger des feuilles de style dans l'éditeur et le front-end. Le thème TwentyTwentyTwo utilise la même technologie ; étant donné que les thèmes basés sur des blocs sont relativement nouveaux, vous avez peut-être suivi un didacticiel de thème (maintenant) obsolète.

function lr_theme_features() {

   // Add support for block styles.
   add_theme_support( 'wp-block-styles' );

   // Enqueue editor styles.
   add_editor_style( 'style.css' );

}

add_action('after_setup_theme', 'lr_theme_features');

Si vous ne voyez toujours pas les styles se charger, vérifiez que le nom de classe du bloc que vous ciblez correspond à la balise HTML.

PS. Toujours videz le cache/actualisation matérielle de votre navigateur pour vous assurer que vous ne voyez pas de version en cache de votre éditeur - il s'agit d'une cause très courante mais négligée de nombreux problèmes.