0

0

优化WordPress区块编辑器设置加载时机的最佳实践

DDD

DDD

发布时间:2025-09-21 16:03:01

|

508人浏览过

|

来源于php中文网

原创

优化WordPress区块编辑器设置加载时机的最佳实践

本文探讨了在WordPress区块编辑器中修改主题提供设置(如允许的区块类型)的最佳时机。针对JavaScript异步修改可能导致的加载时序问题,我们推荐使用PHP的block_editor_settings_all过滤器。这种服务器端方法确保设置在编辑器加载到前端之前即已生效,从而避免了客户端脚本的异步挑战,实现了设置的即时可用性。

理解区块编辑器设置加载的挑战

wordpress区块编辑器中,开发者经常需要根据主题或插件的需求,动态调整编辑器的行为,例如限制允许使用的区块类型(allowedblocktypes)。一个常见的场景是,我们希望在编辑器加载完成后,立即应用这些自定义设置,以确保用户体验的一致性。

然而,当尝试使用JavaScript在客户端(浏览器)修改这些设置时,会遇到一个棘手的时序问题。区块编辑器的加载过程是异步的,涉及到多个状态更新。如果使用wp.data.subscribe监听状态变化来触发设置修改,可能会发现回调函数在设置完全加载之前被多次调用,导致代码逻辑复杂且难以精确控制修改的时机。

例如,以下JavaScript代码片段尝试在区块编辑器加载时修改allowedBlockTypes:

async function blockEditorSubHandler() {
    console.log("callback fired")
    // 检查是否有区块,避免在编辑器完全加载前操作
    if (!select(blockEditor).getBlocks().length) return

    // 如果 "foo" 不在允许的区块类型中,则添加
    if (!wp.data.select("core/block-editor").getSettings().allowedBlockTypes.includes("foo")) {
        await dispatch(blockEditor).updateSettings({ allowedBlockTypes: ["foo"] })
        console.log("passed")
    }
}
// 订阅 core/block-editor 存储的状态变化
subscribe(blockEditorSubHandler, "core/block-editor")

这段代码的问题在于,subscribe回调可能会在编辑器加载过程中被触发多次。即使最终设置被正确应用,但这种多余的执行和对异步操作的依赖,使得代码不够健壮,且设置的实际生效时间可能比预期晚。开发者需要精确判断何时“所有”主题设置都已加载完毕,这在异步环境中是一个挑战。

推荐方案:使用PHP block_editor_settings_all 过滤器

为了避免JavaScript客户端修改带来的异步加载和时序问题,最推荐且最可靠的方法是在服务器端使用PHP的block_editor_settings_all过滤器。这个过滤器允许我们在区块编辑器设置被发送到前端(浏览器)之前,对其进行拦截和修改。这意味着,当编辑器加载时,它接收到的设置已经是我们修改过的版本,无需任何客户端的异步操作。

过滤器的工作原理

block_editor_settings_all过滤器接收两个参数:

MyMap AI
MyMap AI

使用AI将想法转化为图表

下载
  1. $editor_settings:一个关联数组,包含所有将传递给区块编辑器的设置。
  2. $editor_context:一个包含编辑器上下文信息的关联数组,例如当前编辑的帖子类型等。

通过修改$editor_settings数组,我们可以直接更改编辑器的默认行为。

示例代码:使用PHP修改允许的区块类型

假设我们希望将允许的区块类型限制为只包含名为 "foo" 的区块,可以在主题的 functions.php 文件或自定义插件中添加以下PHP代码:

post->post_type
    // 来决定是否应用这些设置。
    //
    // 如果您只想添加 "foo" 而不是替换所有允许的区块类型,
    // 可以先获取现有设置,然后合并或修改:
    // if ( ! in_array( 'foo', $editor_settings['allowedBlockTypes'] ) ) {
    //     $editor_settings['allowedBlockTypes'][] = 'foo';
    // }

    // 此处示例是直接替换所有允许的区块类型为 'foo'
    $editor_settings['allowedBlockTypes'] = ['foo'];

    return $editor_settings;
}

// 注册过滤器,优先级为10,接受2个参数
add_filter( 'block_editor_settings_all', 'so_76324559_allow_foo', 10, 2 );

代码解析与注意事项

  1. 函数定义:so_76324559_allow_foo 是一个自定义函数,用于处理过滤逻辑。它接收 $editor_settings 和 $editor_context 作为参数。
  2. 修改设置:在函数内部,我们直接修改 $editor_settings['allowedBlockTypes'] 的值。在这个例子中,我们将其设置为只包含 'foo'。
  3. 条件判断:在实际应用中,您可能不希望无条件地替换所有允许的区块类型。例如,您可能只想为特定的文章类型($editor_context->post->post_type)应用此限制。在这种情况下,您应该在修改前添加条件判断。如果只是想在现有允许的区块类型中添加一个新类型,而不是完全替换,则需要先获取现有数组,然后进行合并或追加操作。
  4. 注册过滤器:add_filter( 'block_editor_settings_all', 'so_76324559_allow_foo', 10, 2 ); 将我们的函数挂载到 block_editor_settings_all 过滤器上。10 是优先级(数字越小越早执行),2 表示我们的函数接受两个参数。

验证结果

应用上述PHP代码后,当您在浏览器控制台中运行 wp.data.select('core/block-editor').getSettings().allowedBlockTypes 时,会立即看到 ["foo"] 作为结果,这证明设置已在编辑器加载之初就已生效。

总结

对于在WordPress区块编辑器加载时需要修改其初始设置的场景,使用PHP的block_editor_settings_all过滤器是最佳实践。它通过在服务器端预处理设置,确保了设置的即时可用性和一致性,避免了客户端JavaScript异步加载可能带来的复杂性和不确定性。虽然JavaScript在编辑器加载后进行动态交互和修改仍有其用武之地,但对于初始配置,PHP过滤器提供了更可靠、更高效的解决方案。

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

1661

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

1096

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

995

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

948

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

1396

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1227

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1438

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1302

2023.11.13

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

10

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 7.7万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 6.9万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号