Editor styles for different pages / templates

Yes, you can target individual templates or pages in the block editor by using the body classes added by WordPress to the block editor’s HTML. For example, you can use the class “.wp-block-template-my-template-name” to target a specific template, or “.post-type-archive-my-custom-post-type” to target an archive page for a custom post type.

You can also create multiple editor-style.css files and load them conditionally based on the page or template being edited. You can use the “enqueue_block_editor_assets” hook to enqueue the appropriate editor-style.css file based on the page or template being edited.

Thanks for the reply!
Can you elaborate on “Yes, you can target individual templates or pages in the block editor by using the body classes added by WordPress to the block editor’s HTML.?“
This is exactly where I struggle. When opening the editor for a page that has the template “two-column” the body tags look exactly the same as when I open a page which uses the default template.

How do I target the css in the editor for the two-column template?


I was able to enqueue multiple editor-style.css by adding this code to my function.php

function custom_editor_styles() {
  add_editor_style( 'editor-style.css' );
  add_editor_style( 'editor-style-two-column.css' );
}
add_action( 'init', 'custom_editor_styles' );

I managed to find a solution. This post is for everyone who finds this in future.

1. Create a template. In this example we call it “two-column”.

2. Add this code to the function.php

/*
 * Add template class to admin body based on current page's template.
 */
function mytheme_add_template_class($classes)
{
    $template = get_page_template_slug();
    if ($template) {
        $class = preg_replace('/\.php$/', '', $template);
        $classes .= ' template-' . sanitize_html_class($class);
    }
    return $classes;
}
add_filter('admin_body_class', 'mytheme_add_template_class');


/*
   * Enqueue editor styles for each template.
   */
function mytheme_enqueue_editor_styles()
{
    $post_id = get_the_ID();
    $page_template = get_post_meta($post_id, '_wp_page_template', true);
    if ($page_template) {
        $template_slug = sanitize_html_class(preg_replace('/\.php$/', '', $page_template));
        wp_enqueue_style('mytheme-editor-styles-' . $template_slug, get_theme_file_uri('/editor-style-' . $template_slug . '.css'), array(), '1.0', 'all');
    }
}
add_action('enqueue_block_editor_assets', 'mytheme_enqueue_editor_styles');

3. Optional, but I like to keep things separated: Create a editor-style-two-column.css. The code automatically recognises the name of the template. So if your template name was “green”, you’d create editor-style-green.css

4. Add this CSS to your editor-style-two-column.css (or to your default editor-style.css if you chose to skip step 3) and manipulate the styling as wished.

.template-two-column .editor-styles-wrapper {
  border: 1px solid red; 
}

The php was created with the help of ChatGPT, so no guarantee this is a clean and secure code. But for me, it worked.