Add custom CSS rules to Gutenberg block popups in Wordpress

Question

Here are some Gutenberg blocks I wrote in the Wordpress editor.

What I want to do is slightly change the position of the popup of the Gutenberg editor block.

I can't select the previous paragraph block since it appears before the previous block.

I found a correct rule to solve the problem for me in developer mode as shown below

So I 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 added the editor styles in the child theme's function.php.

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

The

<style> tag is indeed added to the page:

However, WordPress also added the prefix .editor-styles-wrapper in front of the css selector of the rule I wrote. That's why I don't think it works with popups.

Unlike many solutions for custom Gutenberg blocks, I couldn't find a way to add CSS rules to the popup itself. How can I achieve this goal?

Thank you in advance.

Answer 1

I think add_editor_style() is not what you think. Here's an example of me loading CSS and JS files 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' );
}

Answer 2

Okay, I finally know.

I previously used the after_setup_them hook to add editor styles.

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 when it comes to the Gutenberg editor, we're better off using another hook. enqueue_block_editor_assets Hooks were introduced in WordPress 5.0.

Now, I write 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, the css rules with .editor-styles-wrapper apply to the body, any without .editor-styles The rules for -wrapper apply to the popup itself and other elements within it.