Bud build development & asset() function

bud
,
1

Hi, I would like to ask if there is yarn build development in bud v5.8? It seems yarn build development is not working in v5.8?

Or is there a way on how to get the css files using asset() function? I tried to use asset() function to enqueue the css in add_editor_style. It seems works when using yarn build but when I used yarn dev, the asset() function cannot find the editor.css because the editor.css was merged to editor.js.

/*
 * Add editor styles
 */
add_action( 'init', function(){
    add_editor_style( asset('editor.js')->uri() );
});
2

Note that for Gutenberg the editor styles needs to be added by relative path, see this example

(related trac issue #55728 (baseURL missing for remotely fetched editor styles) – WordPress Trac)

1 Like
3

Not necessarily, you can also provide a URL (if reachable): WordPress/block-editor.php at 1a21c14d857a0d85d44794d871add3dbdab88d5b · WordPress/WordPress · GitHub

4

@nlemoine: The issue is not that the styles are not loaded, but rather that the URLs aren’t rewritten during CSS post-processing in Gutenberg, resulting in broken references.

1 Like
5

Hi all,

I’ve been thinking about this workflow, and have come up with a possible solution based on an idea @strarsis mentioned at Extract editor styles · Issue #2853 · roots/sage · GitHub

The approach is extracting styles wrapped in @editor {} to a separate CSS asset, then enqueuing via add_editor_style as normal. Gutenberg expects the CSS to be on disk or at URL, and can’t unpack JS runtimes, so a CSS asset makes sense here.

Now, I’ve never written a Webpack plugin, so this is a very dirty clone and hack of SassNinja/media-query-plugin, but perhaps it can be improved with community input.

Not on NPM, so yarn add https://github.com/talss89/wp-editor-query-plugin --dev if you want to try it out.

This currently works for me w/ Sage 10 and Bud 6.7.2, in both dev and production modes. Just wrap CSS rules in @editor or @editor-only. A css/default.editor.css file should be emitted as an asset.

Currently only wrapping selectors is supported, wrapping rules will result in broken CSS, but will add that functionality soon.

If people think this is a decent approach, I’ll put some time into developing the plugin, proper readme, NPM publish, etc.

4 Likes
6

@talss89: Awesome! I will try this out in my next Sage theme project!

7

Thanks! Please let me know how it works for you.

I’ve made some adjustments to the syntax to make it more ‘vanilla’. You can now use a media query with a fake feature, and it plays well with IDE syntax highlighting, linters etc.

@media all, (wp-editor) {}

or, for editor styles only (don’t emit styles in main bundle)

@media (wp-editor) {}

Full ‘adoption’ of entrypoints is now supported too. Have written a readme with more info.

Criticism / feedback is appreciated, ultimately I’d like to package this as a Bud extension.

5 Likes