4

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.

  • Maybe this handbook helps you out? – Charles Feb 9 at 10:56
  • Do you mean how to add a custom class to the body tag <body class=""..." > of the edit page? If so, I wonder if you could use the body.post-php.post-type-myposttype.block-editor-page selector? – birgire Feb 9 at 12:07
  • No I think they mean adding that same class to the gutenberg editor itself so that the rules apply on the back end. – tmdesigned Feb 9 at 12:33
3

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

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.

  • Thank you for the detailed write-up. The sting in the tail is that .editor-styles-wrapper is added much deeper in the hierarchy than body. So even though I can now add the custom post type class name to the body, because I'm still unable to target, for example, the post title for only pages that match this body class, because it will become .editor-styles-wrapper .single-class_notes .editor-post-title__block .editor-post-title__input, which doesn't get applied. I can't think of a way to solve this. – Kit Johnson Feb 22 at 9:51
  • Just to clarify, this is what is currently the resulting css because of the .editor-styles-wrapper that is pre-pended to the selector, like this for post title: .editor-styles-wrapper .single-class_notes .editor-post-title__block .editor-post-title__input. The custom body class is nested inside of .editor-styles-wrapper, which means the selector doesn't match. – Kit Johnson Feb 22 at 9:58
  • Yes exactly, the CSS of the editor styles is auto prefixed. A possible hack could be to add the .editor-styles-wrapper as your custom class of the frontend body class, but I don't like it. If you want to target a given block, you could use the enqueue_block_assets hook to enqueue the same stylesheet on both frontend and the editor. I guess another option would be to try to modularize your stylesheet in SASS so it can be reused on both sides, so you could auto generate two stylesheets in the production build process. – birgire Feb 22 at 10:23
  • I'm not quite sure how to go forward, so here is my actual goal: to increase font size and change font family when editing the 'myposttype' custom post types. This is for all block types: headings, lists, paragraphs etc. (The reason for this requirement is that I use these custom post types as a 'whiteboard' when teaching a room of students, and it's displayed on a not-big-enough screen.) If I use .editor-styles-wrapper as the custom class, it will apply to all post types (including pages) which I don't want. I am already using SASS to reuse css on both sides. – Kit Johnson Feb 23 at 5:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.