wake-up-neo.net

Gutenberg - wie man Ajax Requests im Backend korrekt ausführt

Ich habe einen einfachen Block mit serverseitigem Rendering im Frontend.

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>';
}

Was funktioniert, aber ich muss es auch als Vorschau im Admin-Bereich rendern, also füge ich JS hinzu:

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
    }

} );

Meine Frage ist - wie kann ich diese Daten richtig abrufen? Soll ich einfach wp_ajax_ callback/filter verwenden? Oder hat Gutenberg eine bessere Möglichkeit, damit umzugehen?

Ich habe bereits überprüft, wie der Standardblock "Neueste Beiträge" funktioniert. Er verwendet die Rest-API, um Beitrags-IDs und -titel abzurufen und sie dann über "Reagieren" wiederzugeben. Aber für meinen Fall muss ich nur eine einfache HTML-Zeichenfolge zurückgeben.

3
Marvin3

Wenn Sie dies auf diese Weise tun möchten, müssen Sie die <ServerSideRender /> -Komponente in Ihrer edit -Methode verwenden.

Hier ist eine grundlegende Implementierung, die auf dem von Ihnen angegebenen PHP Block-Registrierungscode basiert.

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
    }

} );

Mit der Komponente <ServerSideRender /> können Sie den render_callback aufrufen, der bei der ursprünglichen Registrierung des Blocks in PHP in Ihrer Bearbeitungsvorlage angegeben wurde. Das an die Komponente übergebene Objekt attributes wird als einziger Funktionsparameter an den Rückruf übergeben.

Vollständige Offenlegung, der WP Codex sagt dies über die Verwendung der <ServerSideRender /> Komponente:

Das serverseitige Rendern ist als Fallback gedacht. clientseitiges Rendern in JavaScript wird immer bevorzugt (Client-Rendering ist schneller und ermöglicht eine bessere Manipulation des Editors).

1
brianjohnhanna