ACFは制作する側からみると便利なのですが、ブロックエディタに切り替わってからは、カスタムフィールドの入力欄がブロックエディタとは別れてしまう点が利用者にとっては直感的ではなくなってきていると感じていました。
ACF proにはACF BlockというGutenbergのブロックを作れる機能があります。

ACF Blockを使うと、カスタムフィールド入力欄がGutenberg blockに組み込まれます。ユーザーから見ると使いやすくなると思いました。
早速使ってみたらACF blockは結構分かりにくかったので、まとめておこうかと思います。
ACF Blockを使う手順
基本、本家のACF Blockの説明通りに行えば同じことはできます。
迷ってしまうところを補足して説明していきます。
手順1:Blockを登録します
ブロックエディタで呼び出すBlockを定義します。この定義だけでブロックエディタからBlockを追加することができます。
使うのはacf_register_block_typeです。

本家にあるacf_register_block_typeの記述例でわかりにくいポイントは4つあります。
- name
日本はNG。
最初、日本語で書いていたらブロックが一覧に表示されず、原因がわからなくてかなりまいった。 - title
ブロックエディタで呼び出すときのブロック名になる。
日本語OK。 - render_template
子テーマ内に配置するのが一般的?
functions.phpに書かず、code snippetsに書く場合も子テーマからの相対パスで大丈夫。 - icon
“dashicons-admin-comments”の“dashicons-“部分はいらない
使用できるアイコン一覧は、こちらから確認。
add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {
// Check function exists.
if( function_exists('acf_register_block_type') ) {
// register a testimonial block.
acf_register_block_type(array(
'name' => 'testimonial', // 日本語NG
'title' => __('Testimonial'),//ブロックの名前 日本語OK
'description' => __('A custom testimonial block.'),
'render_template' => 'template-parts/blocks/testimonial/testimonial.php', // 子テーマからの相対パスでOK
'category' => 'formatting',
'icon' => 'admin-comments', // アイコン名は注意
'keywords' => array( 'testimonial', 'quote' ),
));
}
}
手順2:カスタムフィールドを作成します
普通にACFでカスタムフィールドを作る手順で大丈夫です。
ただし、通常と異なるのは『位置』のルールです。
このフィールドグループを表示する条件:
- ブロック
- 等しい
- ブロック名(acf_register_block_typeのtitleで登録した名前)
この指定をしなくても、ブロックエディタでブロックを呼び出してエディタに配置できますが、ブロックの中身が何も表示されません。
なので、もし忘れていると中々気が付きにくいポイントです。
手順3:Blockの表示テンプレートを作成します
手順1で定義したrender_templateの中身をphpファイルで作成します。
先頭のコメント部分が重要で、このテンプレート内部で参照できるパラメータの説明があります。この部分はどのブロックも共通で使える部分だと思います。
カスタムフィールドの入力部分はテンプレートに定義する必要はありません。あくまでサイトで表示される部分のみです。
カスタムフィールドの定義で『位置』が正しく設定されていれば、ブロックを配置するとサイドバーエリアやブロック内に入力欄が自動的に表示されます。
<?php
//------------------ ここから共通 ----------------------------
/**
* ACF Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// Create id attribute allowing for custom "anchor" value.
$id = 'testimonial-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'testimonial';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
//------------------ ここまで共通 ----------------------------
//---------- カスタムフィールドの読み込みとデフォルト値 ---------
// Load values and assign defaults.
$text = get_field('testimonial') ?: 'Your testimonial here...';
$author = get_field('author') ?: 'Author name';
$role = get_field('role') ?: 'Author role';
$image = get_field('image') ?: 295;
$background_color = get_field('background_color');
$text_color = get_field('text_color');
//---------- カスタムフィールドの読み込みとデフォルト値 ---------
//---------- ここからHTML表示部分 ----------
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<blockquote class="testimonial-blockquote">
<span class="testimonial-text"><?php echo $text; ?></span>
<span class="testimonial-author"><?php echo $author; ?></span>
<span class="testimonial-role"><?php echo $role; ?></span>
</blockquote>
<div class="testimonial-image">
<?php echo wp_get_attachment_image( $image, 'full' ); ?>
</div>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php echo $background_color; ?>;
color: <?php echo $text_color; ?>;
}
</style>
</div>
ACF Blockを使うメリットはあるか?
クライアントワークなどではカスタムフィールドを意識しなくてよくなるので便利だと思います。
リッチリザルト対応させたいものなど、ブロックのテンプレートに埋め込んでしまえば簡単に対応できるようになるので、便利だとおもいます。
ブロックとして一ページ内に複数のブロックを置けてしまうので、テンプレート外からのカスタムフィールド管理は複雑になると思います。CSVなどで流し込む用途には従来の方法の方が良いと思います。
まとめ
ACF Blockは公式の例をそのまま使えば表示できます。公式の例を一度なぞっていれば成功体験があるのでそれほど苦労せずに行けると思います。私の場合は、公式の例をまじめに見ずにいきなり自分で書き始めたのでトラブルシュートが結構大変でした。
一度表示できるようになってしまうと迷う部分はほとんどないので、公式の例をなぞっておくことをお勧めします。