Strukturiere Deine Inhalte mit Nested-Blocks

Okay, hör zu, du willst also ein Block-Template mit einem Nested Block. Klingt fancy, aber eigentlich ist das total easy. Und weißt du was? Mit einem ACF-Block ohne Field wird das Ganze noch interessanter. Du kannst Core-Blocks oder ACF-Blocks einfügen und die Ausgabe erfolgt über InnerBlocks. Das klingt nach Zaubererei, aber ich zeige dir, wie es geht. Los geht’s!

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.