Difficult time with add_editor_style

  • Resolved cramdesign

    (@cramdesign)


    4 years, 10 months ago

    I have not been successful getting add_editor_style to work with Gutenberg.

    The code I am using:

    function supersimple_editor_styles() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'css/type.css' );
}
add_action( 'after_setup_theme', 'supersimple_editor_styles' );

    The stylesheet does not load and no styles applied.

    I have also tried the action hook enqueue_block_editor_assets and that has not worked. I have also tried just putting it into functions.php with no hook. I have also tried the default name editor-style.css and simply use add_editor_style() but no luck there either.

    I have been able to use wp_enqueue_style on the enqueue_block_editor_assets hook but then the stylesheet is not filtered and styles everything outside the edit area though not the h1 etc in the edit area.

    Please a poor fellow. Thanks in advance.

    • This topic was modified 4 years, 10 months ago by cramdesign.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @cramdesign, I feel your pain!, Try putting the type.css in the root folder of the theme to discard path issues first.

    Thread Starter cramdesign

    (@cramdesign)

    Matias, dear friend, a solution!

    I had tried that but in the spirit of an honest response, I tried putting the css in the root folder but this time I tried a different css file. It worked! So I tried the file I actually wanted, didn’t work. The difference? The file I wanted to use loaded a google font with an @import rule at the top. Removing this line completely fixed the problem.

    Solution:

    1. remove the @import rule from the css file
    2. Load the font in the admin like so:

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

    and in the frontend via a similar method with my other stylesheets:

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

    I am assuming that when the stylesheet was loaded and parsed to be used in Gutenberg, the @import rule was throwing an error that I didn’t know how to see or silently. I would love to know other people’s experience but I have an easy and elegant solution.

    Thanks again to Matias.

    • This reply was modified 4 years, 10 months ago by cramdesign.
    Moderator bcworkz

    (@bcworkz)

    @import use in the WP environment has been discouraged for a long time. I’m unaware when it started to actually cause issues, probably when the block editor was introduced. Directly enqueuing all style files is good practice whether @import works or not.

    When you post code in these forums, even brief CSS statements, please demarcate with backticks or use the code button. When you use @import without doing so you actually cause an email notification be sent to forum member “import”. @ referencing other members who are not participating in the topic is strongly discouraged and is considered to be a sort of spamming. I know that was not your intent and the effect was unintentional. You couldn’t have known this, but now you do ??

    Good job @cramdesign ! Keep up the good work.

    Thread Starter cramdesign

    (@cramdesign)

    Yikes. No, I certainly didn’t mean to mention the user named import. I feel sorry for that person. I will be more careful in the future.

    Thanks again.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Difficult time with add_editor_style’ is closed to new replies.