0

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?

1 Answer 1

0

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.

3
  • Thanks! But in this example, you are created secondary style in block settings, but I don't want to create it - I just want to style the default look.
    – D_P
    Nov 13, 2021 at 2:46
  • Below the example, is how to change default. Or overwrite it.
    – shadi
    Nov 13, 2021 at 6:19
  • Found it, thanks for help!
    – D_P
    Nov 13, 2021 at 12:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.