How to use compiled css within add_editor_style();

sage
1

Hello,

I’m using the classic editor, and I’d like to use the compiled editor.css to reflect the styling on the front end. The issue I have is passing the compiled asset into add_editor_style()

I’ve added the following to setup.php, but it doesn’t work.

add_action( 'admin_init', function () {
  add_editor_style( \Roots\asset('editor') );
});

The only way I can get it to work is to add the full path, but that obviously stops working each time I rebuild the assets.

add_action( 'admin_init', function () {
  add_editor_style( '/public/css/editor.b6b1b1.css' );
});

I’m sure there is an easy solution, but I can’t work it out.

I appreciate your help.

2

Adding editor styles should be the same for Classic Editor as for the Gutenberg editor.

For Gutenberg editor this approach is used, with a relative path, as this works correctly with style post-processing:

1 Like
3

That worked perfectly thank you for your help.

4

I went to test this out to add it to the docs, and for some reason I’m not seeing the requirement to make the path to the asset relative :thinking: This is working for me:

add_action('after_setup_theme', function () {
    add_theme_support('editor-styles');
    add_editor_style(asset('app.css'));
});
5

For Classic Editor this is correct, but for Gutenberg Editor the relative URLs in the added styles are not correctly rewritten. This may be less of an issue with the upcoming iframe-based style isolation in Gutenberg, but with the current approach it causes issues with images, fonts and other resources in the styles not correctly loading in the editor preview.
https://core.trac.wordpress.org/ticket/55728#ticket

1 Like