Wordpress: Is it possible to use post-type as part of a css selector in block editor stylesheet?

Question

I created a Wordpress theme and now I am working on an editor-stylesheet for the block editor to better reflect the look of the theme in the editor. For this, I need to be able to address different post types in there.

For the frontend, there is the body_class() function to be used in templates, which inserts - among others - a class which identifies the post-type and can be used in combined selectors to adress certain elements only in a particular post-type.

Now, the post-type class is in the body tag of the page, also in edit mode, but apparently the editor-stylesheet CSS is applied in a kind of "isolated" way – combined selectors which contain classes that are in the body tag won't work in the editor.

So I am looking for something similar which would work in the block editor, so that I can use it in combined selectors which only apply to certain elements in a particular post-type.

Any ideas how to do that?

---

BTW, I also tried to check the post-type using Javascript/jQuery:

wp.domReady(function() {
        var postType = jQuery('form.metabox-base-form input#post_type').attr('value');
        if(postType == 'post'){
            alert("It's a post!");//in real life some other action...
        }
});

But although it would be logical to at least trigger the alert I put in there, nothing happens when I load the edit page of a post, where that input element including its "post" value is clearly present. (?)

---

Addition: Trying everything I can think of to find a workaround solution, I also tried this script to just see if I can check for body classes at all when I am using the editor:

jQuery(document).ready(function() {
    if(jQuery('body').hasClass('post-type-page')) {
        alert("It's a page!");
    } else {
        alert("It's not a page");
    }
});

The result on editor pages (i.e. the web page displaying the WP block editor): No alert at all! Why that??? Does the block editor Javascript block/prevent all other Javascript?

---

P.S.: I posted the first part of this question on StackExchange WordPress development before, but got no reactions at all, so i am trying it here...

Answer 1

I found a solution myself (but with a hint from @JobiWon9178 - thank you!!!). Not pure CSS, but involving some JS/jQuery. It's a script similar to the one I already posted in the question, with the necessary additions to add classes to relevant HTML elements dynamically:

$(document).ready(function() {
    if($('body').hasClass('post-type-page')) {
        $('#editor').addClass('post-type-page');
    } else if($('body').hasClass('post-type-post')) {
        $('#editor').addClass('post-type-post');
    }
});

This adds the relevant post-type-xxxx class to the #editor DIV, which is one of the outer containers of the block editor. Contrary to the body classes, the classes of this element are relevant for the editor contents and can be used in combined selectors in the editor stylsheet.

(Note: Initially I tried to add the class to the wrapper DIV which has the classes edit-post-visual-editor editor-styles-wrapper, but that wouldn't work - the post-type class simply didn't get added.)

An example: The following CSS rule in the editor stylesheet will now apply to all paragraph blocks in the editor, but only when the post-type is a page:

.post-type-page .wp-block-paragraph {
   /* (CSS settings here) */
}

An important detail, which @JobiWon9178 pointed out in a comment: The jQuery script above has to be added using admin_enqueue_scripts , not together with the scripts for the frontend. So I put that script into a file called admin_scripts.js and enqueued that as follows in functions.php:

function my_admin_scripts($hook) {
    if ( 'post.php' != $hook ) {
        return;
    }
    wp_register_script('adminscripts', get_template_directory_uri() . '/js/admin_scripts.js', '', null, true);
    wp_enqueue_script('adminscripts');
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

So that's my working solution. If someone still comes up with a pure CSS solution, I'd be very happy, but I guess for now (i.e. in Wordpress 5.3) there is no CSS-only method for this.