web-dev-qa-db-ja.com

Gutenberg - バックエンドで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_コールバック/フィルタを使うべきですか？それともグーテンベルクはこれを処理するためのいくつかの良い方法がありますか？

デフォルトの "Latest Posts"ブロックがどのように機能するかをすでに確認しました。RestAPIを使用して投稿IDとタイトルを取得し、次にそれらを反応によってレンダリングします。しかし私の場合は、単純なHTML文字列を返すだけです。

ajaxrest-apiblock-editor
3
Marvin3

このようにしたい場合は、editメソッドで <ServerSideRender /> コンポーネントを使用する必要があります。

これは、あなたが提供した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 />コンポーネントを使用すると、編集テンプレートのPHPにブロックを最初に登録したときに提供されたrender_callbackを呼び出すことができます。コンポーネントに渡されるattributesオブジェクトは、コールバックに渡される唯一の関数パラメータとして提供されます。

完全な開示、 WP Codexはこれを言う<ServerSideRender />コンポーネントの使用について：

サーバー側のレンダリングはフォールバックを意味します。 JavaScriptでのクライアントサイドレンダリングは常に好まれます（クライアントレンダリングはより速く、より良いエディタ操作を可能にします）。

1
brianjohnhanna