Question 29851 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    I think add_editor_style() is not what you think it is.
    Here an example of mine that I use to load a CSS & JS file in the backend editor:

    add_action( 'admin_enqueue_scripts', [ $this, 'my_admin_enqueue_scripts' ], 100 );


/**
 * Load the CSS & Javascript files for the admin
 */
function my_admin_enqueue_scripts() {
        $theme             = wp_get_theme();

        $file_with_path_js = get_template_directory() . '/includes/my_file.js';
        wp_enqueue_script( 'my-editor-scripts', $file_with_path_js, '', $theme->Version, true );

        $file_with_path_css = get_template_directory() . '/includes/my_file.css';
        wp_enqueue_style( 'my-editor-styles', $file_with_path_css, '', $theme->Version, 'all' );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search