Gutenberg: eigene Blöcke mit ACF bauen

Mit der Funktion acf_register_block() sind benutzerdefinierte Blöcke in kurzer Zeit einsatzbereit.

Neue Blockkategorie voransetzen

function my_plugin_block_categories( $categories, $post ) {
    if ( $post->post_type !== 'my_post_type' ) {
        return $categories;
    }
    return array_merge(
        array(
            array(
                'slug' => 'custom-category',
                'title' => 'My Custom Category'
            ),
        ),
        $categories
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );
Code-Sprache: PHP (php)

Potentiell können einzelne oder alle Standardkategorien ausgeschlossen oder neu angeordnet werden, resp die Standardkategorien auf im Inhaltstyp erwünschte beschränkt.

Die Standardkategorien sind

• common
• formatting
• layout
• widgets
• embed

function my_plugin_block_categories( $categories, $post ) {
    if ( $post->post_type !== 'my_post_type' ) {
        return $categories;
    }
    return array(
        array(
            'slug' => 'custom-category',
            'title' => 'My Custom Category'
        ),
        array(
            'slug' => 'common',
            'title' => 'Allgemeine Blöcke'
        ),
        array(
            'slug' => 'formatting',
            'title' => 'Formattierung'
        ),
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );
Code-Sprache: PHP (php)

Einen oder mehrere ACF-Blöcke registrieren

function custom_block_acf_init() {
	// check function exists
	if( function_exists('acf_register_block') ) {
		acf_register_block(array(
			'name'		=> 'my-custom-block',
			'title'		=> __('My Custom Block'),
			'description'		=> __('My custom block description'),
			'render_callback'	=> 'custom_block_render_callback',
			'category'		=> 'custom-category',
			'keywords'		=> array( 'some', tags' ),
        ));   
    }
}      
add_action('acf/init', 'custom_block_acf_init');
Code-Sprache: PHP (php)

Templates einbinden (hier in einem Plugin, kann auch ein Theme sein)

function custom_block_render_callback( $block ) {
	
	// convert name ("acf/my-custom-block") into path friendly slug
	$slug = str_replace('acf/', '', $block['name']);

	if( file_exists( plugin_dir_path( __FILE__ ) . "templates/block/content-{$slug}.php") ) {
		include( plugin_dir_path( __FILE__ ) . "templates/block/content-{$slug}.php" );
	}

}
Code-Sprache: PHP (php)