手把手教你自定义修改WordPress新版编辑器Block Editor(Gutenberg编辑器)

自从Wordpress 5.0之后,我就总感觉到哪里有些不对劲。是的,就是那个我们原来熟悉的编辑器不见了,取而代之的是个名叫古什么堡的编辑器(古腾堡,妈蛋,你叫这个名在我糟糕且有限的想象力里,感觉就是一个窝藏吸血鬼、满是蝙蝠的十三世纪古堡,足足的阴森恐怖感)。然后这个编辑器你看他跟原来的相比,既花哨又轻佻,一堆华而不实的功能,边栏顶栏一大堆东西改起来还费劲儿……这这,真的实在用不下去了,还是赶紧下个经典编辑器插件压压惊。

是不是很多人一开始看待古腾堡编辑器(Gutenberg Editor)时都有与我一样的想法呢?然而就在今年疫情期间,当我随手搭了个学习笔记的小博客,不再关心内容之外的因素时,新编辑器带给我的体验发生了积极正向的变化。

那时每天在B站上看几个小时的网课,跟着老师一边学一边做笔记,心想就简单搭个Blog作为在线记录的工具,于是就没有像往常那样过于折腾界面、主题和各种功能配置,随眼缘启用了默认的’二〇二〇’主题,也懒得专门去下插件启用原来的经典编辑器。上传图片,标注资料链接,记录代码片段,输入笔记文字,几个小时的使用之后忽然发现这个编辑器功能真的是太强大了,丰富功能的同时便捷性也大大提升。就以输入代码为例,如果使用老编辑器,那么就需要单独配置代码格式化和高亮的功能,而这个新的编辑器就已经帮你集成好了。不得不说,狗子,你牛逼了,真香!!!

其实,很早之前就已经了解到Wordpress 5.0会有重大变化。当时我推想的古腾堡项目会使用新的流行框架完整重构wordpress,然而的然而,5.0之后的Wordpress仅仅是使用react重构了一个新的编辑器,就已经足以让”重启经典编辑器”成为Wordpress庞大插件库中下载量最大的插件了,莫不是真的因为……

PHP是世界上最好的语言

说回正题,当你像我一样,选择拥抱新的变化,如果还能同时实现根据需要自定义新编辑器(Block Editor)的功能和外观,那就真的太爽了!

缘,妙不可言

现在,经过一番查找资料疯狂折腾之后,我的Block Editor编辑器有了很大的改观,虽然并没有为这个编辑器添加任何功能,仅仅只是做了一些减法,至少当前的界面已经足够让我的心情变得极度舒适。嘚嘚,真的是没有好看的手纸拉不了屎啊……

如果你了解一些基本的通过代码自定义Wordpress功能的知识,那么接下来的过程就仅仅是复制粘那么简单了。但我还是会多说一些,方便理解,也方便我加深记忆,你说这样好不好哇!

首先,新建一个my-customized-block-editor的文件夹,在文件夹里新建index.php文件,内容如下方代码。该文件用来引入一些样式文件,并通过一些action钩子来删除一些多余的功能。

<?php

/**
 *
 * Plugin Name:  My Customized Block Editor
 * Plugin URI:   http://www.wpabc.cc
 * Description:  A plugin help to customize wordpress admin UI and some settings.
 *
 **/

完成上述步骤之后我们需要将my-customized-block-editor文件夹上传到wp-content/plugins目录中,然后在后台插件管理面板启用这个插件。

首先是css和js文件的引入,Wordpress有很多的action可以用,但Wordpress专门针对block editor定义了一个专门的'enqueue_block_editor_assets',这样能够确保无论是在哪个页面使用block editor,编辑器都能有一致的外观和表现。将下面代码添加到刚刚新建的index.php文件中。

// Hook the enqueue functions into the editor.
add_action('enqueue_block_editor_assets', 'my_gutenberg_register_files');
function my_gutenberg_register_files()
{
    wp_enqueue_script( // Enqueue block editor JS
        'my-block-editor-js',
        plugins_url('/block-editor-scripts.js', __FILE__),
        ['wp-blocks', 'wp-nux', 'wp-i18n', 'wp-data', 'wp-element', 'wp-components', 'wp-editor', 'wp-compose'],
        filemtime(plugin_dir_path(__FILE__) . 'js/block-editor-scripts.js')
    );

    wp_enqueue_style( // Enqueue block editor styles
        'my-block-editor-css',
        plugins_url('/block-editor-styles.css', __FILE__),
        ['wp-edit-blocks'],
        filemtime(plugin_dir_path(__FILE__) . 'css/block-editor-styles.css')
    );
}

新建block-editor-styles.css以及block-editor-scripts.js两个文件,与index.php放在同一级目录。需要注意的是wp_enqueue_script()里第三个参数['wp-blocks', 'wp-nux', 'wp-i18n', 'wp-data', 'wp-element', 'wp-components', 'wp-editor', 'wp-compose'],这里涉及到前后端不同类型数据接口的引入,这里跟我保持一致即可。如果后边需要扩展一些未涉及到的类型,可以根据官方接口再行增删。

