インストール

モジュールをインストールします 

  1. npm install @wordpress/server-side-render --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。そのような言語機能やAPIのサポートが限られているか、まったくない環境を使用している場合は、コードに@wordpress/babel-preset-defaultに含まれるポリフィルを含める必要があります。

使用法

コンポーネントが受け入れるプロパティは以下に説明されています。

プロパティ

属性

サーバーサイドでレンダリングされるブロックの属性を含むオブジェクトです。

例: { displayAsDropdown: true }, { showHierarchy: true } など…

  • タイプ: Object
  • 必須: いいえ

ブロック

サーバーサイドでレンダリングされるブロックの識別子です。

例: “core/archives”, “core/latest-comments”, “core/rss” など…

  • タイプ: String
  • 必須: はい

className

サーバーサイドでレンダリングされたブロックをラップするDOM要素に追加されるクラスです。

例: “my-custom-server-side-rendered”。

  • タイプ: String
  • 必須: いいえ

httpMethod

使用するHTTPリクエストメソッドで、‘GET’または‘POST’のいずれかです。デフォルトは‘GET’です。‘POST’の値は、PHPで‘rest_endpoints’がフィルタリングされていない限り、WP 5.5以前でエラーを引き起こします。‘POST’の場合、リクエストボディに属性を送信し、URLには送信しません。これにより、より大きな属性オブジェクトを許可できます。

  • タイプ: String
  • 必須: いいえ
  • デフォルト: ‘GET’

例:

  1. function add_rest_method( $endpoints ) {
  2.    if ( is_wp_version_compatible( '5.5' ) ) {
  3.    return $endpoints;
  4.    }
  6.    foreach ( $endpoints as $route => $handler ) {
  7.    if ( isset( $endpoints[ $route ][0] ) ) {
  8.    $endpoints[ $route ][0]['methods'] = [ WP_REST_Server::READABLE, WP_REST_Server::CREATABLE ];
  9.    }
  10.    }
  12.    return $endpoints;
  13. }
  14. add_filter( 'rest_endpoints', 'add_rest_method');

skipBlockSupportAttributes

ブロックサポートによって適用された属性とスタイルプロパティを削除します。これにより、ブロックラッパーとServerSideRenderコンポーネントでのスタイルの重複を防ぎます。特定の機能がexperimentalSkipSerializationによってHTMLマークアップへのシリアル化をスキップしても、すべての属性とスタイルプロパティは削除されます。

  • タイプ: Boolean
  • 必須: いいえ
  • デフォルト: false

urlQueryArgs

リクエストURLに適用するクエリアルグメントです。

例: { post_id: 12 }。

  • タイプ: Object
  • 必須: いいえ

EmptyResponsePlaceholder

APIレスポンスが空のときにコンポーネントがレンダリングされます。コンポーネントはAPIレスポンスの値と、ServerSideRendererに渡されたすべてのプロパティを受け取ります。

  • タイプ: Component
  • 必須: いいえ

ErrorResponsePlaceholder

APIレスポンスがエラーのときにコンポーネントがレンダリングされます。コンポーネントはAPIレスポンスの値と、ServerSideRendererに渡されたすべてのプロパティを受け取ります。

  • タイプ: Component
  • 必須: いいえ

LoadingResponsePlaceholder

APIリクエストが処理中（ローディング状態）の間にコンポーネントがレンダリングされます。コンポーネントはAPIレスポンスの値と、ServerSideRendererに渡されたすべてのプロパティを受け取ります。

  • タイプ: Component
  • 必須: いいえ

使用例

  1. const MyServerSideRender = () => (
  2.    <ServerSideRender LoadingResponsePlaceholder={ MyAmazingPlaceholder } />
  3. );

使用法

core/archivesのプレビューをレンダリングします。 

  1. import ServerSideRender from '@wordpress/server-side-render';
  3. const MyServerSideRender = () => (
  4.    <ServerSideRender
  5.    block="core/archives"
  6.    attributes={ {
  7.    showPostCounts: true,
  8.    displayAsDropdown: false,
  9.    } }
  10.    />
  11. );
  3. ``````bash
  4. const { serverSideRender: ServerSideRender } = wp;
  6. const MyServerSideRender = () => (
  7.    <ServerSideRender
  8.    block="core/archives"
  9.    attributes={ {
  10.    showPostCounts: true,
  11.    displayAsDropdown: false,
  12.    } }
  13.    />
  14. );
  15. `

出力

出力はブロックのrender_callback関数を使用し、ブロックを定義する際に設定されます。

APIエンドポイント

ServerSideRenderの出力を取得するためのAPIエンドポイントは/wp/v2/block-renderer/:blockです。ブロックのrender_callbackメソッドを使用します。 

  3. ``````bash
  4. register_block_type(
  5.    'core/archives',
  6.    array(
  7.    'api_version' => 3,
  8.    'attributes'      => array(
  9.    'showPostCounts'    => array(
  10.    'type'      => 'boolean',
  11.    'default'   => false,
  12.    ),
  13.    'displayAsDropdown' => array(
  14.    'type'      => 'boolean',
  15.    'default'   => false,
  16.    ),
  17.    ),
  18.    'render_callback' => 'render_block_core_archives',
  19.    )
  20. );
  21. `

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。