阐述 WordPress `block_editor_settings` 过滤器源码：如何禁用特定区块或修改编辑器功能。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

早上好，各位代码爱好者！今天咱们来聊聊 WordPress 这片代码丛林里的一个重要地标：block_editor_settings 过滤器。别担心，这名字听着唬人，实际上它就像个万能遥控器，能让你随心所欲地调整 WordPress 区块编辑器的各种设置，包括禁用特定区块、修改编辑器功能等等。准备好跟着我一起拆解这个遥控器了吗？

开场白：区块编辑器的“幕后推手”

WordPress 的区块编辑器（也就是古腾堡编辑器）现在已经是标配了。它让咱们可以像搭积木一样构建页面，大大提升了内容创作的效率。但是，默认的编辑器设置有时候可能并不符合咱们的需求。比如，你可能想禁用某些不常用的区块，或者修改编辑器的默认字体大小。这时候，block_editor_settings 过滤器就派上用场了。

block_editor_settings 过滤器：你的编辑器定制中心

block_editor_settings 过滤器允许你修改传递给区块编辑器的配置数据。这些配置数据包含了区块类型、编辑器设置、插件信息等等。通过修改这些数据，你可以实现对编辑器的深度定制。

源码剖析：block_editor_settings 过滤器在哪儿？

这个过滤器主要在 WordPress 核心代码的 wp-includes/block-editor.php 文件中被使用。具体来说，是在 wp_enqueue_block_editor_assets() 函数里。这个函数负责加载区块编辑器所需的各种资源，包括 JavaScript、CSS 等等。

让我们看看相关代码片段（简化版）：

function wp_enqueue_block_editor_assets() {
    // ... 其他代码 ...

    $settings = array(
        'availableMimeTypes' => get_allowed_mime_types(),
        'autosaveInterval'  => AUTOSAVE_INTERVAL,
        'defaultBlock'      => get_option( 'default_block' ),
        // ... 很多其他设置 ...
    );

    /**
     * Filters the settings passed to the block editor.
     *
     * @since 5.0.0
     *
     * @param array $settings Array of settings for the block editor.
     * @param WP_Post|null $post Post being edited. Null for the block library.
     */
    $settings = apply_filters( 'block_editor_settings', $settings, get_post() );

    wp_localize_script( 'wp-editor', 'wp', $settings );

    // ... 其他代码 ...
}

看到了吗？ apply_filters( 'block_editor_settings', $settings, get_post() ) 这行代码就是关键所在。它将 $settings 数组（包含了所有的编辑器设置）传递给 block_editor_settings 过滤器，允许你通过自定义函数修改这些设置。

参数解读：$settings 和 $post

block_editor_settings 过滤器接收两个参数：

$settings: 一个关联数组，包含了区块编辑器的各种设置。这是我们要重点关注的对象。
$post: 当前正在编辑的 WP_Post 对象。如果是在区块库中，则为 null。这个参数允许你根据不同的文章类型或文章 ID 来定制编辑器设置。

实战演练：禁用特定区块

现在，咱们来点实际的。假设你不想让用户在文章中使用“经典编辑器”区块，那么你可以这样做：

找到区块名称： 首先，你需要知道要禁用的区块的名称。 “经典编辑器”区块的名称是 core/legacy-widget。你可以在浏览器的开发者工具中，查看区块的 HTML 结构，或者查阅 WordPress 官方文档来找到区块名称。
编写代码： 将以下代码添加到你的主题的 functions.php 文件或者自定义插件中：

add_filter( 'block_editor_settings', 'my_disable_specific_blocks', 10, 2 );

function my_disable_specific_blocks( $settings, $post ) {
    $disabled_blocks = array( 'core/legacy-widget' ); // 要禁用的区块名称

    if ( isset( $settings['disallowed_blocks'] ) ) {
        $settings['disallowed_blocks'] = array_merge( $settings['disallowed_blocks'], $disabled_blocks );
    } else {
        $settings['disallowed_blocks'] = $disabled_blocks;
    }

    return $settings;
}

代码解释：
- add_filter( 'block_editor_settings', 'my_disable_specific_blocks', 10, 2 ): 这行代码将 my_disable_specific_blocks 函数挂载到 block_editor_settings 过滤器上。 10 是优先级，2 是参数数量。
- my_disable_specific_blocks( $settings, $post ): 这是我们自定义的函数，用于修改编辑器设置。
- $disabled_blocks = array( 'core/legacy-widget' ): 定义一个数组，包含了要禁用的区块名称。
- if ( isset( $settings['disallowed_blocks'] ) ) { ... } else { ... }: 检查 $settings 数组中是否已经存在 disallowed_blocks 键。如果存在，就将新的禁用区块添加到已有的列表中；如果不存在，就创建一个新的 disallowed_blocks 数组。
- return $settings: 返回修改后的 $settings 数组。
效果： 保存代码后，刷新你的文章编辑页面，你会发现“经典编辑器”区块已经从区块列表中消失了。

