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' );
		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.

Misha Rudrastyh

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