Gutenberg handleiding voor WordPress

Sinds kort is er de Gutenberg editor voor WordPress uitgekomen als standaard van versie 5.0 van WP. De oude bekende visuele editor  heeft de afgelopen tijd weinig aanvullingen gekregen vanuit de development teams en is dus grotendeels hetzelfde gebleven. Dit is zeker niet slecht want het was een makkelijke editor maar miste toch ook een paar essentiele functies. Andere platforms zoals Medium en Ghost hebben wel flinke verandering doorgevoerd. Het team met vrijwillige developers hebben een nieuwe WordPress editor uitgebracht welke de classic editor vervangt en welke gericht is op het toevoegen van rijke inhoud (plaatjes, video, etc). Het doel was overzichtelijk en snel in gebruik. Of dat is gelukt? Dat gaan we samen bekijken.

Lees hier de hele handleiding voor jouw website met tips over de nieuwe editor voor WordPress genaamd project Gutenberg

WordPress 5 of Gutenberg

Versie 5.0 van het bekende CMS (ook bekend als WordPress Gutenberg) is de naam van de update van WordPress met de grootste veranderingen in 15 jaar. WordPress versie 5.0 is verschenen op 7 december 2018 en komt met de Gutenberg Block Editor. Sinds de intro van de Block Editor is het gebruik aardig veranderd en vooral versimpeld. Het aanmaken van pagina’s en berichten gaat heel anders. Deze Block Editor vervangt de oude WYSIWYG editor die inmiddels alweer meer dan 15 jaar oud is.

Wat is Gutenberg en waar komt de naam vandaan?

Gutenberg is een nieuwe blik op het gebruik sites. Deze update is genoemd naar Johannes Gutenberg, de uitvinder van de boekdrukkunst. Hij heeft meer dan 500 jaar geleden de bekende drukpers uitgevonden met een beweegbaar type. In de huidige visuele editor van WP gebruiken we nog vaak shortcodes en HTML gebruiken om dingen te laten werken. Dat is voor de leken onder ons niet ideaal. Het doel van de nieuwe editor was om dit simpeler te maken, vooral voor mensen die net met WP beginnen. Het idee is dat we werken met kleine blokken waarin we tekst of rijke content zetten. Daarnaast zitten er opties om de layout makkelijker een unieke uitstraling te geven.

Gutenberg editor voor wordpress sites

Plugin of standaard?

Vanaf WordPress 5.0 is Gutenberg standaard geïnstalleerd in iedere installatie. Als je nog een oudere versie van WP draait, dan kan je hier ook Gutenberg zelf downloaden als WordPress plugin. Zoek naar Gutenberg en installeer de plugin

installatie gutenberg

Blocks – Blokken

Het unieke van Gutenberg is dat deze werkt met zogeheten “blocks”. In de oude editor heb je alleen een titel en vervolgens één groot tekstveld voor je artikel. Sinds Gutenberg bestaat de hele pagina uit zogenaamde “blokken” of Block in het Engels. Iedere nieuwe paragraaf is dus een blok. Zie ook onderstaande afbeelding wat we hiermee bedoelen.

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

 

Blokken gebruiken met Gutenberg

Overal waar er over Gutenberg gesproken word, wordt er gesproken over blokken of in het Engels Blocks. Deze nieuwe editor is namelijk geheel ontwikkeld om met behulp van blokken op een simpele manier je paginalayout te maken.

Door op een + icoon te klikken komt er een menu tevoorschijn. Dit menu heeft 4 tabs om te selecteren, namelijk:

  1. Voorgesteld
  2. Blokken
  3. Insluitingen
  4. Gedeeld
Gutenberg blokken zoeken
 

 

 

 

 

 

 

 

 

Klik op het + icoon en kies vervolgens een element

De categorie voorgesteld bevat standaard de volgende elementen:

  • Paragraaf
  • Kop
  • Afbeelding
  • Lijst
  • Galerij
  • Citaat
  • Audio
  • Omslagafbeelding
  • Subtitel

De categorie Blokken bevat standaard meerdere categorieën:

  1. Algemene blokken
  2. Opmaak
  3. Layout elementen
  4. Widgets

De categorie Insluitingen heeft standaard de volgende elementen:

  • Insluiten
  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • WordPress
  • Soundcloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • CollegeHumor
  • DailyMotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv

Kies het juiste blok en vul de betreffende infomatie in

Verslepen over verplaatsen van blokken?

Verslepen of verplaatsen gaat heel makkelijk door te werken met de icoontjes die voor het blok staan.  Wanneer u een blok aanklikt, zijn er opties om het blok eenvoudig omhoog of omlaag te verplaatsen met de pijlen, het te verwijderen of naar de instellingen van het betreffende blok te gaan. Dit komt mogelijk bekend voor, het heeft overeenkomsten met de beschikbare besturingselementen op Medium. Dit werkt trouwens ook heel goed op je mobiele telefoon.

