ブロックエディタにおけるライブレンダリング

Gutenberg 2.8では、PHPを使用してサーバー上でレンダリングを行うことを可能にする<ServerSideRender>ブロックが追加されました。

サーバーサイドレンダリングはフォールバックとして意図されています。クライアントサイドレンダリングは常に優先されます（クライアントレンダリングは速く、エディタの操作がより良好です）。 

  1. import { registerBlockType } from '@wordpress/blocks';
  2. import ServerSideRender from '@wordpress/server-side-render';
  3. import { useBlockProps } from '@wordpress/block-editor';
  5. registerBlockType( 'gutenberg-examples/example-dynamic', {
  6.    apiVersion: 3,
  7.    title: 'Example: last post',
  8.    icon: 'megaphone',
  9.    category: 'widgets',
  11.    edit: function ( props ) {
  12.    const blockProps = useBlockProps();
  13.    return (
  14.    <div { ...blockProps }>
  15.    <ServerSideRender
  16.    block="gutenberg-examples/example-dynamic"
  17.    attributes={ props.attributes }
  18.    />
  19.    </div>
  20.    );
  21.    },
  22. } );

このコードはwp-server-side-renderパッケージを使用していますが、wp-dataは使用していません。PHPコード内の依存関係を更新することを確認してください。wp-scriptsを使用して依存関係を自動的にビルドすることができます（PHPコードのセットアップについては[https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-esnext-a2ab62]の[ブロック開発例リポジトリ]を参照してください）。