国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Fügen Sie benutzerdefinierte CSS-Regeln zu Gutenberg-Block-Popups in Wordpress hinzu
P粉486743671
P粉486743671 2024-03-29 14:09:49
0
2
517

Hier sind einige Gutenberg-Bl?cke, die ich im Wordpress-Editor geschrieben habe.

Ich m?chte die Position des Popups des Gutenberg-Editorblocks leicht ?ndern.

Ich kann den vorherigen Absatzblock nicht ausw?hlen, da er vor dem vorherigen Block erscheint.

Ich habe im Entwicklermodus eine richtige Regel gefunden, um das Problem für mich zu l?sen, wie unten gezeigt

Also habe ich eine CSS-Regel in die Datei editor-style.css eingefügt:

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

Natürlich habe ich die Editor-Stile in der function.php des Child-Themes hinzugefügt.

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

Der <style>-Tag wurde tats?chlich zur Seite hinzugefügt:

Allerdings hat WordPress den CSS-Selektoren der von mir geschriebenen Regeln auch das Pr?fix .editor-styles-wrapper vorangestellt. Deshalb glaube ich nicht, dass es mit Popups funktioniert.

Im Gegensatz zu vielen L?sungen für benutzerdefinierte Gutenberg-Bl?cke konnte ich keine M?glichkeit finden, CSS-Regeln zum Popup selbst hinzuzufügen. Wie kann ich dieses Ziel erreichen?

Vielen Dank im Voraus.

P粉486743671
P粉486743671

Antworte allen(2)
P粉842215006

我認(rèn)為 add_editor_style() 不是你想象的那樣。 這是我在后端編輯器中加載 CSS 和 JS 文件的一個(gè)示例:

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

P粉441076405

好吧,我終于知道了。

我之前使用 after_setup_them 掛鉤來(lái)添加編輯器樣式。

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
}

但是當(dāng)涉及到古騰堡編輯器時(shí),我們最好使用另一個(gè)鉤子。 enqueue_block_editor_assets 鉤子是在 WordPress 5.0 中引入的。

現(xiàn)在,我是這樣寫(xiě)的:

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

現(xiàn)在在我的 editor-style.css 中,帶有 .editor-styles-wrapper 的 css 規(guī)則適用于正文,任何沒(méi)有 .editor-styles-wrapper 的規(guī)則適用于彈出窗口本身和其中的其他元素。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage