カスタムブロックでサーバー側の処理を走らせるようにする覚書
「registerBlockType」関数を使用する際、保存時の処理をサーバー側で実行するために「save」を外す必要があります。また、「attributes」に「source」を追加するとデータの受け渡しがうまくいかないことが分かりました。これはおそらく、「save」を使用する際に利用される(例えば、imgタグのsrcを取得するなど)ものだと解釈しています。描画には「render」でPHPファイルのパスを指定します。また、render.phpでは、テーマのテンプレートパーツのように使用できます。get_block_wrapper_attributes()を使用してクラス名などを取得することができます。また、「$attributes」には、block.jsonで設定したattributeが連想配列形式で入ってきます。ビジュアルエディタブロックの作成方法やregisterBlockType、block.jsonの書き方、render.phpで利用できる関数について理解するのに苦労する可能性があります。しかし、そこを乗り越えれば、WordPressのPHPの書き方に馴染むこともできるでしょう。
目次
やれるとは知っていたのですが、ちゃんとやったことがなかったので試してみました。
registerBlockType
からsave
を外す
保存時の処理をサーバー側で行います。そのため、src/index.js
ではsave
を消しましょう。
registerBlockType( metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit,
} );
attributesでsource
をつけるとデータの受け渡しがうまくいきませんでした。これはsave
を使うときに利用する(img
タグのsrc
を取ってくるなど)用途なのかなと今の時点では解釈しています。また、描画に利用するPHPファイルはrender
でパスを指定しましょう。
"attributes": {
"content": {
"type": "string"
}
},,
"render": "file:./render.php"
render.php
に表示する内容を書く
render.php
はテーマのテンプレートパーツのように使えました。get_block_wrapper_attributes()
でクラス名などが取得できます。
<p <?php echo get_block_wrapper_attributes(); ?>>
<?php echo esc_html( $attributes['content'] ); ?>
</p>
また、Globalの$attributes
に連想配列形式でblock.json
で設定したattributeが入ってくるとのことです。
作ってみて
block.json
またはregisterBlockType
の書き方と、render.php
で利用できる関数の種類の理解が初手で躓くポイントになるかもしれません。ただ、ここを抜けるとあとはWordPressでのPHPを書く流れに乗れないこともないのは大きそうです。