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.

Meer weten over deze prettige plug-in? Bekijk dan ons artikel over Advanced Custom Fields!

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.

[gist id=”fbc7e558017faf33ac8d3cae6cb0d10b” file=”functions.php”]

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.

[gist id=”eb47952fcf18bfe940748e16cb512613″ file=”functions.php”]

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.

[gist id=”5075dc06bb15c730cb62316226506208″ file=”content-testimonial.php”]

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

Kan ik je helpen met je website?

We leiden je graag rond in de online jungle. Zullen we vrijblijvend kennismaken?

Neem contact op

Niels Pilon

WordPress Specialist

0182 – 71 20 40
niels@fris.online

Meer artikelen over Websites

4 WordPress plug-ins die je wilt mijden

Wil je een snelle en effectieve WordPress website? Ontdek welke populaire plug-ins je dan beter niet kunt gebruiken.

Lees verder
tagWebsites
WordPress 5.8

WordPress 5.8 | Wat verandert er bij deze nieuwe release?

WordPress heeft op 20 juli een nieuwe release uitgebracht: WordPress 5.8. Wat is nieuw binnen deze update van de WordPress core? Lees het hier.

Lees verder
tagWebsites
snelheid_website_verbeteren

Snelheid van je website verbeteren? | Zo is een trage website verleden tijd

Is jouw website traag? Of valt het wel mee, maar wil je de snelheid van je website nog meer verbeteren? Ontdek hier onze 6 tips om je website sneller te maken.

Lees verder
tagWebsites