By Kit Johnson


2019-02-09 07:19:44 8 Comments

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.

2 comments

@birgire 2019-02-10 21:07:25

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.

@mtthias 2019-02-09 18:49:29

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;
}); 

Related Questions

Sponsored Content

1 Answered Questions

Integrating inline tinymce editor in a component for a gutenberg block

0 Answered Questions

How to add classes and events to image in javascript using Gutenberg?

1 Answered Questions

Define multiple Gutenberg editor widths

1 Answered Questions

2 Answered Questions

0 Answered Questions

Add custom capabilities to existing custom post type

3 Answered Questions

[SOLVED] Categorise Custom Post Types

1 Answered Questions

[SOLVED] Category as Class for Custom Post Type

3 Answered Questions

[SOLVED] Specifying Mouseover Icon for Custom Post

1 Answered Questions

[SOLVED] Custom Permalinks for Custom Post Types

Sponsored Content