verplaatsen blok gutenberg

Nieuwe blokken

Er zijn met de nieuwe editor ook mogelijkheden bij bijgekomen. We laten onze favorieten kort voorbij komen.

Het maken van simpele tabellen is nu heel makkelijk omdat je deze als blok kan toevoegen. Je hoeft geen plugin meer te installeren of Html code te gebruiken. Je

Tabel toevoegen

Ze hebben ook de extra mogelijkheid toegevoegd om responsieve kolommen als blok toe te voegen. Je kan kiezen uit 2, 3 of 4 kolommen. Ook hier heb je dus geen plugin meer nodig. En het werkt ook nog een goed op mobiele apparaten.

Als laatste favoriet noemen we de live HTML-blok graag. Je kan je code zoals een embedded van een andere site invoegen en vervolgens een voorbeeld direct in het blok bekijken. Zowel de code als het voorbeeld. Ideaal want het scheelt je veel heen en weer schakelen. Zoek op ‘eigen html’

eigen html gutenberg

Shared blocks – herbruikbare blokken – nieuwe favoriet

De allerbeste nieuwe functionaliteit is toch wel Shared Block of in het Nederlands herbruikbare blokken. Met deze functie kun je een blok dat je hebt gemaakt opslaan als shared block, en hiermee kan je deze later hergebruiken op verschillende pagina’s zodat je niet hoef te kopieren en plakken. Je kan dit hergebruiken in pagina’s en berichten. Geen short codes of plugins meer nodig. Maar hoe werkt dat dan?

Hoe werkt dat dan?

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

gutenberg herbruikbare blokken

Klik op: “Aan herbruikbare blokken toevoegen”

Zodra je op deze knop klikt, moet je een naam invullen voor je shared block en dan kan je deze opslaan.

Shared blocks gebruiken

Zodra je één of meerdere shared blocks hebt aangemaakt, kun je deze gebruiken door een nieuw blok toe te voegen in Gutenberg. Scroll of zoek naar shared blok om deze toe te voegen.

gutenberg blok hergebruiken

Op deze manier kun je heel gemakkelijk elementen zoals tekst, of plaatjes laten terugkeren op meerdere pagina’s.

Shared blocks aanpassingen doorvoeren: Wanneer je op één pagina aanpassingen doet aan een Shared Block, zullen deze aanpassingen op alle pagina’s worden doorgevoerd waar je het shared blok hebt gebruikt. (waar het shared block gebruikt wordt) zichtbaar worden.

Overige mogelijkheden met Gutenburg

Voorbeeld / Publiceren

De knoppen rechts bovenin herken je wellicht nog wel uit de bekende oude Editor. Hier kun je je bericht of pagina als concept opslaan zodat deze niet verloren gaat, het bericht meteen publiceren, of eerste een voorbeeld bekijken. Wanneer je op het icoontje met de drie puntjes klikt, kun je ook switchen naar de “Code Editor” die natuurlijk ook in Gutenberg zit. Dit ziet er zo uit:

gutenberg code editor

Status en zichtbaarheid

De Publiceer button 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 blogbericht veranderen een bericht als “Sticky” noteren en daarmee bovenaan vast zetten.

Natuurlijk vind je in dit menu ook de knop om je bericht of pagina naar de prullenbak te verplaatsen mocht dat nodig zijn

Categorieën, tags, uitgelichte afbeelding en meer

Bekende opties vind je ook terug in de Gutenberg 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. Dit wijst eigenlijk zichzelf.

Het is even wennen maar wij zijn helemaal om hoor! We hopen dat de Gutenberg editor helpt om jouw website ook makkelijker te voorzien van nieuwe berichten en pagina’s.

Meer tips en informatie over Gutenberg

Tip 1: Wil je op de hoogte blijven van alle ontwikkelingen rondom Gutenberg voor WordPress?
Er is een speciale website met Gutenberg updates. Deze vindt je hier.

Tip 2: youtube instructie

De volgende youtube tutorial is ook de moeite waard om eens te bekijken:

Tip 3: Site origin

De Gutenberg Block Editor en de Site Origin Page Builder plugin kunnen samenwerken. De makers van een favoriete gratis page builder plugin hebben de plugin geschikt gemaakt voor de WordPress 5.0 Gutenberg Editor. De pagebuilder plugin van Site Origin geeft je bovenop Gutenburg veel weer extra mogelijkheden om een pagina in te delen maar ook je blokken zijn nog altijd beschikbaar in de Gutenberg Block Editor.

SiteOrigin werkt momenteel nog aan een migratie mogelijkheid om bestaande pagina’s over te zetten naar de Gutenburg versie van een pagina.