WPLounge
Home » Tutorials » Gutenberg handleiding

Gutenberg handleiding

Gutenberg Handleiding WPLounge

Als je veel met WordPress werkt, heb je ongetwijfeld al gehoord over Gutenberg. Gutenberg gaat de huidige Editor in WordPress vervangen. Zodat je straks niet voor een enorme verrassing komt te staan, hebben we deze uitgebreide Gutenberg handleiding geschreven.

Het was in eerste instantie niet precies duidelijk wanneer we Gutenberg konden verwachten. We wisten dat Gutenberg tegelijk met WordPress 5.0 zou worden uitgebracht en we wisten dat WordPress 5.0 zou worden uitgebracht “als Gutenberg klaar is”. Maar niemand wist precies wanneer dat zou gebeuren. Gelukkig  gaf Matt Mullenweg tijdens WordCamp Europe 2018 in Belgrado wat meer duidelijkheid over de roadmap van het Gutenberg-project.

Matt Mullenweg tijdens WordCamp Europe:

Gutenberg zou er dus in augustus al kunnen zijn, maar er is nog steeds geen exacte datum bekend of beloofd. In augustus zal WordPress.com wel voorzien worden van Gutenberg. Voor WordPress.org staat er nog geen datum vast.

Op de hoogte blijven van ontwikkelingen rondom Gutenberg?
Er is een speciale website met Gutenberg updates: Gutenberg Times.

Gutenberg handleiding: de Gutenberg-plugin installeren

In deze handleiding zullen we je laten zien hoe Gutenberg werkt en wat je er allemaal mee kunt. Wil je direct naar een specifiek onderdeel van Gutenberg kijken? Gebruik dan de inhoudsopgave bovenaan dit artikel.

Aan de slag met Gutenberg?
Op het moment van schrijven is Gutenberg nog niet in WordPress ingebouwd. Je kunt wel de plugin Gutenberg downloaden en installeren. We raden je niet aan om dit op je “live” website te doen. Je kan beter WordPress lokaal installeren om daar met Gutenberg te oefenen (of een test-website aanmaken).

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, ik vond het eerst ook maar niks. Toch moet ik eerlijk bekennen dat ik Gutenberg steeds meer begin te waarderen.

Keuze tussen Gutenberg en Classic Editor

Zodra je de Gutenberg-plugin hebt geïnstalleerd in WordPress, krijg je twee opties bij het aanmaken van een nieuwe pagina of een nieuw bericht: Gutenberg en Classic Editor.

Gutenberg of Classic 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, klik je natuurlijk op “Gutenberg”.

Een overzicht van de Gutenberg Editor

De onderstaande screenshot (klik voor groter) laat zien hoe Gutenberg er uit 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.

Gutenberg overzicht

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 heter in Gutenberg iets anders uit ziet. De screenshots hierbeneden laten het verschil zien. Links zie je de klassieke editor, en rechts Gutenberg.

Titel classic editor vs 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” duwt 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 rechtsbovenin 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 GutenbergHier 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 zichtbaarheid

Status en zichtbaarheidOnder 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 rechter balk. In het onderstaande voorbeeld bewerk ik een tekst-blok 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 “Remove block” te klikken:

Blok verwijderen in GutenbergJe 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

Eén van mijn 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 straks dus geen shortcode meer nodig, maar kun je gewoon een shared block gebruiken.

Opslaan als shared block

Als je een blok hebt gemaakt dat je wilt gaan gebruiken als shared block, dan klik je naast het blok op het “More options”-icoontje (het icoontje dat je ook gebruikt als je een blok wilt verwijderen).

Convert to shared block
“Convert to shared block”

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 shared blocks 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:

