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 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 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. 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.
Plugin of standaard?
Vanaf WP 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
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:
- Voorgesteld
- Blokken
- Insluitingen
- Gedeeld
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:
- Algemene blokken
- Opmaak
- Layout elementen
- Widgets
De categorie Insluitingen heeft standaard de volgende elementen:
- Insluiten
- YouTube
- WordPress
- Soundcloud
- Spotify
- Flickr
- Vimeo
- Animoto
- Cloudup
- CollegeHumor
- DailyMotion
- Funny or Die
- Hulu
- Imgur
- Issuu
- Kickstarter
- Meetup.com
- Mixcloud
- Photobucket
- Polldaddy
- 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 met Gutenberg?
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.
Nieuwe blokken met Gutenberg
Er zijn met de nieuwe editor Gutenberg 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
Ze hebben ook de extra mogelijkheid toegevoegd om responsieve kolommen als blok toe te voegen. Je kan sinds Gutenberg 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’
De allerbeste nieuwe functionaliteit van Gutenberg 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 kopiëren 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).
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.
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.
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 Gutenberg
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:
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
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 aan Gutenberg 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?
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 WP5.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.