WPLounge
Gutenberg
Home » WordPress Algemeen » Gutenberg Handleiding voor WordPress 2020

Gutenberg Handleiding voor WordPress 2020

Als je met WordPress werkt, heb je ongetwijfeld al gehoord over Gutenberg. Gutenberg is de vervanging voor de huidige klassieke editor in WordPress. Werk jij al met nieuwe blokken editor Gutenberg of ben je nog te gehecht bent aan de klassieke editor? In deze handleiding kijken we naar de mogelijkheden van Gutenberg en leggen je de belangrijkste functionaliteiten uit in de praktijk.

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.

Op de hoogte blijven van ontwikkelingen rondom Gutenberg?

Er is een speciale website met Gutenberg updates: Gutenberg Times.

Gutenberg handleiding

In het begin moest je nog een Gutenberg plugin installeren om gebruik te maken van de nieuwe editor. Nu is is de blokkeneditor standaard ingebouwd, wanneer je WordPress installeert en/of updatet. 

NIEUW VAN WPLOUNGE
All-in WordPress website builder
Al onze kennis & ervaring in één kant-en-klare WordPress oplossing. Met meer dan 100+ WordPress website designs en een WordPress bonus pack t.w.v. € 500,- !
Lees verder »»

Blocks

Gutenberg werkt met zogeheten “blocks”. In de klassieke Editor van WordPress heb je alleen een titel en vervolgens één groot tekstveld voor je content. Bij Gutenberg bestaat de hele pagina uit zogeheten “blokken”. Iedere nieuwe “paragraph” (alinea) is in Gutenberg een block. In de onderstaande video laat ik snel zien hoe deze blokken er uit zien.

Voor iedere soort content heb je in Gutenberg een “block”. Zo gebruik je een YouTube-block om een YouTube-video op je pagina te embedden, of een “Pollquote”-block om een quote te plaatsen.

Zoals je in de video kunt zien kun je ook heel eenvoudig de volgorde van “blokken” aanpassen. Dit werkt een stuk makkelijker dan de “oude” editor. Natuurlijk is het even wennen om met Gutenberg te werken; wij hadden er in de eerste instantie ook aardig wat moeite mee. Toch moet ik eerlijk bekennen dat ik Gutenberg steeds meer begin te waarderen.

Keuze tussen Gutenberg en Classic Editor

Omdat het nogal een overstap is in de lay-out en werkwijze, blijf je nog altijd terug te kunnen naar de klassieke editor. Gebruik hiervoor de plugin Classic Editor.

De klassieke editor plugin van WordPress

Classic Editor is een officiële plug-in die wordt beheerd door het WordPress-team en die de vorige (“klassieke”) WordPress-editor en het scherm “Bericht bewerken” of “Pagina bewerken” herstelt. Classic Editor wordt volledig ondersteund en onderhouden tot minstens 2022.

In één oogopslag voegt deze plugin het volgende toe:

  • Beheerders kunnen de standaardeditor voor alle gebruikers beschikbaar stellen.
  • Beheerders kunnen gebruikers toestaan ​​hun standaardeditor te wijzigen.
  • Indien toegestaan, kunnen de gebruikers kiezen welke editor voor elk bericht moet worden gebruikt.
  • Elk bericht wordt geopend in de laatst gebruikte editor, ongeacht wie het als laatste heeft bewerkt. Dit is belangrijk voor het behouden van een consistente ervaring bij het bewerken van content.
  • Bovendien bevat de plugin verschillende filters waarmee andere plugins de instellingen kunnen beheren, en de keuze van de editor per bericht en per berichttype.

Standaard verbergt deze plugin alle functionaliteiten die beschikbaar zijn in de nieuwe Gutenberg Block Editor.

Je kunt nu nog kiezen of je Gutenberg wilt gebruiken of dat je liever de “klassieke” Editor gebruikt (zoals je dat gewend bent). Om met Gutenberg te kunnen oefenen, raden we je aan om (af en toe) het avontuur aan te gaan en alle nieuwe innovatieve functies te testen. Gutenberg is tenslotte bedoeld om je horizon te verbreden!

