Custom style css doesn't work in Gutenberg preview

Question

I added custom CSS file to Wordpress blocks with add_editor_style( '/css/posts.css' );. The problem is this style doesn't work for mobile and tablet preview in Gutenberg Editor. Because Im using Kadence Blocks plugin, I've tried to add additional CSS selector with body.kadence-preview-width-mobile class but it's doesn't work. So what should I do to makes Gutenberg mobile preview works with custom CSS styles?

Answer 1

add_editor_sytle adds callback for custom TinyMCE editor stylesheets. and you want to style blocks in block editor, not TinyMCE editor. use wp_register_style and it is by default enqueue to all media screens. then register this style for any block you want to style using register_block_style. try something like this:

add_action('init', function() {
    wp_register_style('awp-block-styles', get_template_directory_uri() . '/assets/css/custom-block-style.css', false);
    register_block_style('core/heading', [
        'name' => 'colored-bottom-border',
        'label' => __('Colored bottom border', 'txtdomain'),
        'style_handle' => 'awp-block-styles'
    ]);
});

This way is better because the styled will be enqueued only if block is being used. but if you want to style all blocks at once. then use wp_enqueue_style with and hook it to enqueue_block_editor_assets for only the editor, and wp_enqueue_scripts for the frontend.

you can also style blocks or elements in theme.json file.