こんにちは!のせっち@nosecchi01です。
Advanced Custom Fields PROを使って、自作ブロックを開発する際、ブロックの中にブロックを入れる方法を解説します。
ACF Blocksの基本的な使い方は知っている前提です。
詳しい使い方は下記の記事で解説しています。
2ステップで完了
ブロックの中にブロックを入れる方法は2ステップで完了です。
- functions.phpでブロックエディタ登録の際に
'jsx' => 'true'
を追加。 - テンプレートの任意の場所に
<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ステップで簡単に設定できる、