GutenbergでServerSideRender を使う場合の注意点

GutenbergでServerSideRender 使ってブロックを作る機会があったのですが、いざ完成して動作するようになったものの、コンソールに、

wp.components.ServerSideRender is deprecated. Please use wp.serverSideRender instead.

という警告が表示されていることに気付きました。内容としては

「ServerSideRenderコンポーネントの場所がwp.componentsからwpに移ったのでそっちを使ってね。」

という意味になります。この記事を書いた時点ではまだ問題なく動いていますが、deprecaedと書いてあるのでそのうち動かなくなることが予想されます。指示通り移行すれば良いのですが、少し躓いたのでメモを残しておきます。

古いServerSideRenderの読み込み方

今回、ServerSideRenderを使うにあたって下記ブログを参考にしました。

非常に分かりやすく解説されていてとても助かったのですが、この記事のコードはServerSideRenderを次のように読み込んで使う書き方でした。

const { ServerSideRender } = wp.components;
・・・略・・・
<ServerSideRender
		block="hoge-blocks/block"
		attributes={props.attributes}
/>

推奨される方法で読み込む場合、ついつい次のように書きたくなります。ポイントは1文字目が小文字になっていることです。

const { serverSideRender } = wp;
・・・略・・・
<serverSideRender // コンポーネント名も1文字目を小文字にしたいが…
		block="hoge-blocks/block"
		attributes={props.attributes}
/>

ところが、こう書くとJSXでは意図通りに動きません。エラーもでないです。

上手く動かない原因はJSXではユーザー定義のコンポーネント名に小文字から始まるものは使えないからです。React初級者としてはそんなことを知らずに、「なぜ？？」としばらく悩んでしまいました（苦笑）

解決方法は次のように書いてserverSideRenderにServerSideRenderを割り当ててあげます。

const { serverSideRender: ServerSideRender } = wp;
・・・略・・・
<ServerSideRender
		block="hoge-blocks/block"
		attributes={props.attributes}
/>

いろいろ理由はあると思うのですが、もう少し分かりやすくしてほしかった…。というかReactをもっときちんと勉強しなければならないですね。