ACF Blocksでブロックの中にブロックを入れる方法【InnerBlocks】

こんにちは!のせっち@nosecchi01です。

Advanced Custom Fields PROを使って、自作ブロックを開発する際、ブロックの中にブロックを入れる方法を解説します。

ACF Blocksの基本的な使い方は知っている前提です。
詳しい使い方は下記の記事で解説しています。

2ステップで完了

ブロックの中にブロックを入れる方法は2ステップで完了です。

  1. functions.phpでブロックエディタ登録の際に'jsx' => 'true'を追加。
  2. テンプレートの任意の場所に<InnerBlocks />タグを追加。

functions.phpでブロックエディタ登録の際に'jsx' => 'true'を追加。

下記のように記述すればOKです。

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') ) {
    acf_register_block_type(array(
      'name'              => 'testimonial',
      'title'             => __('Testimonial'),
      'description'       => __('A custom testimonial block.'),
      'render_template'   => 'template-parts/blocks/testimonial/testimonial.php',
      'category'          => 'formatting',
      'icon'              => 'admin-comments',
      'keywords'          => array( 'testimonial', 'quote' ),
      'supports'			=> array(
				'align' => true,
				'mode' => false,
				'jsx' => true
			),
    ));
  }
}

テンプレートの任意の場所に<InnerBlocks />タグを追加

ブロックエディタのテンプレートを作成する際、中にブロックを差し込みたい場所に<InnerBlocks />と書くだけです。

<?php

/**
 * Testimonial 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');

?>
<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>
    <InnerBlocks />
</div>

これで作成した自作ブロックの中に更にブロックを入れることができます!

まとめ

  • ACF Blocksでブロックの中にブロックを入れることができる。
  • 2ステップで簡単に設定できる、

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。