De Gutenberg editor in WordPress. Het is naar mijn mening de grootste verandering ooit in WordPress.
Waarom? Simpel, we moeten totaal anders leren werken met WordPress. Elk bericht, pagina en custom post type moeten we in blokken gaan maken in plaats van dat we een groot vlak met een lap tekst zien.
Met dit artikel wil ik je laten zien hoe je met Gutenberg kunt werken, zodat jij probleemloos over kunt schakelen wanneer de tijd daar is en WordPress 5.0 wordt uitgebracht.
Video: Werken met Gutenberg
In onderstaande video leg ik je uit hoe de Gutenberg editor in WordPress werkt. Ik behandel alle knoppen die te vinden zijn, hoe je blokken kunt toevoegen, welke blokken er zijn en nog een aantal dingen meer. Bekijk het hier:
Wil je graag meer leren over de WordPress Gutenberg editor? Bekijk dan ook zeker de online training “Leer werken met de WordPress Gutenberg editor”. Ik laat je hierin stapsgewijs kennis maken met alle onderdelen van Gutenberg. Op een rustiger tempo dan in deze video, blok voor blok en nog een stuk uitgebreider.
Wat is Gutenberg in WordPress?
Gutenberg is de nieuwe editor in WordPress vanaf versie 5.0. Op het moment van schrijven is deze versie van WordPress nog niet gelanceerd. Gutenberg transformeert de oude editor, waar je 1 grote lap met tekst had, naar de nieuwe editor met verschillende herbruikbare blokken.
Het is dus niet meer simpel tekst opmaken zoals we al jaren gewend zijn en hoe het ook werkt bij programma’s als Microsoft Word. Het wordt nu content blokken toevoegen.
Een blok is een stukje content die je in de editor kunt plaatsen. Alle blokken kun je onafhankelijk van elkaar bewerken en ergens plaatsen. Een collectie van alle blokken maakt je bericht of pagina.
Het doel van Gutenberg is om ervoor te zorgen dat je rijke content layouts kunt maken met content blokken. Gebruikers kunnen op deze manier sneller zonder HTML en CSS content opmaken zonder dat er een plugin voor nodig is. Het maakt het dus flexibeler.
Blokken in Gutenberg
Blokken is het sleutelwoord voor Gutenberg. Je kunt de blokken in Gutenberg zien als LEGO blokken. Wanneer je alles goed met elkaar combineert heb je een schitterend eindresultaat.
Voor iedere soort content die je kunt bedenken, is in Gutenberg een blok beschikbaar. Zo heb je een normale paragraaf blok, YouTube video embed blok, shortcodes en nog veel meer. Bekijk hieronder een overzicht die ik gemaakt heb van diverse beschikbare blokken in Gutenberg (er zijn er nog meer).
Het is verder geen enkel probleem om blokken opnieuw te sorteren in de editor. Je kunt zelfs blokken maken die precies hetzelfde zijn. Dit zijn de herbruikbare blokken. Herbruikbare blokken kunnen je een hoop tijd besparen. Complexe blokken kun je namelijk keer op keer opnieuw gebruiken zonder dat je het werk opnieuw hoeft te doen.
Je hebt ook blok instellingen templates. Hiermee kun je basis instellingen maken voor specifieke blokken. Wanneer je altijd afbeeldingen wilt centreren, kan je dit bijvoorbeeld doen met een template.
Verder heb je ook layout templates. Je kunt templates maken en vervolgens importeren in een nieuwe pagina, waarna je alleen de blokken nog hoeft te vullen.
Hoe kom je aan Gutenberg in WordPress?
Gutenberg komt officieel in WordPress vanaf versie 5.0. Het is alleen nu al mogelijk om er gebruik van te maken. Je kunt Gutenberg op je website installeren door naar “Plugins -> Nieuwe plugin” te gaan en Gutenberg te zoeken, te installeren en te activeren.
Let er wel op dat het niet voor niks nog niet in de huidige WordPress versie zit. Gutenberg is nog in beta, waardoor ik aanraad om het alleen op een testwebsite te installeren. Mocht je het toch op je live website willen installeren, zorg er dan voor dat je altijd een back-up maakt van tevoren.
Gutenberg op het eerste gezicht
Zodra je Gutenberg geïnstalleerd en geactiveerd hebt op jouw website, zal je links in het menu een extra menu-item “Gutenberg” zien staan. Wanneer je hierop klikt, kun je een voorbeeld bericht bekijken en alle functies oefenen.
Je zal direct merken dat de nieuwe editor er heel anders uitziet. Wat we jaren gewend zijn is opeens weg. We hebben nu een redelijk clean editor met veel ruimte om de focus op de content te houden.
Aan de rechterzijde kun je de instellingen bekijken van het document (je bericht of pagina) of van een blok dat je geselecteerd hebt. Wanneer je op de drie puntjes rechtsboven klikt, kun je wisselen naar de code editor of de schrijfmanier wijzigen.
Nu je dit in het kort ziet ben je misschien niet direct een fan. Waarom iets veranderen wat al jaren fijn werkt? Het is alleen de toekomst en zo slecht is het ook nog niet. Na even wennen werkt het best lekker. Voor je het weet wil je allemaal extra blokken op je WordPress-website om er nog meer mee te doen.
Hoe werkt Gutenberg precies?
Nu we een eerste indruk hebben, wil je natuurlijk graag weten hoe Gutenberg precies werkt. Ik zal het je zo kort en eenvoudig mogelijk vertellen. Zodra je een nieuw bericht of pagina maakt, krijg je direct de mogelijkheid om een titel toe te voegen en je verhaal te schrijven.
Je hoeft hier in principe dus nog niks geks te doen. Gewoon de titel invoeren, op enter klikken en je kunt verder gaan met het schrijven van je artikel.
Wanneer je een ander soort blok wilt toevoegen dan een normaal tekstblok, dan kun je op het + icoontje klikken aan de linkerkant. Je krijgt dan allerlei verschillende mogelijkheden (meer dan je op de afbeelding hieronder ziet).
Kies het blok dat je wilt toevoegen en ga verder met je artikel. Per paragraaf zal je een ander blok moeten maken. Wanneer je jouw artikel aan het uittypen bent, zal er bij elke enter automatisch een nieuw blok aangemaakt worden. Voeg je afbeeldingen of andere blokken toe? Een enter op je toetsenbord voldoet wederom om direct door te gaan met schrijven.
Zoals je leest is het dus niet heel moeilijk. Het ziet er alleen anders uit en de mogelijkheden staan soms op wat andere plekken. Naarmate je langer werkt met Gutenberg zal je gewend raken en misschien nooit meer anders willen.
Eenmaal je artikel af, kun je naar de rechterzijde van je scherm gaan voor de document instellingen.
Alles wat je voorheen aan de rechterkant kon vinden, staat zoals je ziet hier ook nog wel. Het ziet er alleen net iets anders uit. De blauwe publiceerknop is in elk geval nog altijd goed duidelijk, dus het publiceren van je artikel zal geen enkel probleem moeten zijn.
Kan mijn thema omgaan met Gutenberg?
Met Gutenberg is er een compleet nieuwe manier om templates te bouwen gekomen in WordPress. Het kan dus heel goed zijn dat je huidige thema hier (nog) niet goed mee om kan gaan.
Doordat de veranderingen dermate groot zijn, is Gutenberg momenteel al lange tijd beschikbaar in beta, zodat iedereen ermee kan experimenteren. De meeste thema- en plugin-ontwikkelaars zullen er daarom wel voor zorgen dat alles “Gutenberg-ready” is.
Daarnaast blijft de klassieke editor ook nog beschikbaar, waardoor je website niet meteen onbruikbaar wordt bij de update naar WordPress 5.0. Hier is gelukkig wel over nagedacht.
Conclusie
De Gutenberg WordPress editor zal in het begin even wennen zijn, maar is helemaal zo gek nog niet. Hoe langer en vaker ik ermee werk, hoe prettiger ik het vind worden.
Ik raad je daarom ook zeker aan om Gutenberg nu al uit te testen op een testwebsite. Je kunt zo meteen zien hoe jouw WordPress-website met Gutenberg ermee omgaat.
Mocht je de nieuwe editor van WordPress willen uitschakelen omdat het je niet bevalt, dan kun je het artikel WordPress gutenberg editor uitschakelen bekijken.
Heb jij de WordPress Gutenberg editor al uitgeprobeerd? Laat in de reacties weten hoe jij het ervaart.
Wil je graag meer leren over de WordPress Gutenberg editor? Bekijk dan ook zeker de online training “Leer werken met de WordPress Gutenberg editor”. Ik laat je hierin stapsgewijs kennis maken met alle onderdelen van Gutenberg. Op een rustiger tempo dan in deze video, blok voor blok en nog een stuk uitgebreider.
32 reacties op “WordPress Gutenberg editor uitgelegd”
Wanneer ik html toevoeg (vanuit een bol affiliate link) wordt deze wel in het voorbeeld weergegeven, maar niet op de website. Enig idee welke handeling ik nog zou moeten doen om dit zichtbaar te krijgen?
Kan ik helaas niet zeggen vanaf hier. Wellicht dat je een cache plugin verkeerd hebt ingesteld waardoor het nog niet direct zichtbaar is op de website.
Ja, het is gewoonweg met je muis een selectie maken (net als tekst selecteren). Zodra je in het tweede blok komt zie je dat je blokken aan het selecteren bent.
Is het mogelijk om meerdere herbruikbare blokken samen te voegen tot 1 herbruikbaar blok?
Bijvoorbeeld: Ik heb een herbruikbaar blok met een html code en boven en onder dat blok plak ik nu met de hand een blok met een scheidingslijn.
Ja, je kunt de blokken selecteren en vervolgens aangeven dat je er een herbruikbaar blok van wilt maken. Je hebt dan een herbruikbaar blok bestaande uit meerdere blokken.
Ok bedankt. Ik zie echter niet hoe ik verschillende blokken selecteer. Doe ik dat als ik een bericht of pagina aan het bewerken ben?
Top uitleg! Dank je wel
Ik vroeg me af of je de kopjes mag gebruiken op volgende manier
Titel
H4 titel alinea
tekst
H4 titel alinea
tekst
etc
De editor geeft aan dat dit niet de correcte indeling is maar ik vind H1 en 2 en 3 veel te groot
Groetjes Lydia
Voor zoekmachine optimalisatie is het niet handig om op deze manier de H4 te gebruiken. H1 is voor de titel. H2 voor de tussenkoppen, H3 voor de sub-tussenkoppen, etc. Je zou de grootte kunnen aanpassen van je H1, H2, H3 in het thema.
Hai Maikel,
Wat fijn jouw uitleg tips!
Zelf nog een beetje aan het uitvogelen hoe alles werkt.
Onder het rechterkopje ‘Status & Zichtbaarheid’ van het Document heb ik een optie die ik kan aan of uitvinken:
“Plak aan de bovenkant van het blog”
Als ik deze aanvink wat doet die dan?
Dankjewel alvast! Groetjes, Jessica
Daarmee kun je een bericht sticky maken. Deze blijft dan op de blogpagina bovenaan staan.
Maikel,
Ik wil een plaatje en tekst in één blok zetten maar krijg het (nog) niet voor elkaar het is of afbeelding of tekst.
Ik heb Wordpress versie 5.2.3
Je kunt beide blokken naast elkaar krijgen door de afbeelding uit te lijnen. Het blijven verder aparte blokken in Gutenberg.
Je kan ook een groep maken van meerdere blokken. Zo blijven die bij elkaar. (gemakkelijk om als template te hergebruiken) maar ook voor SEO bijv. titel combineren met en lijst.
Dank je hartelijk voor de fijne uitleg, Ben met het overzetten van oude site( sitebuilde)r naar een nieuwere site ( wordpress) aan het modderen.
Plakken van bestaande tekst geeft problemen bij woord/zin afbreking zie ik. Os zie ik het verkeerd?
Ik heb nog nooit problemen gehad met het kopiëren en plakken van tekst. Wellicht dat de oude sitebuilder wat aan opmaak met zich meebrengt waardoor het fout gaat.
Dag Maikel,
Bedankt voor je goede uitleg. Ik vind de afstand tussen twee blokken te groot. Is daar iets aan te doen? Moet ik dan een css invoeren?
Bedankt voor je antwoord.
Ja, wanneer op de website veel witruimte tussen bepaalde onderdelen zit, dan zal je dit met CSS kunnen oplossen.
Beste Maikel,
Sinds een week werken wij met de nieuwe Gutenberg editor, in wordpress versie 5.1.1. In de oude versie van Wordpress had je helemaal onderaan de pagina 3 ”balken” staan: Yoast SEO, Sidebar en Rivisie. Bij het kopje sidebar kon je bij: choose the sidebar, je sidebar instellen: main alternative sidebar xxx.
In de nieuwe versie 5.1.1 staat dit kopje sidebar er niet meer. Alleen nog Yoast SEO kan ik daar terugvinden. Als ik op de 3 bolletjes rechtsboven in klik en dan de opties, staat sidebar wel aangevinkt. Echter vind ik deze nergens meer terug.
Waar kan ik in de nieuwe gutenberg editor wordpress versie 5.1.1 mijn main alternative sidebars instellen?
Alvast bedankt
De Sidebar optie waar je het over hebt is niet een standaard optie in WordPress. Vermoedelijk heeft het thema waar je gebruik van maakt of een plugin deze optie in WordPress gebracht, waardoor het fout is gegaan.
Je hebt een mogelijk om het terug te brengen als het goed werkt. Klik aan de rechterzijde in Gutenberg op de 3 puntjes onder elkaar en klik vervolgens op “Optie”. Hier zie je alle opties die je zichtbaar kunt maken. Vermoedelijk staat de sidebar optie hier ook tussen.
Dag Maikel,
Bedankt voor je snelle reactie. Helaas heb ik jouw onderste advies al geprobeerd. Als ik de optie sidebar aanvink, krijg ik deze alsnog niet in beeld.
Is er een andere mogelijkheid om deze main alternative sidebars terug te brengen? Als ik de plugin ”klasieke editor” activeer, zie ik hem echter wel weer staan.
Ik durf het niet te zeggen. Ik ben niet bekend met de plugin of het thema waardoor je deze optie hebt. Je kunt dit daarom het beste aan de maker vragen.
Beste Maikel, bedankt voor de goede uitleg. Ik moet nog erg wennen aan Gutenberg, maar zie zeker voordelen. Wanneer ik in de editor ben in de visuele modus is de werkbare breedte erg smal terwijl ik links en rechts van de editor nog veel ruimte heb. Hoe kan ik het editor blok visueel breder maken? Alvast dank. Groet, Peter
Hier is helaas geen optie voor. Wellicht dat je dit kunt overschrijven met CSS dat de CSS van de editor overruled.
Bedankt voor je reactie
Ik ben aan het uitproberen hoe de nieuwe Gutenberg editor werkt.
Zo heb ik 4 kolommen naast elkaar gemaakt en in elke kolom is een andere tekst. De kolommen worden niet automatisch uitgelijnd maar zie ook geen mogelijkheid om dit in te stellen.
Is dit wel of niet mogelijk vraag ik mij af.
Hartelijke groet.
Cees
Dan is je thema vermoedelijk nog niet helemaal Gutenberg-ready. Bepaalde elementen van Gutenberg werken alleen goed als hier CSS voor beschikbaar is in het thema waar je gebruik van maakt. Wanneer je thema dit niet heeft, zal je dus zelf met CSS aan de slag moeten gaan om dit goed te krijgen.
Gutenberg is een groot probleem voor normale gebruikers van Wordpress. Ipv simpel tekst editten is het voor de meeste gebruikers veel te complex geworden.
Het is meer een kwestie van wennen denk ik. Het zal steeds beter en makkelijker gemaakt worden.
Hey Maikel, Erg nuttig! Alleen even een vraagje: ik maakte nieuw blok met tekst, en kan daarvan het lettertype niet wijzigen. Heb ik daarin plugin voor nodig?
Nee, hiervoor kun je de extra CSS optie voor gebruiken. Wanneer je een CSS class koppelt aan een blok en hier in CSS een ander lettertype voor aangeeft, dan zal je geen extra plugin nodig hebben.
Hoi Maikel,
Dank weer voor je uitgebreide en duidelijke uitleg. Ik maak voor sommige websites gebruik van de templates en het platform van Elegant Themes. Deze gebruiken de Divi Editor: je kiest bij het toevoegen van content voor deze editor in plaats van de standaard Wordpress Editor. Divi bestaat ook uit blokken en lijkt, zo op het eerste gezicht, erg op Gutenberg. Is de Divi Editor door Gutenberg overbodig geworden?
Ik denk dat Divi, zeker nu in het begin, meer mogelijkheden heeft dan Gutenberg. Het is dus niet direct overbodig.
Wat ik wel verwacht is dat de pagebuilder plugins op termijn zich meer richting op een koppeling met Gutenberg. Dat het een soort van extra add-on wordt, waardoor je veel meer met Gutenberg kunt doen.
Of dit daadwerkelijk gaat gebeuren is natuurlijk de vraag. Wellicht hebben de makers betere ideeën om de pagebuilders echt uniek te houden.