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...

Alamo

When I run your javascript code block in the console window of Chrome I get the right alert that "It's a page!" Can you edit your post to show us how you're queuing the scripts and styles you want to appear on the admin page edit screens? – Atlas

@Atlas Did you get that alert when you were loading a page in the (block) editor? Because that's what I am talking about. The alert does appear when I open/view the page, but it doesn't when I open the page in the editor - any browser, and that's where I need it (in edit mode). BTW, I put that script at the very bottom of my functions.php file, and the CSS I am talking about is in the stylesheet I defined as editor stylesheet for the block editor (which otherwise works fine) – Alamo

I am talking about the block editor, yes. You might need to add the script via the admin_enqueue_scripts hook, because scripts loaded for a site's front end are not generally loaded on the back-end admin side. – Atlas

For what it's worth, perhaps this guide might help? – Atlas

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.

Alamo

"Contrary to the body classes, the classes of this element are relevant" Do you know why the body isn't relevant to css? I understand that it's not, but is this behavior intentional or do you know the cause? – Casi

Answer 2

I was able to do this with purely CSS. Are you sure your CSS is getting added correctly?

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
      echo '<style>
              .post-type-page .wp-block-paragraph {
                   font-size: 5rem;
               }
      </style>';
 }

If I go into the editor this paragraph text is only modified under a page.

This is running WP 5.3.2.

add_editor_style is technically used for custom TinyMCE.

Using enqueue_block_editor_assets was added in WP 5.0 to add styles and functionality to blocks.

https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/

Edit: CSS only version

function custom_block_editor_styles() {
    wp_enqueue_style( 'legit-editor-styles', get_theme_file_uri( '/css/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'custom_block_editor_styles' );

Mollescent

That's interesting: When you insert a style tag using admin_head as you did, it does work indeed. However, the same CSS rule doesn't work if I put it into my editor stylesheet, which definitley is getting added, since all the other CSS rules in there work. Strange behaviour... But with "pure CSS" I really meant using the editor stylesheet, not using a PHP function to add a style tag dynamically. Nevertheless: Thanks a lot for your answer! – Alamo

hmm, how are you adding the style stylesheet? – Mollescent

With these two lines in functions.php: add_theme_support( 'editor-styles' ); add_editor_style( 'gb_editor_styles.css' ); – Alamo

I would actually change to using this. add_action( 'enqueue_block_editor_assets', 'legit_block_editor_styles' ); and add your own stylesheet. add_editor_style was added in WP 3.4 for TinyMCE editor stylesheets. developer.wordpress.org/reference/functions/add_editor_style – Mollescent

Hmm - Right here, add_editor_style is listed as the "official" way: developer.wordpress.org/block-editor/developers/themes/… But I'll try what you recommended - thanks! – Alamo

Ya, I thought that was interesting as well. I went digging in the twentytwenty theme where they actually use: add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 ); – Mollescent