引入的CSS文件还是空的,接下来我们可以对它进行一些编辑。如果略懂一些CSS知识,那么可以通过Chrome浏览器的审查工具针对需要的需要修改的元素进行编辑。Block Editor本身拥有较为复杂的UI布局,建议像下边一样做好标记和注释。

/* editor - header -right - side */

.edit-post-header__settings {
    width: 321px;
    border-left: 1px solid #dedede;
    height: 56px;
    text-align: right;
    flex-direction: row;
    justify-content: flex-end;
}

……


/* notification & tips */

.components-editor-notices__dismissible .components-notice,
.components-editor-notices__pinned .components-notice {
    box-sizing: border-box;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    padding: 0px 12px;
    min-height: 30px;
}

……

在Wordpress 5.4.2的版本时,Block Editor有一个新的变化,就是左上角退出编辑器的按钮变成了Wordpress的logo,这种变化显然已经引来了骂声一片。

也许后边的版本会有所改变或者提供给我们自定义的选择,但是目前要想替换掉这个尴尬的logo,你也许可以采用css的方式,代码如下:

/* editor - header -logo */

.edit-post-header>a.components-button>svg,
.components-external-link {
    display: none;
}

.edit-post-fullscreen-mode-close.has-icon {
    background: #fff url('../svg/quit.svg') no-repeat center !important;
    border-right: 1px solid #dedede;
}

.edit-post-fullscreen-mode-close.has-icon:hover {
    background: #007cba url('../svg/quit_hover.svg') no-repeat center !important;
}

修改后的效果,是下边这样的,图标icon可以换成自己的。

当然还要考虑到当前是一个多屏协同的移动互联时代,编辑器默认的样式已经设置了一些自适应布局,我们可以有针对性的进行一些调整,可以参照如下样式:

@media (min-width: 782px) {
    body.js.is-fullscreen-mode {
        margin-top: -58px;
        height: calc(100% + 58px);
    }
    .block-editor__container {
        min-height: calc(100vh - 58px);
    }
    .block-editor-editor-skeleton {
        top: 58px;
    }
    .edit-post-sidebar {
        width: 320px;
    }
    .edit-post-layout .editor-post-publish-panel {
        width: 321px;
        top: 59px;
    }
    .edit-post-header .components-button.editor-post-publish-button,
    .edit-post-header .components-button.editor-post-publish-panel__toggle {
        margin: 0 8px 0 3px;
    }
    .edit-post-header .components-button.editor-post-preview {
        margin: 0 3px 0 8px;
    }
    .edit-post-header .components-button.editor-post-save-draft,
    .edit-post-header .components-button.editor-post-switch-to-draft {
        padding: 0;
    }
}

@media (max-width: 782px) {
    .edit-post-header__settings {
        width: auto;
        border-left: none;
    }
}

@media (min-width: 600px) {
    .edit-post-header .components-button.editor-post-preview,
    .edit-post-header .components-button.editor-post-publish-button,
    .edit-post-header .components-button.editor-post-publish-panel__toggle {
        padding-left: 8px;
        padding-right: 8px;
    }
}

回到我们刚刚新建的js文件,它同样也是空的,所以还需要一行一行的填满它,不过针对我们今天的例子来说,其实不需要太多行。我们主要用它来控制编辑器的右边栏。

当我们使用原来的经典编辑器时,也会对一些不必要的Metabox做调整,比如版本(revison),摘要(exerpt),Tackback等等。

边栏里的pannel

新的编辑器仍然保留了这些,但是移除的方式却发生了变化,我们需要通过js代码来产生更有效率的修改。将下边的代码加入到js文件中,你可以根据需要进行删除或者注释:

wp.domReady(() => {
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'taxonomy-panel-category' ) ; // category
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'taxonomy-panel-TAXONOMY-NAME' ) ; // custom taxonomy
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'taxonomy-panel-post_tag' ); // tags
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'featured-image' ); // featured image
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'post-link' ); // permalink
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'page-attributes' ); // page attributes
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'post-excerpt' ); // Excerpt
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'discussion-panel' ); // Discussion
wp.data.dispatch('core/edit-post').removeEditorPanel('meta-box-postcustom'); // Custom fileds
});

在完成上述的JS文件的内容之后,编辑器应该可以产生明显可观的变化。但是在目前的5.4.2版本,有一个需要注意到的问题是,当我们禁用自定义字段(Custom fileds)的功能选项时,它确实被成功的关闭了,但是编辑器右上角更多->选项->高级选项里”自定义字段”功能的开关仍在,这是一个已知的bug,所以你可能需要通过js或者CSS的方式隐藏它。

已经成功禁用了自定义字段,但是选项按钮仍然存在

我选择了一种更为极端的方式,直接用css样式隐藏了”高级选项”,这样未来注册到该区域的其他选项也不会被看见(当然咯,眼不见心不烦,我要做的是减法)。你可以通过在刚才的css文件中加入下边的代码实现同样的效果:

/* more tools & options -> options popup */

div.components-modal__frame.edit-post-options-modal .components-modal__content section:last-child {
    display: none;
}

