自定义 Gutenberg 编辑器样式

WordPress 有为 TinyMCE 编辑器增加样式的函数 add_editor_style() 然而当 Gutenberg 编辑器发布后，这个函数已经失去了效果。

Debug 后，决定弃用 add_editor_style()，使用 WordPress 内置的函数 wp_register_style(), wp_enqueue_style() 直接将 css 添加到后台页面。

function customize_editor_style() {
        wp_register_style(
            'editor_style',
            get_stylesheet_directory_uri() . '/editor-style.css'
         );
	wp_enqueue_style('editor_style');
}
add_action('admin_init', 'customize_editor_style');

这样就能成功将 editor-style.css 载入到后台的页面中，接下来就是 css 的编写了。

下面是我的 editor-style.css 的示例，只对字体进行了修改。

.editor-post-title__input, .editor-styles-wrapper {font-family: 'PingFang SC','Hiragino Sans GB','Microsoft Yahei',Arial,sans-serif!important;}

下面是在 Safari 中，修改前后字体的比较。