Search code examples
csswordpresswordpress-gutenberg

How to add editor css rules to Wordpress Gutenberg block popover itself?

Here are some Gutenberg blocks I am writing in Wordpress ediotr.

enter image description here

What i am trying to do is that chaning the position of the popover of Gutenberg Editor block slightly.

enter image description here

Since it appears in front of very previous block, I cannot select the previous paragragh block because of it.

I found out a proper rule to solve the problem for me in the developer mode like below

enter image description here

So I have added a css rule in the editor-style.css file:

 .components-popover__content {
    position: relative !important;
    top: -4rem !important;
    left: 4.3rem !important;
 }

Of-course, I have added the editor style in function.php of my child theme.

add_action( 'after_setup_theme', 'kyle_gutenberg_editor_css' );
function kyle_gutenberg_editor_css(){
    add_theme_support( 'editor-styles' ); 
    add_editor_style( 'editor-style.css'); 
}

It has certainly added on the page with <style> tag:

enter image description here

However, Wordpress also adds a prefix .editor-styles-wrapper in frond of css selectors of the rules that I write. That's why I think it does not apply to the popover.

enter image description here

Unlike many solutions for custom Gutenberg blocks, I cannot find out the way to add css rules to the popover itself. How can I achive this?

Thank you in advance.

Solution

  • Okay, I finally found out.

    I previously used after_setup_them hook to add an editor style.

    add_action( 'after_setup_theme', 'kyle_gutenberg_editor_css' );
function kyle_gutenberg_editor_css(){
  add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
  add_editor_style( 'editor-style.css'); // tries to include style-editor.css directly from your theme folder
}

    But we'd better use another hook when it comes to Gutenberg Editor. enqueue_block_editor_assets hook was introduced in Wordpress 5.0.

    Now, I wrote like this:

    add_action( 'enqueue_block_editor_assets', 'kyle_gutenberg_editor_css', 9999 );
function kyle_gutenberg_editor_css() {
   $css_file_modified_time = filemtime(get_stylesheet_directory() . '/editor-style.css');
   wp_enqueue_style( 'kyle-editor-styles', get_theme_file_uri( '/editor-style.css' ).'?time='.$css_file_modified_time, false, '' , 'all' );
}

    now in my editor-style.css, a css rule with .editor-styles-wrapper applies to the body and any rule without .editor-styles-wrapper applies to the popover itself and other elements in it.