カスタムフィールドを Gutenberg ブロックに追加する方法

ACF Pro の ACF Blocks を使って、カスタムフィールドを Gutenberg ブロックに追加する方法紹介します。
例えば、任意のブロックを追加したいときに便利な方法です。

1. ACFでフィールドグループを作成
2. テーマ側でブロック登録
3. テンプレート作成
4. フィールドグループの「表示設定」
5. エディターで確認

ACFでフィールドグループを作成

まずは ACF でフィールドグループを作成します。
以下はフィールドグループの作成例です。
・名前（Text）
・概要文（Textarea）
・URL（URL）

テーマ側でブロック登録

.

function.php に以下を追加してテーマ側でブロック登録をできるようにします。

// functions.php

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

  if( function_exists('acf_register_block_type') ) {

    acf_register_block_type(array(

      'name'              => 'custom-info',

      'title'             => '名前＋概要＋URL',

      'render_template'   => 'template-parts/blocks/custom-info.php',

      'category'          => 'formatting',

      'icon'              => 'id',

      'keywords'          => array( '名前', '概要', 'リンク' ),

    ));

  }

});

テンプレート作成

テーマ側でブロック登録したテンペレートを作成します。
以下の階層にテーマを作成することを想定して作成します。

template-parts/blocks/custom-info.php

<div class="custom-info-block">

  <h3><?php the_field('名前'); ?></h3>

  <p><?php the_field('概要文'); ?></p>

  <a href="<?php the_field('URL'); ?>" target="_blank" rel="noopener">リンクはこちら</a>

</div>

エディターで確認

投稿や固定ページでブロックを追加。
対象ブロックをクリックすると、右カラム（ブロック設定欄）またはブロック内に入力フィールドが表示されるようになります。

まとめ

ACF Pro の ACF Blocks を使って、カスタムフィールドを Gutenberg ブロックに追加する方法紹介しま