Gutenburg Advanced Custom fields logo

Gutenberg block maken met Advanced Custom Fields

De release van WordPress 5 die de nieuwe Gutenberg editor zal niet lang meer op zich wachten. Een van de Gutenberg functies zijn zogenaamde ‘blocks’. Zelf kan je ook blocks toevoegen en dat kan vrij eenvoudig met behulp van Advanced Custom Fields. Hoe? Dat leggen we je graag uit.

Gutenberg, de nieuwe editor

Over de nieuwe Gutenberg editor is al veel geschreven. De weg naar de nieuwe Gutenberg editor is een lange weg geweest die niet geheel soepel verlopen is. Op het moment van schrijven is Gutenberg nagenoeg klaar om aan WordPress toegevoegd te worden in plaats van een losse plugin te zijn.

Werken met Gutenberg blocks

Gutenberg laat je op een geheel andere manier content creëren. De oude editor herken je niet meer terug en is vervangen door een lege canvas die je kan gaan vullen met zogenaamde blocks. Deze blocks bestaan uit verschillende soorten content. Denk aan een paragraaf, een opsomming, een quote, afbeelding, tweet, video een kolom.

Al deze blokken kan je individueel plaatsen in je content op de plek die je wil. Daarnaast kan je een blok ook opslaan om later op een andere pagina nogmaals te gebruiken.

Interface Gutenberg editor

Naast de standaard blokken die in WordPress core zitten kan je zelf ook custom blokken aan je website toevoegen. Alleen hoe doe je dat?

Zelf een block toevoegen

Gutenberg is grotendeels geschreven in JavaScript en ook het toevoegen van een eigen block vraagt om de nodige JavaScript kennis. Voor iemand die weinig of geen JavaScript kennis heeft kan dit nogal intimiderend overkomen. Op de WordPress codex is uitgebreide documentatie te vinden hoe je een block toevoegt maar het kan ook eenvoudiger.

Door gebruik te maken van de nieuwe Gutenberg functionaliteit van Advanced Custom Fields kan je een eigen block toevoegen zonder JavaScript te gebruiken. Voor iedereen die al eerder met Advanced Custom Fields gewerkt heeft zal een groot deel van bekend voorkomen.

Om gebruik te maken van de Gutenberg block functionaliteit van Advanced Cust Fields dien je de 5.8 versie van de plugin te gebruiken. Versie 5.8 is momenteel in Beta en kan je downloaden via de account pagina van Advanced Custom Fields. Je hebt hiervoor een Pro licentie nodig.

Custom Advanced Custom Fields Gutenberg blok

Het toevoegen van het block gaat door middel van het schrijven van een functie. Hieronder vind je een voorbeeld met een uitleg van de gebruikte velden.

<?php
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check of de functie bestaat
if( function_exists('acf_register_block') ) {
// Custom Testimonail block registrerend
acf_register_block(array(
'name' => 'testimonial',
'title' => __('Testimonial'),
'description' => __('Mijn ACF testimonial block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'layout', // Zie https://wordpress.org/gutenberg/handbook/block-api/
'icon' => 'admin-links', // Dashicon icon class naam
'keywords' => array( 'testimonial', 'quote' ),
));
}
}
view raw functions.php hosted with ❤ by GitHub

Wat doet de code:

Name
Dit is de unieke naam van het blok. ACF zorgt automatisch voor de namespacing van je naam.

Title
Dit is de titel zoals die getoond wordt in de Gutenberg editor.

Render Template
De link naar het template bestand die je block gaat gebruiken. Dit bestand wordt gebruikt voor zowel gebruik aan de font-end als in de preview modus van Gutenberg. De link kan een relatieve URL zijn binnen je thema, of het volledige pad naar welk bestand dan ook. In dit voorbeeld gebruiken we de naam van een functie, hier kom ik later op terug.

Category
Deze waarde bepaald op welke plek je block getoond worden binnen het ‘Blok toevoegen’ scherm in Gutenberg. De waardes die WordPress standaard gebruikt zijn: common, formatting, layout, widgets en embed.

Icon
Bepaalt welk icon er gebruikt wordt voor je block. Dit kan een dashicon zijn of een custom SVG icon

