Styling the editor itself -- outside the content

sage
1

I am using WordPress’ editor-styles feature to wrap my CSS for use in the editor. It took a pile of messing around to get it to work, but now it’s stable and working great.

However, I now want to bust out of that and add a class that applies to the editor itself. If I add it to editor.css it gets wrapped in editor-styles-wrapper and thus only applies to the content.

Is there any other stylesheet, or any other way to add a stylesheet, that is used to style the editor itself?

2

I found a solution, but is this the right way to do it? I suspect there’s some optimisation to be had in the functions.php code.

Three steps:

  • Add a stylesheet in the styles directory called editor_chrome.css (or whatever you want to call it)

  • In bud.config.js add an entry for the editor chrome. This will ensure the stylesheet editor_chrome.css gets compiled by tailwind and is added to the public directory:

app.entry('editor_chrome', ['@styles/editor_chrome']);
  • Enque the stylesheet in functions.php:
add_action( 'admin_enqueue_scripts', function(){
    $relAppCssPath = asset('editor_chrome.css')->relativePath(get_theme_file_path());
    wp_enqueue_style( 'editor_chrome', get_template_directory_uri() . '/' . $relAppCssPath);
});

For anyone wondering, I am using this to highlight the custom blocks we are building in the blocks menu. The icon is limited to 24px. This allow me to add an outline and matching background via CSS.

image

3

You may be interested in this Sage 10 FSE theme, it also demonstrates how to enqueue editor styles (that are not isolated but select in the editor UI):

1 Like