Bud-wp-editor-query extension released

bud
,
1

Hi Roots people!

Just quick announcement that I’ve pushed bud-wp-editor-query to NPM.

This is a Bud extension based on an idea @strarsis put forward for splitting out FSE / Gutenberg editor styles from your main bundle, and builds on a prototype I put together earlier in the year.

With the extension installed, you can now use a media query to split your CSS into an ./editor/<module>.css file, which can then be enqueued via add_editor_style().

This is can be useful when applying a theme to the block editor. For example:

@media all, (wp-editor) {
  /* Style is in both main and editor CSS */

  .your-styles-here {
    color: blue;
  }
}

@media (wp-editor) {
  /* Style is ONLY in editor CSS */

  .your-styles-here {
    color: blue;
  }
}

And then enqueue it on the editor with Sage:

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

Feedback / bug reports and other contributions are greatly appreciated.

Many thanks to @strarsis and @kellymears for their input.

3 Likes
2

Hey Tom! I really like this approach. Thanks so much for creating this package and sharing it here. I’ll get editor docs for Sage updated to reference this as well :heart:

2 Likes
3

Thanks Ben! A fake media query feature seemed to be standards compliant and backward compatible.

Hopefully the extension works well for others too.

2 Likes
4

I integrated this into the Sage 10 FSE theme:

2 Likes