Ajoutez des règles CSS personnalisées aux fenêtres contextuelles du bloc Gutenberg dans Wordpress

Question

Voici quelques blocs Gutenberg que j'ai écrits dans l'éditeur Wordpress.

Ce que je veux faire, c'est changer légèrement la position de la popup du bloc de l'éditeur Gutenberg.

Je ne peux pas sélectionner le bloc de paragraphe précédent car il apparaît avant le bloc précédent.

J'ai trouvé une règle correcte pour résoudre le problème pour moi en mode développeur, comme indiqué ci-dessous

J'ai donc ajouté une règle CSS dans le fichier editor-style.css :

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

Bien sûr, j'ai ajouté les styles de l'éditeur dans le fichier function.php du thème enfant.

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

Le tag <style> a bien été ajouté à la page :

Cependant, WordPress a également préfixé les sélecteurs CSS des règles avec lesquelles j'ai écrit .editor-styles-wrapper . C'est pourquoi je ne pense pas que cela fonctionne avec les popups.

Contrairement à de nombreuses solutions pour les blocs Gutenberg personnalisés, je n'ai pas trouvé de moyen d'ajouter des règles CSS à la fenêtre contextuelle elle-même. Comment puis-je atteindre cet objectif ?

Merci d'avance.

Answer 1

Je pense que add_editor_style() n'est pas ce que vous pensez. Voici un exemple de chargement de fichiers CSS et JS dans l'éditeur backend :

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

D'accord, je sais enfin.

J'ai déjà utilisé le crochet after_setup_them pour ajouter des styles d'éditeur.

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
}

Mais quand il s’agit de l’éditeur Gutenberg, nous ferions mieux d’utiliser un autre crochet. enqueue_block_editor_assets Les hooks ont été introduits dans WordPress 5.0.

Maintenant, voici ce que j'écris :

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

Maintenant, les règles de mon editor-style.css 中，带有 .editor-styles-wrapper 的 css 规则适用于正文，任何没有 .editor-styles-wrapper s'appliquent à la popup elle-même et aux autres éléments qu'elle contient. < /p>