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.
我認(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' ); }
好吧,我終于知道了。
我之前使用 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ī)則適用于彈出窗口本身和其中的其他元素。