Sage Classic Editor Styles

christianmagill · April 2, 2022, 6:19pm

I’m attempting to use add_editor_style to load my compiled app.scss file in TinyMCE.

I’ve read that we should use \Roots\bundle for this, but looking at its code I can’t figure out the right combination.

The most recent I’ve tried would be

add_editor_style(bundle(‘app’)->css()->first());

But whenever I use the css() method I get the following error:

Warning: Undefined array key “css” in /Sites/lakeshore/wp-content/plugins/acorn/src/Roots/Acorn/Assets/Bundle.php on line 50

Thanks for any help you can provide.

alwaysblank · April 2, 2022, 8:33pm

Looks like your bundle doesn’t have any CSS in it:

github.com

roots/acorn/blob/c714b798bc05d6929894a3119bbae3109d5eaf99/src/Roots/Acorn/Assets/Bundle.php#L50


      
           * Get CSS files in bundle.
           *
           * Optionally pass a function to execute on each CSS file.
           *
           * @param callable $callable
           * @return Collection|$this
           */
          public function css(?callable $callable = null)
          {
              if (! $callable) {
                  return collect($this->bundle['css']);
              }
          
              collect($this->bundle['css'] ?? [])
                  ->each(function ($src, $handle) use ($callable) {
                      $callable("{$this->id}/{$handle}", $this->getUrl($src));
                  });
          
              return $this;
          }

Have you run a build?
Have you checked your manifest.json to see what’s being built?
What’s your bud configuration look like?

christianmagill · April 2, 2022, 9:15pm

Hm… Strange…

Checking the manifest.json I’m not seeing my CSS file referenced. It is getting loaded fine on the frontend. I have run the build process.

I’m using the @roots/bud-sass package. Here’s my config.

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      admin: ['@scripts/admin', '@styles/admin'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    .hooks.on("build.module.noParse", undefined)

    .provide({
      jquery: ["jQuery", "$"],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://lakeshore.test')

    /**
     * Development URL
     */
    .serve('http://lakeshore.test:3000');
};

Thanks