How to use compiled css within add_editor_style();

JasonSalmon · March 11, 2023, 2:42pm

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.

strarsis · March 11, 2023, 6:03pm

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:

github.com

strarsis/sage10-fse/blob/ce32b5a37534990ce2b70970258d15d4d962ae5f/app/setup.php#L37-L40


      
          add_action('after_setup_theme', function () {
              $relAppCssPath = asset('app.css')->relativePath(get_theme_file_path());
              add_editor_style($relAppCssPath);
          });

JasonSalmon · March 12, 2023, 5:24pm

strarsis:

add_action('after_setup_theme', function () {
              $relAppCssPath = asset('app.css')->relativePath(get_theme_file_path());
              add_editor_style($relAppCssPath);
          });

That worked perfectly thank you for your help.

ben · March 13, 2023, 4:36pm

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 This is working for me:

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

strarsis · March 13, 2023, 5:46pm

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