Shared blocks

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” duwt 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 GutenbergGutenberg afbeelding blok instellingenZodra 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 GutenbergQuote (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 GutenbergJe 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 GutenbergKolommen (beta)

Hoewel deze feature nog in “beta” is, is het toch de moeite waard om deze te laten zien. 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 GutenbergZo kun je bijvoorbeeld je laatste berichten-widget laten zien of een lijst tonen van je categorieën.

Gallery

Gutenberg heeft ook een blok waarmee je eenvoudig een gallery 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 gallery van. Je kunt daarnaast instellen in hoe veel kolommen je je gallery wilt laten zien:

Gallery in GutenbergMeer blokken? 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 om eerst een backup van je website te maken, of deze te kopiëren naar een testomgeving, voordat je de Gutenberg-plugin installeert en activeert. Zo kun je er achter komen of je bij het gebruiken van Gutenberg tegen bepaalde problemen aanloopt. Zo kan het zijn dat je bestaande content niet meer kunt aanpassen of dat Gutenberg (nog) niet compatible is met jouw WordPress-theme.

Als je merkt dat jouw theme (nog) niet compatible 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 straks – bij de release van WordPress 5.0 en Gutenberg – geen probleem hebt.

Conclusie

Het wordt voor veel mensen even wennen om met Gutenberg te wennen. Daarom raad ik je aan om nu alvast (op een test-omgeving) te beginnen met Gutenberg, zodat je straks weet hoe het werkt. Heb je écht geen zin om met Gutenberg te werken of is jouw theme (nog) niet compatible met Gutenberg? Installeer dan alvast de Classic Editor-plugin, zodat je óók na de release van WordPress 5.0 verder kunt met de Editor zoals je die nu gewend bent.

Beoordeel dit artikel

(16 ratings, gemiddeld: 4,88 van de 5)
Wouter Postma

Wouter Postma

Eigenaar van WPLounge. Blogt ook in het Engels op WPLounge.org.

Gratis op de hoogte blijven?

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

8 reacties

  • Ik werk met veel studenten die gewend zijn hun artikelen in Word te schrijven (ter beoordeling) en daarna in WordPress te plakken en op te maken. Het lijkt er op dat het plakken van een heel artikel in WordPress niet meer gaat lukken met de Gutenberg-versie.
    Klopt dat Wouter?

    • Beste Joost,

      Ik denk dat dit – ook in Gutenberg – nog steeds gewoon werkt.

      Je kunt het beste een keer proberen door WordPress lokaal te installeren en te testen :-).

      Gr Wouter

  • Bedankt voor dit uitgebreide artikel. Ik ben sind soort aan het stoeien met deze Gutenberg en loop ook tegen wat ‘problemen’ aan.
    Zo wil ik een foto plaatsen met de tekst er omheen maar doordat je het als blok moet toevoegen eist een kleine foto alsnog een heel blok op. Zoals bij jullie onder het kopje afbeelding, daar staat een afbeelding naast de tekst ;)

    Ook had ik een blog opgemaakt in Gutenberg en werd de tekst donkergrijs weergegeven ipv wit. Toen ik de tekstkleur aanpaste nam hij dit niet over. Bij een andere blog totaal geen problemen, ik begrijp dat niet…
    Mjin thema: twentyseventeen

    Bedankt alvast!

    • Ik lees even mee… ;-)
      Zelf heb ik ook nog niet ontdekt op welke wijze je in een blok tekst eenvoudig een afbeelding kunt plaatsen. Op het moment dat je met de bloktekst werk is het blok tbv afbeelding niet zichtbaar,,,

      Mvgr
      Frans

  • Ben me dood geschrokken toen al mijn in WPBakery opgemaakte pagina’s het niet meer deden in Gutenberg. Inmiddels blijkt dat ze netjes kunnen samenwerken, dankzij aanpassingen van de bakkerij, hoewel ik hoop dat ik WPBakery niet meer nodig heb straks. Programmeurs ergeren zich er dood aan, als ze iets op mijn site moeten doen.

    Hele handige opties in Gutenberg is: kleurvlakken achter je tekst zetten.

  • Hoihoi,
    Mooi dat je me geholpen hebt met jouw handleiding. Het lukt me inmiddels aardig.
    Het lukt me niet een “lees meer” functie te vinden. Dit noemen ze in sommige Engelstalige handleidingen “read more”block.

    Kun jij me helpen?
    groeten Rini

  • Ik vind het heel handig. Het doet me denken aan Mailchimp, die werkt ook met dit soort blokken. Vind het best gebruikersvriendelijk.
    Het lukte me alleen nog niet om een emaillink te maken. Heb een plugin geactiveerd: de Simple Mail Address Encoder, maar helaas zonder effect.

    Meer mensen last van? Wat te doen?
    Dank alvast voor een reactie

Advertenties

Blijf op de hoogte!