Add class to Gutenberg Editor for Custom Post Types

Question

I have registered a custom post type using register_post_type('myposttype', ...). On published posts, there is a custom class that gets applied to the whole body of the page, single-myposttype. I apply css rules using this body class to make the post appear differently from non-custom post types posts.

Now that the Gutenberg editor is such a key part of Wordpress, I would like to be able to add a custom body class to the editor when working on these custom post types, so that the same style rules that apply to the published post are applied during editing.

I have seen some answered questions (e.g. this one) which use javascript, however if I understand correctly they would apply to the editor for all posts and pages, not just custom post types.

Answer 1

This hook should add a single-[post_type] class to the body of the editor page.

add_filter('admin_body_class', function ($classes) { 
        //get current page
        global $pagenow;

        //check if the current page is post.php and if the post parameteris set
        if ( $pagenow ==='post.php' && isset($_GET['post']) ) {
            //get the post type via the post id from the URL
            $postType = get_post_type( $_GET['post']);
            //append the new class
            $classes .= 'single-' . $postType;
        } 
        //next check if this is a new post
        elseif ( $pagenow ==='post-new.php' )  {
            //check if the post_type parameter is set
            if(isset($_GET['post_type'])) {
                //in this case you can get the post_type directly from the URL
                $classes .= 'single-' . urldecode($_GET['post_type']);
            } else {
                //if post_type is not set, a 'post' is being created
                $classes .= 'single-post';
            }


        }
    return $classes;
}); 

Answer 2

We can use the current screen object to add the single-{post_type} to the admin body class of it's block editor page:

add_filter( 'admin_body_class', function ( $classes ) {
    $screen = get_current_screen();
    return $screen->is_block_editor() && $screen->post_type
        ? $classes . ' single-' . $screen->post_type
        : $classes;
} );

... but ... for editor styles:

add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );

the CSS there will be auto prefixed with the .editor-styles-wrapper class selector. Also all body selectors there are replaced with .editor-styles-wrapper. I guess this is to have the editor styles backward compatible, as it was previously loaded within an iframe without any prefixing as mentioned in the handbook.

It's also possible to use the enqueue_block_assets to load a stylesheet on both the editor admin page and the frontend, but if we don't use specific CSS selectors it can mess up the whole admin editor layout. So I would think this would be best used to target specific blocks, rather than generic layout adjustments.