Styling the editor itself -- outside the content

sage
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