Comment ajouter un style personnalisé à Gutenberg?
Dans mon éditeur classique, j'ai chargé quelques styles personnalisés, que vous pouvez sélectionner dans une liste déroulante "Format" supplémentaire. Ils sont inclus dans un editor-style.css.
Maintenant, à Gutenberg, cette liste déroulante n'est plus visible et je ne peux pas appliquer mes styles personnalisés au texte.
Comment puis-je ajouter des styles personnalisés à Gutenberg Editor?
Les styles d'éditeur fonctionnent de manière très différente dans l'éditeur de blocs. Cela s'explique par le fait que le contenu de l'éditeur précédent a été chargé dans une iframe. Vous pouvez donc utiliser une feuille de style isolée du reste de l'administrateur et utiliser des fonctions similaires à celles du sélecteur body pour modifier la police dans l'éditeur.
Le contenu dans l'éditeur de blocs, en revanche, est et non dans un iframe, et partage les styles avec le reste de l'administrateur. Ainsi, si vous essayez de charger un style d'éditeur dans l'éditeur de blocs modifiant la couleur de la police du corps, vous modifierez la couleur de la police pour toute l'interface utilisateur.
Heureusement, WordPress a le moyen de mettre en file d'attente une feuille de style et d'appliquer des styles comme s'il s'agissait d'un iframe. Tout ce que vous avez à faire est d’enregistrer le support pour les styles d’éditeur:
add_theme_support( 'editor-styles' );
Ensuite, vous pouvez continuer à mettre en file d'attente une feuille de style d'éditeur comme auparavant:
add_editor_style( 'editor-style.css' );
Mais WordPress va maintenant modifier dynamiquement les règles CSS afin qu'elles s'appliquent uniquement au contenu de l'éditeur. Par exemple, les CSS ciblant l'élément body seront modifiées en target .editor-styles-wrapper.
Voir la section sur les styles d'éditeur du manuel de Gutenberg pour plus d'informations.