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

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


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.


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