Activeer klassieke editor
Ga naar Plugins > Geïnstalleerde plugins. Hier kun je de klassieke editor activeren en deactiveren.

Een overzicht van de Gutenberg Editor

De onderstaande screenshot (klik voor groter) laat zien hoe Gutenberg eruit ziet als je voor het eerst een pagina of bericht gaat schrijven met de nieuwe editor. Ik heb een aantal belangrijke onderdelen genummerd. Onder de screenshot leg ik ze alle zes uit.

1: De titel

Nummer één spreekt redelijk voor zich: hier vul je een titel in voor je pagina of bericht. Dit verschilt niet heel erg van de “klassieke editor”, behalve dat het er in Gutenberg iets anders uit ziet. De screenshots hieronder laten het verschil zien. Links zie je de klassieke editor en rechts Gutenberg.

2: Content

Onder de titel vind je het “Content”-gedeelte van de Gutenberg Editor. Hier kun je blokken met content plaatsen, zoals een tekstblok. Je kunt hier gewoon beginnen met typen, zoals je dat gewend was in de klassieke Editor. Wanneer je op “Enter” klikt wordt er automatisch een nieuw blok gemaakt waarin de volgende paragraph (alinea) kan worden geschreven.

Je kunt vervolgens met de pijltjes naast een blok de volgorde van de blokken aanpassen. Dit went heel snel.

3: Voorbeeld / Publiceren

De knoppen rechtsboven herken je wellicht nog wel uit de klassieke Editor. Hier kun je je bericht of pagina als concept opslaan, publiceren, een voorbeeld bekijken of de Gutenberg-sidebar verbergen. Wanneer je op het icoontje met de drie puntjes klikt, kun je ook switchen naar de “Code Editor” die in Gutenberg zit. Dit ziet er als volgt uit:

Code Editor Gutenberg

Hier kun je je bericht direct als HTML bewerken, zoals dat in de klassieke Editor ook mogelijk was door niet voor het tabje “Visueel” maar voor “Tekst” te kiezen.

4: Status en zichtbaarheidStatus en zichtbaarheid

Onder de Publiceren-knop vind je alle instellingen die je gewend bent uit de klassieke Editor. Zo kun je je pagina of bericht als “Openbaar” publiceren of de status “Privé” geven. Je kunt hier ook de datum van je bericht aanpassen en een bericht als “Sticky” bovenaan zetten.

Uiteraard vind je in dit menu ook de knop om je bericht of pagina naar de prullenbak te verplaatsen.

5: Categorieën, tags, uitgelichte afbeelding en meer

Uiteraard vind je ook in Gutenberg de menu’s voor het toevoegen van tags, het selecteren van categorieën en een uitgelichte afbeelding voor je bericht of pagina. Behalve dat dit nu “uitklapbare” menu’s zijn is hier weinig veranderd.

6: Blok toevoegen / ongedaan maken

Links bovenin de Gutenberg editor vind je een knop om een nieuw blok aan je pagina of bericht toe te voegen. Ook vind je hier twee knoppen waarmee je je laatste wijziging ongedaan kunt maken of juist een stap “vooruit” kunt doen.

Daarnaast vind je een knop met een “i”. Als je hierop klikt, krijg je meer informatie over je pagina of bericht, zoals het aantal woorden, tussenkopjes, blokken en alinea’s:

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.

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 “Blok verwijderen” te klikken:

Blok verwijderen in Gutenberg
Blok verwijderen in Gutenberg.

Je kunt het blok hier ook aanpassen met HTML of het blok “dupliceren” zodat je het ergens anders op je pagina kunt laten terugkomen.

Shared blocks (herbruikbare blokken)

Eén van onze favoriete features van Gutenberg heet “Shared Blocks”. Hiermee kun je een blok dat je hebt gemaakt opslaan als shared block, 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 shared block gebruiken.

