Gutenberg blocks met Advanced Custom Fields

Advanced Custom Fields is de meest populaire plugin voor het beheer van custom field data. Met de plugin kan je verschillende soorten velden toevoegen. Denk hierbij aan een tekstveld, colorpicker of datumveld. Het beheer van deze velden gaat via een gebruiksvriendelijke UI.

Er bestaat ook een zogenaamde flexible content field waarmee je meerdere layouts kunt aanmaken. Een ideale techniek om een pagina als legoblokken op te bouwen. De pagina kan naar wens ingericht worden door het gebruik van blokken. Juist, soortgelijk aan hoe Gutenberg werkt.

Bij Gutenberg wordt alle content namelijk ook opgesplitst in verschillende contentblokken. Gutenberg bestaat uit een aantal voorgedefinieerde blokken. Denk hierbij aan een paragraaf, een koptekst, een afbeelding of een quote. Hoe vet zou het zijn als we de flexibiliteit van Gutenberg kunnen combineren met Advanced Custom Fields. Ik heb goed nieuws. Met de release van ACF 5.8 is dit mogelijk. 

Eigen Gutenberg blok maken met ACF

Het aanmaken van een custom Gutenberg blok is vrij complex. Het vergt heel wat code om wat gedaan te krijgen. De nieuwe versie van Advanced Custom Fields neemt al dat werk uit handen. Met de functie acf_register_block registreer je een nieuwe blok. Vervolgens koppel je via de UI een velden groep aan deze blok. Deze koppeling werkt exact hetzelfde als de koppeling aan een post type of taxonomy term. Een aandachtspunt is dat deze data niet in de wp_postmeta tabel worden opgeslagen maar direct in de post_content.

Het registreren van een ACF-blok gaat als volgt.

add_action( 'acf/init', 'yourtheme_acf_init' );

function yourtheme_acf_init() {
	if ( ! function_exists( 'acf_register_block') ) {
		return;
	}

	acf_register_block( array(
		'name'            => 'panel',
		'title'           => __( 'Panel', 'yourtheme' ),
		'description'     => __( 'Shows a panel.', 'yourtheme' ),
		'render_callback' => 'yourtheme_acf_blocks_callback',
		'category'        => 'formatting',
		'icon'            => 'admin-comments',
		'keywords'        => array( 'panel', 'block' ),
	) );
}

Een callback functie bepaalt vervolgens de output van het ACF-blok. We maken hierbij gebruik van een generieke callback functie die voor elke ACF-blok gebruikt kan worden.

Met de get_template_part functie bepalen we welke template gebruikt moet worden. Het voordeel van deze constructie is dat de template eenvoudig kan worden overschreven door een child thema.

function yourtheme_acf_blocks_callback( $block ) {
	$block_name = str_replace( 'acf/', '', $block['name'] );

	get_template_part( 'template-parts/blocks/content', $block_name );
}

We maken een nieuwe template genaamd content-panel.php en plaatsen deze in /template-parts/blocks/. De template bevat de code voor het tonen van de ACF data:

<?php

if ( ! function_exists( 'the_field' ) ) {
	return;
}

?>
<div class="panel panel--primary">
	<div class="panel__heading">
		<?php the_field( 'yourtheme_panel_heading' ); ?>
	</div>

	<div class="panel__content">
		<?php the_field( 'yourtheme_panel_content' ); ?>
	</div>
</div>

Op deze manier kan je alle type content ontsluiten en is het beheer ervan een peuleschil.