Herbruikbare blokken aanmaken in WordPress?

Er zijn van die momenten dat je zou willen dat je bepaalde gemaakte blokken kon hergebruiken. Goed nieuws! Dat kan! Met herbruikbare blokken! In dit artikel gaan we kijken naar de mogelijkheden.

Blokken

WordPress maakt gebruik van de Gutenberg editor. Deze editor werkt met blokken. Voor elk type content is er wel een blok te vinden. Het fijne is dat blokken ook te combineren zijn. Kijk maar eens naar het volgende voorbeeld.

In het voorbeeld hierboven heb ik 4 verschillende blokken gecombineerd. Ik ben begonnen met het blok Kolommen. In elke kolom heb ik daarna een Afbeelding blok, een Heading (H3) blok en een Paragraaf blok aangemaakt.

Stel dat ik deze opzet op een andere pagina opnieuw wil gebruiken, dan is het zonde als ik al deze stappen nog een keer zou moeten doen. Gelukkig hebben we daarvoor “Herbruikbare blokken”.

Blokken selecteren

Om een herbruikbaar blok aan te maken moet ik eerst het ‘omringende’ blok selecteren. In dit geval is dat het Kolommen blok. Je zal merken dat het lastig, of misschien wel onmogelijk, is om het Kolommen blok nu te selecteren.

Gelukkig zijn daar handige manieren voor. Klik maar eens op één van de afbeeldingen. Er wordt dan boven de afbeelding een ‘pop-up werkbalk’ geopend. Als je links in die werkbalk over het bloktype beweegt, zie je dat er een icoon boven verschijnt.

Dat icoon is van het bovenliggende blok. Klik je op dat icoon, dan wordt het bloktype er boven geselecteerd.
Tof hè!
Dit kun je net zo vaak doen, totdat je bij het laatste ‘omringende’ blok bent.

Een andere manier om dit te doen is door het gebruiken van de pijl toetsen. Klik nog maar eens op de afbeelding en klik dan op pijl omhoog op het toetsenbord. Je zal zien, dat er nu steeds een blok ‘hoger’ wordt geselecteerd.

Toevoegen aan herbruikbare blokken

Top! Selecteer nu het ‘omringende’ blok Kolommen. In de ‘pop-up werkbalk’ klik je rechts op de drie puntjes. Er verschijnt nu een menu van het blok. Kies in dit menu voor “Aan herbruikbare blokken toevoegen”. (zie afbeelding rechts)

Aan de rechterkant zie je nu het menu van het nieuwe herbruikbare blok. Verander de naam van dit blok, zodat je dit blok makkelijk terug kunt vinden. (zie afbeelding onder)

Ik probeer de naam altijd zo beschrijvend mogelijk te maken. In dit geval verander ik de naam in Drie kolommen met afbeelding en info, zodat ik weet wat dit blok doet.

Mooi we hebben nu een herbruikbaar blok aangemaakt. Nu nog hergebruiken 🙂

Herbruikbaar blok hergebruiken

Om een herbruikbaar blok in te voegen, klik ik bovenin op het plus (+) icoon. Ik krijg dan een overzicht met de beschikbare blokken. Bovenin staan drie ‘tabbladen’. Blokken, Patronen en… Herbruikbaar.

Klik op Herbruikbaar. Nu krijg je alle herbruikbare blokken te zien. Als ik over mijn herbruikbare blok ‘hover’ krijg ik een voorbeeld te zien hoe dat blok er uit ziet.

Klik op het herbruikbare blok. Et voila… binnen 2 seconden heb je precies hetzelfde blok nog een keer.

Herbruikbaar blok aanpassen

Als je een herbruikbaar blok wil aanpassen is het belangrijk om te weten dat de wijzigingen op al deze blokken worden toegepast. Dat is handig als je precies dezelfde blokken op verschillende pagina’s wil. Zoals een CTA button bijvoorbeeld.

Maar dat is niet handig voor de layout die ik net heb aangemaakt. Ik wil wel dezelfde layout, maar met andere afbeeldingen en andere teksten.

Gelukkig kan dat ook! Hoe?
Selecteer je herbruikbare blok. Weet je het nog? Klik op een afbeelding en dan net zo vaak pijltje omhoog op het toetsenbord, totdat het herbruikbare blok is geselecteerd. Klik dan in de ‘werkbalk’ op het icoon met de twee overlappende vierkantjes.

Het herbruikbare blok, wordt nu geconverteerd naar een regulier blok. Je kunt nu met een gerust hart wijzigingen doorvoeren die alleen voor dit blok van toepassing zijn.

Zoals je ziet is alleen dit blok gewijzigd. Dat heeft me nog geen 10 seconden gekost!

Pagina template maken

Ik hoop dat je het nut nu inziet van herbruikbare blokken en dat je weet hoe je deze moet maken. Maar er is nog meer mogelijk! Wat? Nog meer moois? Zeker weten!

Stel nu dat je een hele pagina als herbruikbaar blok wilt gebruiken om zo een template te creëren voor je andere pagina’s. Kan dat? Dat kan!

En dat is helemaal niet moeilijk!
Het enige wat je hoeft te doen is alle blokken selecteren. Dit kun je doen met CTRL + A. Let op: de eerste keer zal waarschijnlijk alleen de inhoud van het actieve blok geselecteerd worden. Druk dan nog een keer op CTRL + A.

Nu is de hele pagina geselecteerd. Bovenaan de pagina zie je twee icoontjes verschijnen. Klik op het icoontje met de drie puntjes en kies voor: “Aan herbruikbare blokken toevoegen”. Geef je template een naam en je bent klaar.

Op je nieuwe pagina voeg je dit betreffende blok in en klik je op: naar reguliere blokken converteren (Belangrijk!)
En je hebt je template om mee te werken.

Natuurlijk is het niet handig om een hele pagina als template te nemen, aangezien je dan complete stukken tekst moet gaan overschrijven. Wat ik vaak doe is eerst uittekenen op papier hoe ik mijn pagina template wil hebben.

Daarna maak ik een nieuwe pagina, waarop ik alle hoofdbestanddelen van mijn template invoeg. Dus waar de kolommen moeten komen, een aantal headings, plaatsen voor afbeeldingen, (waar ik dan een placeholder afbeelding neerzet) enzovoort. Dit sla ik dan op als herbruikbaar blok.

Op de nieuwe pagina voeg ik het herbruikbare blok dan toe. Ik converteer het naar een regulier blok 😉 en vervang de placeholders met de daadwerkelijke afbeeldingen.

Tot slot wil ik nog meegeven dat het werken met Gutenberg soms frustrerend kan zijn. Maar experimenteer en probeer, want alleen dan krijg je het voldoende onder controle.

Wil je meer van dit soort tutorials of kan ik je ergens mee helpen, dan hoor ik dat graag!