ACFでReactを書かずにブロックを自作する

5/8にACF5.8がリリースされました。
Betaから随分期間が空いていたので、このプロジェクト自体がリジェクトされるんじゃないか？とびびっていたのですが、ひとまず安心しました。
(別に5.8だからって、5/8じゃなくてもいいのに。。)
5.8からの特筆する機能としては、「ACF Blocks」でしょう(※PRO版のみ)。
今回は実際にブロックを作って遊んでみます。

概要

ACF Blocksでは "Block building without JavaScript" と言われている通り、JavaScriptを一切書かずにBlock作成が可能です。
出力するHTMLやCSSは自由に書けますし、もちろんACFのフィールドも使用できます。

目次へ戻る

とりあえず作る

5.8から追加されたacf_register_block_typeを使うことでブロックの定義を追加することができます。
(RC版ではacf_register_block)
とりあえず、ACFのフィールドをいくつか出力するブロックを作ってみました。

add_action( 'acf/init', 'my_block' );
function my_block() {

    if ( function_exists( 'acf_register_block_type' ) ) {
        acf_register_block_type(
            [
                'name'            => 'wp10block',
                'title'           => __( 'WP10block' ),
                'description'     => 'My WP10 block',
                'category'        => 'common',
                'icon'            => 'smiley',
                'keywords'        => [ 'wp10', 'my block' ],
                'render_callback' => 'my_block_callback',
            ]
        );
    }
}

function my_block_callback( $block ) {
    $image = get_field( 'my_image' );
    ?>
    <div style="background: #ff00ff">
        <p class="my-text"><?php the_field( 'my_text' ); ?></p>
        <img src="<?php echo $image['url']; ?>" />
        <p class="my-textarea"><?php the_field( 'my_textarea' ); ?></p>
    </div>

    <?php
}

ACFフィールドはテキスト、テキストエリア、画像を使ってみました。
Gutenbergの編集画面では下のように表示されます。

選択すると編集エリアにブロックが追加されます。
該当のブロックを選択すると、InspectorにACFの入力フィールドが表示されます。

かなり簡単にできてしまいました。

目次へ戻る

オプション

ブロック登録時、設定値でブロックの見た目や編集体験を変更することができます。
今回は「mode」と「enqueue_style」を使ってみます。

mode

編集エリアとInspectorの行き来が気持ち悪い場合は、以下のようにmodeを設定してみましょう。

'mode'            => 'auto'

この状態でブロックをクリックすると、ブロックが編集モードに切り替わります。
WordPressデフォのブロックは基本的にこの形ですので、合わせたい場合はこれがいいですかね。

enqueue_style

そのまんまで、CSSをenqueueする設定値です。
ACF Blocksではブロック毎にenqueueできます。

'enqueue_style'   => plugin_dir_url( __FILE__ ) . 'assets/my-block.css'

あとは適当にCSSを配置してあげればOKです。

目次へ戻る

最後に

JavaScriptを書かないブロック作成プラグインは複数出ていますが、やはりACFが一番安心感がありますね。無料版では使えないというのが若干勿体無い気もしますが。。
本家ではスライダーblockの作り方のレクチャーをやっているので、可能性は使う人次第ってとこなんですね。
今回はお遊びだったので、次回はもうちょっと使えるブロックのアイディアを探りたいと思います。

目次へ戻る

この記事をシェアする：

私たちと一緒に働きませんか？

「ACFでReactを書かずにブロックを自作する」はいかがでしたか？
株式会社プレスマンでは、WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

株式会社プレスマンの採用情報へ移動する