Opslaan 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).

Herbruikbare blokken toevoegen
Herbruikbare blokken toevoegen

Zodra je op deze knop klikt, kun je een naam invullen voor je shared block en deze vervolgens opslaan.

Shared blocks gebruiken

Zodra je één of meerdere herbruikbare blokken hebt, kun je deze gebruiken door een nieuw blok toe te voegen in Gutenberg. Scroll vervolgens helemaal naar beneden om je shared blocks te bekijken.

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

Shared blocks aanpassen

Wanneer je op één pagina aanpassingen doet aan een Shared Block, zullen deze aanpassingen overal (waar het shared block gebruikt wordt) zichtbaar worden.

Soorten blokken in Gutenberg

Standaard zitten er veel verschillende blokken in Gutenberg. We gaan ze hier niet allemaal behandelen, want de meeste blokken spreken redelijk voor zich. We zetten de belangrijkste soorten blokken op een rij.

Tekst

Het Tekst-blok wordt automatisch aan Gutenberg toegevoegd, zodat je direct kunt beginnen met schrijven. Zodra je op “Enter” klikt zal er automatisch een nieuw tekstblok worden toegevoegd voor de volgende alinea. Iedere alinea is in Gutenberg dus een nieuw blok.

Afbeeldingen

Ook afbeeldingen hebben in Gutenberg een eigen blok. Zodra je dit blok toevoegt, krijg je direct de mogelijkheid om een afbeelding te uploaden of om er een te kiezen uit je WordPress-mediabibliotheek. Ook kun je met de icoontjes linksboven je afbeelding centreren of naar links of rechts uitlijnen:

Afbeeldingen block in Gutenberg

Gutenberg afbeelding blok instellingen

Zodra je een afbeelding hebt geselecteerd, verschijnen in de balk rechts alle instellingen voor het afbeelding-blok. Dit zijn de instellingen die je ook uit de klassieke Editor gewend bent.

Zo kun je een “alt-tekst” invullen (“Textual Alternative”), de tekst die wordt gebruikt als de afbeelding niet getoond kan worden óf als een slechtziende je pagina laat “voorlezen”.

Je kunt ook een formaat kiezen voor je afbeelding. Standaard wordt je afbeelding als “Full size” getoond, maar je kunt ook een ander vooraf ingesteld formaat kiezen. Daarnaast kun je ook zelf afmetingen invullen (in pixels), zoals je dat gewend bent.

Natuurlijk is het ook mogelijk om een link aan je afbeelding toe te voegen, zoals een link naar het mediabestand of naar een “custom URL”.

Heading (tussenkop)

Er is ook een speciaal blok voor het toevoegen van headings (tussenkopjes). Je hebt hier de keuze tussen verschillende headings, zoals H2, H3 en H4:

Heading blok Gutenberg

Quote (citaat)

Er is ook een speciaal blok in Gutenberg voor het toevoegen van een citaat (of quote) aan je bericht of pagina. Dat ziet er in de Editor als volgt uit:

Quote Gutenberg

Je vult een quote in (bijvoorbeeld: “I’m going to make him an offer he can’t refuse.”) en eventueel waar je de quote vandaan hebt, in dit voorbeeld natuurlijk “The Godfather”.

Embed (bijvoorbeeld YouTube)

Het toevoegen van een YouTube-video is mogelijk met een zogeheten “Embed”-blok. Er zijn veel blokken voor embeds, zoals YouTube, Twitter, Instagram, SoundCloud, Spotify en Vimeo.

YouTube embed Gutenberg
Vul de URL van de YouTube-video in en klik op “Embed”.

Tabellen

Tabellen waren in de klassieke WordPress-editor een groot gemis. Vaak moest je hiervoor een speciale plugin installeren. In Gutenberg is het toevoegen van een tabel standaard-functionaliteit:

Tabellen in Gutenberg

Kolommen (beta)

