WP Gutenberg，如何将变量从后台（保存函数）传递到前端（在保存函数输出中渲染的React应用）？

Question

如果我有一个 Gutenberg 块中，我收集了用户输入的字符串，但我想在一个 react 应用在前台渲染，如何才能传递这个字符串？

定义一个古腾堡块

  save: ({ attributes }) => {
    window.thisVariableWillNotBeSeen = attributes
    console.log(window) // here `thisVariableWillNotBeSeen` is seen, in the frontend it is not
    return (
        <div id="test_react"></div>
    )
  },

然后，这样的脚本enqueued（在一个插件内）。

add_action('wp_enqueue_scripts', 'react_enqueue');
function react_enqueue()
{
    $asset_file = include(plugin_dir_path(__FILE__) . 'build/test.asset.php');

    wp_enqueue_script(
        'myBlock',
        plugins_url('build/test.js', __FILE__),
        $asset_file['dependencies'],
        $asset_file['version'],
        true
    );
}

还有 scr/test.js

const { render } = wp.element
import { Test} from './components/test'

render(<Test />, document.getElementById(`test_react`))

内 export const Test，如果我看到有 console.log(window) 我看不到我在全局变量中添加的 save 之前的功能

我怎样才能做到这一点？

Answer 1

正如这里所说 https:/stackoverflow.coma44663473826815它可以通过渲染脚本来实现，也可以通过一个 dataset 属性，并在以后通过 window 对象或通过DOM

  save: ({ attributes }) => {
    return (
      <Fragment>
        <div id="test_react"></div>
        <div id="test_react_data" data-test={JSON.stringify(attributes)}></div>
        <script type="text/javascript">{`var test_react= ${JSON.stringify(attributes)};`}</script>
      </Fragment>
    )
  },