WP Gutenberg, как передать переменные из бэкэнда (функция сохранения) в интерфейс (приложение React, отображаемое в выходных данных функции сохранения)? - PullRequest
Новая
       55

WP Gutenberg, как передать переменные из бэкэнда (функция сохранения) в интерфейс (приложение React, отображаемое в выходных данных функции сохранения)?

0 голосов
/ 28 мая 2020

Если у меня есть блок 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>
    )
  },

Затем скрипт поставлен в очередь как таковой (внутри плагина) 

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 до

Как я мог это сделать?

1 Ответ

0 голосов
/ 28 мая 2020

Как сказано здесь { ссылка }, это можно сделать путем рендеринга скрипта или свойства 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>
    )
  },
...