在后端删除古腾堡编辑器的嵌入式样式表

Remove embedded stylesheet for Gutenberg editor on the back end

Gutenberg 编辑器带有嵌入式样式表。这是该样式表的一个片段:

...

.editor-styles-wrapper {
  font-family: "Noto Serif", serif;
  font-size: 16px;
  line-height: 1.8;
  color: #191e23;
}

.editor-styles-wrapper p {
  font-size: 16px;
  line-height: 1.8;
}

...

我使用以下方法将我自己的编辑器样式表加入队列:

add_action("enqueue_block_editor_assets", "enqueue_custom_block_editor_assets");
function enqueue_custom_block_editor_assets() {
  wp_enqueue_style("editor-style", get_stylesheet_directory_uri()."/editor-style.css", null, null);
}

因为我有自己的编辑器 stylehseet,所以我想去掉默认的。对该主题的搜索会产生很多关于删除 前端 上的默认块样式的结果,但我指的是后端的编辑器样式。感谢您的帮助!

我的解决方案是自动覆盖 .editor-styles-wrapper 中的任何样式的变通方法。使用更少:

编辑-style.css

.editor-styles-wrapper {
    @import "style.less";
}

不过,如果有人知道该怎么做,我仍然希望禁用该嵌入式样式表。

我深入研究了它是如何被注入的,并找到了一种通过 block_editor_settings 过滤器将其清除的方法。有一个 styles 键和一个包含 css 的数组。对我来说唯一不确定的是我假设数组的形状总是相同的,我应该在这里做一些类型的检查。

add_filter( 'block_editor_settings' , 'remove_guten_wrapper_styles' );
public function remove_guten_wrapper_styles( $settings ) {
    unset($settings['styles'][0]);

    return $settings;
}