web-dev-qa-db-fra.com

Gutenberg - Comment effectuer correctement une requête ajax sur le backend

J'ai un bloc simple avec un rendu côté serveur sur le 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>';
}

Ce qui marche, mais je dois aussi le rendre en aperçu dans la zone d'administration, alors j'ajoute 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
    }

} );

Ma question est la suivante: quelle est la bonne façon de récupérer ces données? Devrais-je simplement utiliser wp_ajax_ callback/filter? Ou Gutenberg a une meilleure façon de gérer cela?

J'ai déjà vérifié le fonctionnement du bloc "Derniers messages" par défaut - il utilise l'API Rest pour obtenir les ID et les titres des publications, puis les restitue via react. Mais pour mon cas, je dois simplement renvoyer une chaîne HTML simple.

ajaxrest-apiblock-editor
3
Marvin3

Si vous souhaitez le faire de cette façon, vous devez utiliser le composant <ServerSideRender /> dans votre méthode edit.

Voici une implémentation de base, basée sur le code d’enregistrement de bloc PHP que vous avez fourni.

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
    }

} );

Le composant <ServerSideRender /> vous permettra d'appeler le render_callback fourni lors de l'enregistrement initial du bloc dans PHP dans votre modèle de modification. L'objet attributes transmis au composant sera fourni en tant que paramètre de fonction unique transmis au rappel.

Pour une divulgation complète, le WP Codex dit ceci à propos de l'utilisation du composant <ServerSideRender />:

Le rendu côté serveur est conçu comme une solution de secours; le rendu côté client en JavaScript est toujours préféré (le rendu du client est plus rapide et permet une meilleure manipulation de l'éditeur).

1
brianjohnhanna