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.

@Kit Johnson 2019-02-22 09:51:23

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 2019-02-22 09:58:43

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.

@birgire 2019-02-22 10:23:01

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.

@Kit Johnson 2019-02-23 05:04:25

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.

@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

0 Answered Questions

0 Answered Questions

Why is a CPT's meta for 'Allow Comments' false in Gutenberg?

2 Answered Questions

Set Post Title to Read-only and Disable Permalink Slug Editor in Gutenberg

1 Answered Questions

[SOLVED] Import external data into post using custom Gutenberg block

  • 2019-02-22 10:07:03
  • pipwerks
  • 175 View
  • 1 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Integrating inline tinymce editor in a component for a gutenberg block

1 Answered Questions

Define multiple Gutenberg editor widths

1 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

Sponsored Content