How to get setup with editor styling for the classic editor with Sage 10 + Bud?

[intelligence]

Anyone managed to get Sage 10 with Bud + editor styling for TinyMCE to work? Would appreciate tips on how to get it going.

bud.config.js:

  .entry({
    app: ['@scripts/app', '@styles/app'],
    editor: ['@scripts/editor', '@styles/editor'],
    tinymce: ['@styles/tinymce'],
  })

setup.php:

  $asset = \Roots\asset('tinymce.css');
  add_editor_style($asset->uri());
});

Gives me
Refused to apply style from 'http://domain.test/app/themes/theme/public/tinymce.css?wp-mce-49110-20201110' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Same thing happens if I try:
$asset = \Roots\asset('css/tinymce.css'); which is the folder where the artifact gets built on yarn build

[strarsis]

Edit: The warning indicates that the URI to the stylesheet is not found, rather a soft-404 HTML page is retrieved.

How is that site hosted? Development, with a VM or container? Production?
When you request the stylesheet URL from within the system where PHP-FPM runs, do you get a stylesheet or rather a soft 404 error page (HTML)?
curl http://domain.test/app/themes/theme/public/tinymce.css?wp-mce-49110-20201110

Have you updated the theme-path in the bud configuration so that it matches the actual path the theme is in (including the theme folder name)?

As a workaround (rather a dirty fix, as core and plugins often rely on a functioning loopback connection and the theme URI should be correct for the assets) you can add the editor styles by relative path than by URI, which does not need a loopback connection:

How to use compiled css within add_editor_style();

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:

[intelligence]

Hey, thanks for the quick reply!

It’s a project scaffolded yesterday, using Trellis with Lima. And yes, I’m getting a 404 on that URL form within the VM (Should there be a file generated without random hash at the end? Because there is no file like that).

Theme path should be alright:
.setPublicPath('/app/themes/myactualthemenamehere/public/')

I’ll look into your suggestion for a work around

[strarsis]

Can you request a page / start page of the site? What is its URL then (after letting WordPress redirect)? Just http://domain.test?

The random hash at the end (tinymce.css?wp-mce-49110-20201110) is used for cache-busting as it is not a part of the file name, but rather a GET-parameter, which normally should not matter for static files.

[intelligence]

Yes, correct.

Should add that everything else works as expected, app.css, fonts and images stored in resources works fine both on localhost:3000 and domain.test.

[strarsis]

Can you invoke commands from within the Lima VM/system? Because from within that system the domain domain.test must be resolvable and the server must listen for and answer requests from the VM IP (e.g. 127.0.0.1).

[intelligence]

What do you mean by commands? I can curl domain.test and I get the content of the front page just fine.

[strarsis]

PHP-FPM (which does run WordPress) itself does the HTTP request, inside the Lima VM.
The request results in a HTML response, not in the frontend styles file.
For diagnosing the issue you have to do the request from inside the Lima VM to see how the web server responses.

[intelligence]

Ah If I do trellis vm shell and run curl domain.test it does return the actual front page, and not a 404 page.

Both curl http://domain.test/app/themes/theme/public/css/app.d8aefd.css and
curl http://domain.test/app/themes/theme/public/css/tinymce.1fc2a8.css shows the content of the files.

But should I use $asset = \Roots\asset('tinymce.css') or $asset = \Roots\asset('css/tinymce.css')? Sans the prefixed path it looks at http://domain.test/app/themes/theme/public/tinymce.css?wp-mce-49110-20201110, which obviously is empty.

[strarsis]

Are you using this?:

How to use compiled css within add_editor_style();

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')); });

What URL do you get with echo asset('app.css')->__toString()?

[intelligence]

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

Gets me the same mime error.

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

Appears to do nothing, no error in the console, no styling applied. Not tinymce.css in network tab.

add_action('after_setup_theme', function () {
  add_theme_support('editor-styles');
  $asset = \Roots\asset('tinymce.css');
  add_editor_style($asset->uri());
});

Mime error.

Dumping what you suggested gets me:
http://localhost:3000/app/themes/theme/public/app.css

Dumping tinymce.css gets me:
http://localhost:3000/app/themes/theme/public/tinymce.css

Super thankful for your time and your suggestions by the way!

[strarsis]

@intelligence

http://localhost:3000/app/themes/theme/public/app.css

Does that URL work inside the Lima VM?

[intelligence]

Connection refused for anything on that host from the vm shell

But the dump was made from a blade template btw, so I guess that’s why it’s localhost and not domain.test?

[strarsis]

The URL passed to add_editor_style has localhost as domain, which is not reachable from within the Lima VM. Check the bud configuration:

roots/sage/blob/cc94b1bc47b7ed0881edfe3604ceef8501ab23b8/bud.config.js#L36

[intelligence]

Updated packages to latest version (had outdated bud and sage) and changed to the bud.config.js you lined. Issue still persist

I’m curious if maybe Lima could be the issue somehow.

[strarsis]

Is the URL passed to add_editor_style still with localhost domain?

[intelligence]

It is.

Got it to work now finally, when running yarn dev it does not work. Running yarn build and then accessing /wp-admin/ – then it works!

[strarsis]

@intelligence

then it works

So yarn dev does not update the domain that is used for the asset URLs, but yarn build does?
After invoking yarn build, yarn dev works without issue?

[intelligence]

As soon as yarn dev is run, it breaks, I need to run yarn buildon every change in tinymce.css and it will work in the editor.

[strarsis]

Hm, upon further thought it makes sense as dev uses the proxy domain (and some free port, as this is by default localhost) instead of the original server one. Does the workaround with adding the frontend stylesheet asset by its path (instead of URL) work?

A fix of the underlying issue would probably consist of being able to retrieve the asset URL without the proxy domain and port from the manifest.