將自訂 CSS 規則新增至 Wordpress 中的古騰堡區塊彈出視窗

Question

以下是我在 Wordpress 編輯器中編寫的一些古騰堡區塊。

我想做的是稍微改變古騰堡編輯器區塊的彈出框的位置。

由於它出現在前一個區塊的前面，因此我無法選擇前一個段落區塊。

我找到了一個正確的規則來在開發者模式下為我解決問題，如下所示

所以我在 editor-style.css 檔案中加入了一條 css 規則：

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

當然，我在子主題的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'); 
}

頁面上確實加入了 <style> 標籤：

但是，Wordpress 也在我寫的規則的 css 選擇器前面加上了前綴 .editor-styles-wrapper 。這就是為什麼我認為它不適用於彈出視窗。

與許多自訂古騰堡區塊的解決方案不同，我找不到將 CSS 規則新增至彈出視窗本身的方法。我怎樣才能實現這個目標？

提前謝謝您。

Answer 1

我認為 add_editor_style() 不是你想像的那樣。 這是我在後端編輯器中載入 CSS 和 JS 檔案的一個範例：

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

好吧，我終於知道了。

我之前使用 after_setup_them 掛鉤來新增編輯器樣式。

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
}

但是當涉及古騰堡編輯器時，我們最好使用另一個鉤子。 enqueue_block_editor_assets 鉤子是在 WordPress 5.0 中引入的。

現在，我是這樣寫的：

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

現在在我的editor-style.css 中，帶有.editor-styles-wrapper 的css 規則適用於正文，任何沒有.editor-styles -wrapper 的規則適用於彈出視窗本身和其中的其他元素。