将 JavaScript 变量注入自定义 Wordpress 块编辑器

Question

我在主题中创建了一些自定义块，但遇到了问题。有时我需要将一些自定义数据传递到块编辑器中的块。

换句话说，我需要数据在 blocks/myBlock/index.js（编辑器脚本）中可用。

我使用推荐的新方法

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

注册我的块，它基本上加载 block.json 文件，然后注册在那里定义的所有编辑器、前端和渲染脚本。

就我而言，它由以下部分组成：

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

有人会认为我可以在钩子

wp_add_inline_script

中使用函数

admin_enqueue_scripts

，但它似乎不起作用。钩子被触发，但没有添加内联脚本。根据官方文档中的评论，经过一些调查后，我最好的猜测是块脚本加载得太早，

wp_add_inline_script

是在脚本已经加载之后触发的； https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-5828

例子：

add_action('admin_enqueue_scripts', function () {
    wp_add_inline_script('myBlock-editor-script-js', 'window.myBlockConfig = ' . json_encode(array(
        'themeDir' => THEME_DIR,
        'themeUrl' => THEME_URL,
        'themeName' => THEME_NAME,
        'themeVersion' => THEME_VERSION,
    )), 'before');
});

甚至使用

admin_head

-hook 在脚本中强制执行，正如评论所建议的那样，即使它使用 wp_footer 作为示例，似乎也不起作用。然后我可以看到我的内联脚本已加载，但它是在 block-editor-script 之后加载的，到那时所有通过内联脚本访问的数据都无法访问。

例子：

add_action('admin_head', function () {
    echo '<script>window.myBlockConfig = ' . json_encode(array(
     'themeDir' => THEME_DIR,
     'themeUrl' => THEME_URL,
     'themeName' => THEME_NAME,
     'themeVersion' => THEME_VERSION,
    )) . '</script>';
});

那么“正确”的方法是什么？

更新：

我发现解决这个问题的唯一方法是使用 Wordpress REST API，例如。

function myBlockRestApiGetConfig($request)
{
    $response = array(
      'themeDir' => THEME_DIR,
      'themeURL' => THEME_URL,
      'themeName' => THEME_NAME,
      'themeVersion' => THEME_VERSION
    );

    return rest_ensure_response($response);
}

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

然后在我的块编辑器脚本中我可以获取它；

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

但问题仍然是；这样做的“正确”方法是什么？ 也许使用 API 更好？ React 后端非常以 API 为中心，因此它很有意义，但“预加载配置”使其更快。所以我猜这是赞成/反对。

我仍然觉得很奇怪，任何钩子似乎都不可能在块之前加载任何脚本标签。

谢谢你的时间:-)