进阶操作：修改编辑器功能

除了禁用区块，block_editor_settings 过滤器还可以用来修改编辑器的其他功能。比如，你可以修改编辑器的默认字体大小、颜色、或者添加自定义的编辑器样式。

案例一：修改默认字体大小

add_filter( 'block_editor_settings', 'my_modify_font_sizes', 10, 2 );

function my_modify_font_sizes( $settings, $post ) {
    $settings['__experimentalFeatures']['typography']['fontSizes'] = array(
        array(
            'name'      => __( 'Small', 'textdomain' ),
            'shortName' => __( 'S', 'textdomain' ),
            'size'      => 12,
            'slug'      => 'small',
        ),
        array(
            'name'      => __( 'Normal', 'textdomain' ),
            'shortName' => __( 'M', 'textdomain' ),
            'size'      => 16,
            'slug'      => 'normal',
        ),
        array(
            'name'      => __( 'Large', 'textdomain' ),
            'shortName' => __( 'L', 'textdomain' ),
            'size'      => 20,
            'slug'      => 'large',
        ),
        array(
            'name'      => __( 'Huge', 'textdomain' ),
            'shortName' => __( 'XL', 'textdomain' ),
            'size'      => 24,
            'slug'      => 'huge',
        ),
    );

    return $settings;
}

这段代码会修改编辑器中可用的字体大小选项。注意 __experimentalFeatures 这个键，它表明这些特性可能还在实验阶段，未来可能会发生变化。

案例二：添加自定义编辑器样式

你可以通过 enqueue_block_editor_assets action，把自己的css样式加入到编辑器中，让编辑的时候可以预览到前台的样式。

add_action( 'enqueue_block_editor_assets', 'my_custom_editor_styles' );

function my_custom_editor_styles() {
    wp_enqueue_style( 'my-editor-style', get_stylesheet_directory_uri() . '/css/editor-style.css', false, '1.0', 'all' );
}

然后在你的 editor-style.css 文件中编写自定义的 CSS 样式。

$settings 数组的结构：深入挖掘

$settings 数组包含了大量的配置信息。为了更好地利用 block_editor_settings 过滤器，我们需要了解它的结构。下面是一些常用的键：

键名	描述
`availableMimeTypes`	允许上传的文件类型。
`autosaveInterval`	自动保存的间隔时间（秒）。
`defaultBlock`	默认的区块类型。
`disableCustomColors`	是否禁用自定义颜色选择器。
`disableCustomFontSizes`	是否禁用自定义字体大小选择器。
`imageSizes`	可用的图片尺寸。
`isRTL`	是否为从右到左的语言。
`maxUploadFileSize`	允许上传的最大文件大小（字节）。
`nonce`	用于安全验证的 nonce 值。
`post`	当前正在编辑的 `WP_Post` 对象的数据。
`richEditingEnabled`	是否启用富文本编辑功能。
`styles`	编辑器中可用的样式。
`template`	文章的区块模板。
`templateLock`	模板锁定设置。
`__experimentalFeatures`	包含实验性功能的设置。这里的设置可能会发生变化，所以要谨慎使用。
`disallowed_blocks`	一个数组，包含了被禁止使用的区块。

注意事项：版本兼容性

WordPress 的区块编辑器在不断更新，一些 API 可能会发生变化。因此，在使用 block_editor_settings 过滤器时，要特别注意版本兼容性。最好在代码中添加版本判断，以确保你的代码在不同的 WordPress 版本下都能正常工作。

例如：

if ( version_compare( get_bloginfo( 'version' ), '5.8', '>=' ) ) {
    // WordPress 5.8 及以上版本的代码
} else {
    // WordPress 5.8 之前的代码
}

最佳实践：保持代码简洁

尽量保持你的代码简洁易懂。避免在 block_editor_settings 过滤器中执行过于复杂的操作。如果需要执行大量的定制逻辑，最好将其分解成多个函数，并分别挂载到不同的过滤器或钩子上。

安全提示：谨慎处理用户输入

如果你允许用户自定义编辑器设置，一定要对用户输入进行严格的验证和过滤，以防止安全漏洞。避免直接将用户输入的数据传递给 block_editor_settings 过滤器，以免造成 XSS 攻击等安全问题。

总结：定制你的专属编辑器

block_editor_settings 过滤器是 WordPress 区块编辑器的强大武器。掌握了它，你就可以随心所欲地定制编辑器的各种设置，打造一个符合你需求的专属编辑器。记住，代码的世界是充满乐趣的，大胆尝试，不断学习，你一定能成为一名优秀的 WordPress 开发者！

今天的讲座就到这里。希望大家有所收获！如果有任何问题，欢迎随时提问。下次再见！

发表回复 取消回复

发表回复取消回复