Mode
Dit bepaalt hoe je block getoond wordt in de Gutenberg editor. Als je deze waarde op ‘preview’ zet dan wordt het block getoond zoals het er aan de front end uit ziet. De inhoud van je block kan je dat wijzigen in de sidebar van de Gutenberg editor.

ACF Groep aanmaken

Nadat je deze code hebt toegevoegd aan je thema in het functions.php bestand kan je een nieuwe groep aanmaken met Advanced Custom Fields. Dit gaat op de bekende wijze met als enige verschil dat er een nieuwe optie is toegevoegd waar je deze groep wil laten tonen. Deze nieuwe optie heet ‘Blok’ en toont de naam, of namen, van jouw eigen custom blocks.

Advanced Custom fields Testimonial Groep

Het block tonen

Nadat je jouw eigen block hebt toegevoegd aan je thema en een ACF groep hebt aangemaakt is er nog een stap te gaan. Je al moeten bepalen hoe jouw eigen block eruit moet komen te zien.

In feite verschilt dit niet veel ten opzichte van hoe je een regulier ACF veld toont op je website. Het verschil zit hem in het feit dat je HTML en PHP wordt aangeroepen via een functie.

Tijdens het registreren van je block had ik het over de naam van een functie bij de Render Template optie. Deze functie zorgt ervoor dat de HTML van je block wordt gegenereerd en dit is ook de plek waar je jouw eigen code kan gaan schrijven.
ACF raadt hiervoor een modulaire benadering aan door gebruik te maken van een generieke callback functie. Dit wordt mogelijk gemaakt door de $block parameter te gebruiken.

<?php
function my_acf_block_render_callback( $block ) {
// convert name ("acf/testimonial") into path friendly slug ("testimonial")
$slug = str_replace('acf/', '', $block['name']);
// template bestand vanuit de "template-parts/block" map includen
if( file_exists(STYLESHEETPATH . "/blocks/content-{$slug}.php") ) {
include( STYLESHEETPATH . "/blocks/content-{$slug}.php" );
}
}
view raw functions.php hosted with ❤ by GitHub

Block template opmaken

Nadat je hebt bepaalt waar ACF de code kan vinden van jouw eigen block is het aan jou om deze code te schrijven. Zoals ik al eerder schreef zit hier weinig verschil in ten op zichte van een reguliere ACF groep.

Het verschil zit hem erin dat je specifieke styling van je block kan instellen en kan bepalen hoe de uitlijning van je block moet zijn.

<?php
/**
* Block Name: Testimonial
*
* Het template bestand wat we gebruiken voor ons Testimonial block
*/
// afbeelding veld ophalen (array)
$avatar = get_field('afbeelding');
// id attribuut aanmaken voor specifieke styling
$id = 'repeater-' . $block['id'];
// uitlijnings class aanmaken ("alignwide") vanuit de blok instellingen ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>
<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
<p><?php the_field('quote'); ?></p>
<cite>
<img src="<?php echo $avatar['url']; ?>" alt="<?php echo $avatar['alt']; ?>" />
<span><?php the_field('naam'); ?></span>
</cite>
</blockquote>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php the_field('achtergrondkleur'); ?>;
color: <?php the_field('text_color'); ?>;
}
</style>

De generieke styling van je block kan je makkelijke toevoegen door gebruik te maken van de admin_enqueue_scripts en wp_enqueue_scripts acties.

WordPress Webdesign - website lanceren

Tijd voor een slimme WordPress website?

Misschien is dit wel een mooi moment om eens goed te kijken naar je website. Past die eigenlijk nog wel bij je organisatie? Of wordt het tijd voor verFRISsing! We helpen je daar graag bij. Aansluiting op je doelgroep en gebruiksvriendelijkheid in beheer zijn daarbij belangrijke uitgangspunten!

Ontdek de mogelijkheden!

Ook interessant

Cookies en privacy

Je weet dat ze er zijn: cookies. Per categorie kan je jouw keuze voor het gebruik van cookies aangeven. Deze methode komt overeen met de nieuwe AVG (ingangsdatum 25 mei 2018). Wij hebben de cookies van Google Analytics volledig geanonimiseerd en daarom mogen wij die plaatsen zonder toestemming. Op onze Privacy Pagina kan je hier meer over lezen.

Privacy policy | Sluiten
Instellingen