你也可以通过php代码的方式来关闭”自定义字段”这个选项,代码能够起作用,但是同样的,这个功能的开关按钮不会消失,所以如果你在意这种逼死强迫症的状况,css的方案是可以接受的。下边是使用php关闭该功能的代码,你可以把它加入到我们建立的index.php文件中(其实不建议加,因为它跟前面js代码的作用基本是一样的):

    //下边的代码针对post,page以及其他custom post type起作用
    function my_remove_post_type_support()
    {
        $types = get_post_types(['public' => true], 'names');
        foreach ($types as $type) {
            remove_post_type_support($type, 'custom-fields');
            remove_post_type_support($type, 'revisions');
        }
    }
    add_action('init', 'my_remove_post_type_support', 10);

因为是国外的程序,所以我们会发现编辑器的区块选择->嵌入里边布满了我们无法访问到的按钮,整个一个404按钮大集合啊!

看不见摸不着的东西要你何用?!所以不如删掉好了,把下边的代码放进你的php文件中:

// available blocks.
add_filter('allowed_block_types', 'my_allowed_block_types');

function my_allowed_block_types($allowed_blocks)
{
    $allowed_blocks = array(
        'core/image',
        'core/paragraph',
        'core/heading',
        'core/gallery',
        'core/cover',
        'core/list',
        'core/quote',
        'core/audio',
        'core/file',
        'core/video',
        'core/table',
        'core/verse',
        'core/code',
        'core/freeform',
        'core/html',
        'core/preformatte',
        'core/pullquote',
        'core/buttons',
        'core/text-columns',
        'core/media-text',
        'core/more',
        'core/nextpage',
        'core/separator',
        'core/spacer',
        'core/shortcode',
        'core/archives',
        'core/categories',
        'core/latest-comments',
        'core/latest-posts',
        'core/calendar',
        'core/rss',
        'core/search',
        'core/tag-cloud',
    );

    if ($post->post_type === 'page') {//post_type decide
        $allowed_blocks[] = 'core/shortcode';
    }
    return $allowed_blocks;
}

在上边的代码里我们使用'allowed_block_types'保留需要使用的区块(blocks),同样也可以根据post_type的不同来决定使用不同的区块。这代码看起来如此的粗糙,如果在看的小伙伴能有更好的方式,请一定留言告诉我!


原来经典编辑器的所见即所得模式和代码模式也同样被block editor继承了下来,但是代码模式一般是极少使用的,在php文件中加入下边的代码,就可以关闭编辑器的代码模式:

// disable the code editor.
function xcm_custom_editor_settings($settings, $post)
{
    $settings['codeEditingEnabled'] = false;
    return $settings;
}
add_filter('block_editor_settings', 'xcm_custom_editor_settings', 10, 2);

到这里,可能你已经觉得差不多了,但是还有一些其他的问题需要注意,比如翻译。新编辑器的翻译问题实在是一言难尽,可能是一词多义的原因,不少地方的翻译看起来并不像一句正常的汉语。比如开启段落时,你会看到右边栏有这样一句:”请从所有故事的基石开始。” 我实在想不出这一条既高端装B又狗屁不通的句子是在表达什么。

所以,我想尽办法去找资料改掉这句话,我找到了下边的代码,亲测有效(放进你的index.php文件里):

//修改block editor的部分text翻译(需要英文源文本)
add_action('admin_print_footer_scripts', 'my_block_editor_translates', 11);
function my_block_editor_translates()
{
    if (wp_script_is('wp-i18n')):
        $data = [
            'Stick to the top of the blog'                  => [__('设为置顶', 'xcm')],
            'Status & visibility'                           => [__('状态设置', 'xcm')],
            'Save as Pending'                               => [__('提交审核', 'xcm')],
            'Saving'                                        => [__('保存中', 'xcm')],
            'Double-check your settings before publishing.' => [__('请在发布前再次检查您的设置。', 'xcm')],
        ];
        printf('<script>wp.i18n.setLocaleData(' . json_encode($data) . '); </script>');
    endif;
}

但遗憾的MMP是,我费半天劲找到的上面代码,对我提到的这句无效。但是我并不想直接去修改程序本身的翻译文件,所以我选择忍受和无视,还是”请从所有故事的基石开始”吧。

笑容逐渐凝固

修改到这里就算告一段落了。虽然已经更新到了5.4.2版本,但是Gutengberg编辑器的更新和完善还在持续进行,对于我等强迫症和定制党患者而言它还算不上十全十美,但是相比原来的经典编辑器已经足够好了。后边随着版本的不断更新,编辑器自定义的功能接口也会越来越完善,如果有兴趣的话,可以随时翻翻葵花宝典:WordPress block Editor Handbook,有空的话我应该会继续且持续不断地折腾这个编辑器。

电影《无双》,英文片名Project Gutenberg

最后,叫古腾堡这名字的不仅仅有编辑器,前些年还有一部港片神作《无双》,片子的英文名”Project Gutenberg”,推荐大家找来看看,还是挺有意思的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注