WPLounge
Gutenberg deel 3
Home » WordPress Gutenberg » Gutenberg Blokken

Gutenberg Blokken

In dit artikel zullen we laten zien hoe je binnen de Gutenberg editor blokken kan toevoegen en aanpassen. Dit is deel 3 van de Gutenberg Handleiding

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Blokken toevoegen en aanpassen

Je kunt in Gutenberg een nieuw blok toevoegen door links bovenin de Editor op de “Plus”-knop te klikken. Je hoeft dit niet te doen als je alleen een nieuwe alinea wilt beginnen, dan volstaat een simpele “Enter” om een nieuw alinea-blok toe te voegen.

Een blok toevoegen

Om een nieuw blok aan de Editor toe te voegen, klik je links bovenin op de “Plus”-knop en selecteer je het type “blok” dat je wilt gebruiken (zie ook de onderstaande video). Je kunt hier zoeken naar een blok, of direct één van de meest gebruikte blokken kiezen.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

In dit voorbeeld zal ik een afbeelding toevoegen:

Zoals je kunt zien krijg je in de balk rechts direct alle instellingen te zien voor het blok dat je aan het bewerken bent. Je kunt zo heel snel aanpassingen doen aan je content.

Een blok aanpassen

Als je een blok in Gutenberg selecteert, kun je de instellingen voor dit blok direct aanpassen in de rechterbalk. In het onderstaande voorbeeld bewerk ik een tekstblok zodat deze zijn eigen opmaak krijgt. Zoals je kunt zien is het heel eenvoudig om op deze manier speciale blokken aan je pagina toe te voegen. In de klassieke Editor was dit een stuk lastiger, omdat je dan zelf met HTML en CSS aan de slag moest.

Een blok verwijderen

Het kan natuurlijk dat een bepaald blok niet is gelukt. Je kunt een blok dan heel eenvoudig verwijderen door op het “More options”-icoontje te klikken (rechts naast het blok) en vervolgens op “Verwijder blok” te klikken. Het is ook mogelijk een blok te verwijderen met de toets combinatie Shift+Alt+Z.

Blok verwijderen

Herbruikbare blokken

Eén van onze favoriete features van Gutenberg heet “Herbruikbare blokken”. Hiermee kun je een blok dat je hebt gemaakt opslaan als herbruikbaar blok, waardoor je deze makkelijk kunt hergebruiken in meerdere pagina’s en berichten. Voor veel doeleinden heb je dus geen shortcode meer nodig, maar kun je gewoon een herbruikbaar blok gebruiken.

Herbruikbare blokkenOpslaan als herbruikbaar blok

Als je een blok hebt gemaakt dat je wilt gaan gebruiken als herbruikbaar blok, dan klik je naast het blok op het “More options”-icoontje (het icoontje dat je ook gebruikt als je een blok wilt verwijderen). Zodra je op deze knop klikt, kun je een naam invullen voor je shared block en deze vervolgens opslaan.

Herbruikbare blokken gebruiken

Zodra je één of meerdere herbruikbare blokken hebt, kun je deze gebruiken door een nieuw blok toe te voegen in Gutenberg. Klik vervolgens op ‘alles bekijken‘ en dan op ‘Herbruikbaar‘ om je opgeslagen blokken te gebruiken.

Op deze manier kun je heel gemakkelijk elementen laten terugkeren op meerdere pagina’s.

Herbruikbare blokken aanpassen

Wanneer je op één pagina aanpassingen doet aan een herbruikbaar blok, zullen deze aanpassingen overal (waar het herbruikbare blok gebruikt wordt) zichtbaar worden.

Herbruikbaar groep blokkenBlokken Groeperen

Een andere handige optie is om blokken te groeperen. Je kan van meerdere blokken een groep maken, bijvoorbeeld een paragraaf, een afbeelding en een knop. Selecteer de blokken door twee keer de sneltoets CTRL + A te gebruiken en klik vervolgens op ‘groeperen‘. Deze groep kan je dan opslaan als een herbruikbaar blok. Dit maakt het makkelijk om de groep blokken opnieuw te gebruiken in een nieuwe pagina. Bij het toevoegen van een nieuw blok kan je nu kiezen om de opgeslagen groep als een blok te gebruiken.

Beoordeel dit artikel

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

3 reacties

  • Beste Roger,
    Handige uitleg. Waar ik alleen tegenaan loop is dat bij het verslepen van een herbruikbaar blok naar een andere positie in dezelfde post het blok ‘kapot’ gaat. De inhoud verdwijnt, er verschijnt een balk met een plus er in en via Beheer Herbruikbare blokken zie ik dat de inhoud van het blok leeg is. Hoe is dat te voorkomen?

    • Beste Nico,
      Dit is niet normaal gedrag, het lijkt mij een bug. Maar er zijn vele oorzaken mogelijk. Voor de hand liggende oorzaken zijn bijvoorbeeld een conflicterend thema of plugin. Dit kun je eventueel testen door een ander (standaard) thema te activeren. Bij de plugins kun je ze allemaal uitzetten en als het probleem dan weg is één voor één weer aanzetten om de boosdoener te achterhalen. Het kan ook om een bug gaan, daarvoor kun je de WordPress.org site checken om te zoeken naar soortgelijke problemen, bijvoorbeeld hier: https://core.trac.wordpress.org/ticket/52790. Wil je je live site niet verstoren? Gebruik dan deze plugin: https://nl.wordpress.org/plugins/health-check/. Succes!

  • Beste Roger, wanneer je een herbruikbaar blok gebruikt voor de opmaak en daarin zit een ‘paragraaf’ waar je andere tekst in wil hebben dan in het oorspronkelijke blok, kan je die dan op een of andere manier ontkoppelen?

    Met groet A Hendriks