it-swarm.com.ru

Гутенберг - как правильно выполнить ajax-запрос на бэкэнд

У меня есть простой блок с рендерингом на стороне сервера на веб-интерфейсе.

PHP:

register_block_type( 'some/block', array(   
    'render_callback' => 'render_my_block',
    'attributes' => array(
        'stuff' => array(

        )
    )
));

function render_my_block( $attributes ) {
  // $attributes['stuff']
  return '<h1>Hello frontend</h1>';
}

Это работает, но мне также нужно отобразить его как предварительный просмотр в административной области, поэтому я добавляю JS:

registerBlockType( 'some/block', {

    title: 'Some block',

    attributes: {
        stuff : {

        }
    },

    edit( { className, attributes, setAttributes } ) {
        return (
            <Fragment>
                <SomeInput />
                <SomeOtherInput />
                <Preview>
                    // I need to get contents of PHP function render_my_block here, 
                   // based on current attributes.stuff
                </Preview>
            </Fragment>
        );
    },

    save( { attributes } ) {
        return null; // server side
    }

} );

У меня вопрос - как правильно получить эти данные? Должен ли я просто использовать wp_ajax_ callback/filter? Или у Гутенберга есть лучший способ справиться с этим?

Я уже проверил, как работает блок "Последние сообщения" по умолчанию - он использует Rest API для получения идентификаторов и заголовков сообщений, а затем отображает их с помощью реакции. Но для моего случая мне просто нужно вернуть простую строку HTML.

3
Marvin3

Если вы хотите сделать это таким образом, вам необходимо использовать компонент <ServerSideRender /> в вашем методе edit.

Вот базовая реализация, основанная на предоставленном вами регистрационном коде блока PHP.

import { ServerSideRender } from '@wordpress/components';

registerBlockType( 'some/block', {

    title: 'Some block',

    attributes: {
        stuff : {

        }
    },

    edit( { className, attributes, setAttributes } ) {
        return (
            <Fragment>
                <SomeInput />
                <SomeOtherInput />
                <ServerSideRender
                    block="some/block"
                    attributes={ {
                        stuff: attributes.stuff
                    } }
                 />
            </Fragment>
        );
    },

    save( { attributes } ) {
        return null; // server side
    }

} );

Компонент <ServerSideRender /> позволит вам вызвать render_callback, предоставленный при первоначальной регистрации блока в PHP в шаблоне редактирования. Объект attributes, переданный компоненту, будет предоставлен в качестве единственного параметра функции, переданного обратному вызову.

Полное раскрытие, WP Кодекс говорит об этом об использовании компонента <ServerSideRender />:

Рендеринг на стороне сервера рассматривается как запасной вариант; Рендеринг на стороне клиента в JavaScript всегда предпочтителен (рендеринг клиента быстрее и позволяет лучше манипулировать редактором).

1
brianjohnhanna