WordPress

カスタムブロックでサーバー側の処理を走らせるようにする覚書

「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を書く流れに乗れないこともないのは大きそうです。

ブックマークや限定記事（予定）など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

アカウントを作成する
広告ここから
広告ここまで

Related Category posts