Vroeger was dit alleen mogelijk als je theme een shortcode voor kolommen had, of als je een speciale plugin installeerde die deze optie aan je editor toevoegt. In Gutenberg kun je (zonder plugin) kolommen (columns) toevoegen:

Kolommen in Gutenberg

Widgets

Je kunt ook verschillende widgets als “block” toevoegen in Gutenberg. We gaan ze hier niet één voor één laten zien, maar om je een idee te geven wat er mogelijk is:

Widgets in Gutenberg
Zo kun je bijvoorbeeld je laatste berichten-widget laten zien of een lijst tonen van je categorieën.

Galerij

Gutenberg heeft ook een blok waarmee je eenvoudig een galerij aan je bericht of pagina kunt toevoegen. Het enige dat je hoeft te doen is meerdere afbeeldingen uploaden of selecteren in je mediabibliotheek. Gutenberg maakt hier automatisch een galerij van. Je kunt daarnaast instellen in hoe veel kolommen je je galerij wilt laten zien:

Gallery in Gutenberg

Meer blokken? Nieuwe plugins

Behalve de hierboven genoemde voorbeelden heeft Gutenberg nog veel meer blokken. En het mooie is, dat developers hun eigen blokken kunnen toevoegen door middel van plugins en themes. Dit is te danken aan de “Block API” van Gutenberg. Als je technisch bent, kun je natuurlijk ook zelf blokken ontwikkelen voor Gutenberg.

Zo zijn er al developers die plugins hebben ontwikkeld waarmee extra blokken aan Gutenberg worden toegevoegd. Zo is er de plugin WooCommerce Gutenberg Products Block, waarmee je allerlei soorten WooCommerce-blokken aan Gutenberg kunt toevoegen.

Problemen met Gutenberg?

We raden je aan in ieder geval een backup van je website te hebben, of deze te kopiëren naar een testomgeving, voordat je uitgebreid met de nieuwe functionaliteiten van Gutenberg aan de slag gaat. Zo kun je erachter komen of je bij het gebruiken van Gutenberg tegen bepaalde problemen aanloopt en eventueel niet het resultaat krijgt dat je voor ogen had. Als je nog gebruikmaakt van een oudere WordPress versie en van plant bent te updaten, dan kan het soms zijn dat je bestaande content niet meer kunt aanpassen omdat Gutenberg bijvoorbeeld niet compatibel is met jouw WordPress-template of plugins. Altijd een backup maken is het credo.

Als je merkt dat jouw template (nog) niet compatibel is met Gutenberg, of dat bepaalde plugins op je website problemen opleveren, contacteer dan de developer(s) van die plugins en themes. Daarnaast kun je de Classic Editor-plugin installeren, zodat je voorlopig in ieder geval vooruit kunt.

Gutenberg wordt steeds beter en gebruiksvriendelijker

Het is voor sommigen nog steeds wennen om met Gutenberg te werken. We raden je desalniettemin aan om te beginnen met Gutenberg en je erin te verdiepen. De klassieke editor is een remedie voor de xenofoben onder ons. Maar op den duur zullen we er allemaal mee te maken krijgen. Het biedt alleen maar meer mogelijkheden voor gebruikers zonder codeerkennis.

Met de nieuwste updates van WordPress wordt een betere integratie met de Gutenberg blokeditor geboden en geeft WordPress beginners de mogelijkheid om eenvoudiger sites te stylen. We zien meer intuïtieve interacties en betere toegankelijkheid. Lees er meer over in onder andere onze review van de uitrol van WP 5.3. Hier waren veel Gutenberg optimalisaties goed zichtbaar.

Heb je zelf specifieke vragen omtrent het werken met de blokken editor Gutenberg? Laat het ons weten, dan zullen we jouw vraag eventueel meenemen in onze volgende tutorials.

Roger Overdevest

Roger is eigenaar van de website WPLounge en van zoekmachine marketing bureau Kliq Internet

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

Reageer

Scroll Up Skip to content