# Bud-wp-editor-query extension released

**URL:** https://discourse.roots.io/t/bud-wp-editor-query-extension-released/25954
**Category:** bud
**Tags:** gutenberg, sage10
**Created:** 2023-09-13T15:26:32Z
**Posts:** 5

## Post 1 by @talss89 — 2023-09-13T15:26:32Z

Hi Roots people!

Just quick announcement that I’ve pushed [`bud-wp-editor-query`](https://github.com/talss89/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.

---

## Post 2 by @ben — 2023-09-13T15:40:31Z

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:

---

## Post 3 by @talss89 — 2023-09-13T15:43:48Z

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

Hopefully the extension works well for others too.

---

## Post 4 by @strarsis — 2023-09-13T20:53:58Z

I integrated this into the Sage 10 FSE theme:

> **[GitHub - strarsis/sage10-fse: Sage 10 theme adjusted for Gutenberg Full Site...](https://github.com/strarsis/sage10-fse)**
>
> Sage 10 theme adjusted for Gutenberg Full Site Editing (FSE) - GitHub - strarsis/sage10-fse: Sage 10 theme adjusted for Gutenberg Full Site Editing (FSE)

---

## Post 5 by @alexgm — 2025-01-20T03:27:17Z

Source map seems to be fucked up when using the package…