Nested Blocks

Ein Block-Template mit einem Nested Block kann eine interessante Lösung sein, vorallem mit einem ACF-Block ohne Field. Es können ACF- wie auch Core-Blocks verwendet werden, die Ausgabe erfolgt über InnerBlocks.

Zuerst werden in der functions.php zwei Blöcke erstellt. Der Block Icons enthält ein ACF-Field, der Block Angebot nicht.

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

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        acf_register_block_type( array(
            'title'			=> 'Icons',
            'name'			=> 'icons',
            'render_template'   => 'blocks/acf_icons/block.php',
            'mode'			=> 'preview',
            'supports'		=> [
                'align'			=> false,
                'anchor'		=> true,
                'customClassName'	=> true,
                'jsx' 			=> true,
            ]
        ));
        
        acf_register_block_type( array(
        	'title'			=> 'Angebot',
        	'name'			=> 'angebot',
            'render_template'   => 'blocks/acf_angebot/block.php',
        	'mode'			=> 'preview',
        	'supports'		=> [
        		'align'			=> false,
        		'anchor'		=> true,
        		'customClassName'	=> true,
        		'jsx' 			=> true,
        	]
        ));
    }
}  

Im Render-Template acf_angebot/block.php wird das Template erstellt und ausgegeben:

Zuerst die Klassen und ID abfragen

$classes = ['my_supidupi_block'];
if( !empty( $block['className'] ) ):
    $classes = array_merge( $classes, explode( ' ', $block['className'] ) );
endif;
if( !empty( $block['align'] ) ):
    $classes[] = 'align' . $block['align'];
endif;

$anchor = '';
if( !empty( $block['anchor'] ) ):
	$anchor = ' id="' . sanitize_title( $block['anchor'] ) . '"';
endif;

Dann das Template erstellen

$template = array(
	array('core/group', array(), array(
		array('acf/icons', array('data' => array("field_624e5b8eba67f" => "smiley"),'mode' => 'edit')),
		array('core/heading', array('level' => 2,'content' => 'Heading',
		)),    
	)),
    
	array('core/paragraph', array(
		'content' => 'My paragraph',
	)),
);

und schliesslich ausgeben:

echo '<div class="' . join( ' ', $classes ) . '"' . $anchor . '>';
	echo '<InnerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '"  />';
echo '</div>';

Hier das ganze Render-Template für acf_angebot/block.php:

$classes = ['my_supidupi_block'];
if( !empty( $block['align'] ) ):
    $classes[] = 'align' . $block['align'];
endif;

$anchor = '';
if( !empty( $block['anchor'] ) ):
	$anchor = ' id="' . sanitize_title( $block['anchor'] ) . '"';
endif;

$template = array(
	array('core/group', array(), array(
		array('acf/icons', array('data' => array("field_624e5b8eba67f" => "smiley"),'mode' => 'edit')),
		array('core/heading', array('level' => 2,'content' => 'Heading',
		)),    
	)),
    
	array('core/paragraph', array(
		'content' => 'My paragraph',
	)),
);


echo '<div class="' . join( ' ', $classes ) . '"' . $anchor . '>';
	echo '<InnerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '"  />';
echo '</div>';

Hier ist der Code abgelegt und hier findest Du eine Liste mit sämtlichen Block-Attributen.