WordPress Gutenberg editor uitgelegd

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:

Abonneer je op mijn YouTube kanaal

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.

Klik hier voor de Gutenberg editor online training

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

Beschikbare blokken in de Gutenberg editor

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.

WordPress Gutenberg Editor

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.

Nieuw bericht met Gutenberg in WordPress

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

Blok kiezen in WordPress Gutenberg

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.

Document instellingen in Gutenberg

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.

Klik hier voor de Gutenberg editor online training

2 reacties Voeg ook een reactie toe

  1. 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.

Geef een reactie