How to Add CSS to Block Editor Based on Post Type

I have multiple post types on my website, for example you’re reading a normal post, but there are also support articles like this one. The posts are almost similar except one thing – the heading font size.

It is quite easy to change the title font size depending on a post type on a website, you just have to make sure that your theme is using body_class() function and then you can use a CSS selector like .single-{post type} h1, but this way will never work in Gutenberg! So please don’t try to add classes via admin_body_class or anything like this.

Let’s assume that we have style-editor.css file which contains the block editor styles for all post types and we have style-editor-custom-h1.css which contains you know what.

And here is the code:

add_action( 'after_setup_theme', function() {
	
	add_theme_support( 'editor-styles' );
	add_editor_style( 'style-editor.css' );
	
	if(
		false !== stristr( $_SERVER[ 'REQUEST_URI' ], 'post-new.php' ) && isset( $_GET[ 'post_type' ] ) && 'support' === $_GET[ 'post_type' ]
		|| false !== stristr( $_SERVER[ 'REQUEST_URI' ], 'post.php' ) && 'support' === get_post_type( $_GET[ 'post' ] )
	) {
		add_editor_style( 'style-editor-custom-h1.css' );
	}
	
} );

Now let me explain how it works.

• We are using $_SERVER[ 'REQUEST_URI' ] global variable in order to check what page is currently displaying, we can not use get_current_screen() here because it is not defined at this moment.
• I also decided to use after_setup_theme action hook because it is originally used for Gutenberg configuration like add_theme_support() functions etc (yes, I know we are currently moving on to theme.json file). You can probably find other recommendations over the internet to use pre_get_posts hook in order to gain the access to global $post variable, so you can omit using get_post_type() function, but you know what, good practice code for me is more important, just one more SQL request, which is, for the only page in admin area is totally ok, anyway some plugins most people use like ACF doesn’t care about it at all, you will have tens of SQL request which could be avoided.

# Gutenberg

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter