向WordPress自定义区块编辑器注入JavaScript变量的正确方法

我在主题中开发自定义区块时，遇到了需要向区块编辑器脚本（blocks/myBlock/index.js）传递自定义数据的需求。我采用WordPress推荐的新方式注册区块：

register_block_type(__DIR__ . '/build/blocks/myBlock');

该方式会自动加载区块目录下的block.json文件，我的block.json相关配置如下：

"editorScript": "file:./index.js",
"style": [
  "file:./style.css"
],
"render": "file:./render.php"

尝试过的失败方案 #

1. 使用admin_enqueue_scripts钩子但句柄错误 #

一开始我尝试用wp_add_inline_script注入数据，但没有成功，推测是区块脚本加载过早导致钩子触发时脚本已加载。错误代码如下：

add_action('admin_enqueue_scripts', function () {
    wp_add_inline_script('my-namespace-my-block-editor-script-js', 'window.myBlockConfig = ' . json_encode(array(
        'foo' => 'bar',
    )), 'before');
});

2. 使用admin_head钩子强行添加脚本 #

后来我改用admin_head直接输出脚本，但内联脚本加载在区块编辑器脚本之后，导致脚本无法读取到数据：

add_action('admin_head', function () {
    echo '<script>window.myBlockConfig = ' . json_encode(array(
     'foo' => 'bar'
    )) . '</script>';
});

临时解决方案：通过REST API获取数据 #

我曾通过WordPress REST API实现数据传递，PHP端注册路由：

function myBlockRestApiGetConfig($request)
{
    $response = array(
      'foo' => 'bar',
    );

    return rest_ensure_response($response);
}

add_action('rest_api_init', function () {
    register_rest_route('myBlock/v1', '/config', array(
      'methods' => 'GET',
      'callback' => 'myBlockRestApiGetConfig',
    ));
});

编辑器脚本中通过apiFetch获取数据：

const config = await apiFetch({
   path: `/myBlock/v1/config`,
});

最终正确解决方案 #

问题的核心在于wp_add_inline_script的句柄名称错误：我使用了浏览器源码中显示的完整ID（带-js后缀），但-js是WordPress自动添加的，并非实际的脚本句柄名称。正确的句柄应为my-namespace-my-block-editor-script，修正后即可成功注入数据：

add_action('admin_enqueue_scripts', function () {
    // 为my-namespace/my-block预加载数据
    wp_add_inline_script('my-namespace-my-block-editor-script', 'window.myBlockConfig = ' . json_encode(array(
        'foo' => 'bar',
    )), 'before');
});

内容的提问来源于stack exchange，提问作者lejahmie