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

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

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark