Handleiding WordPress Gutenberg

Wil je weten hoe de nieuwe bewerker van WordPress werkt?
Aan de hand van deze handleiding WordPress Gutenberg leer je in no-time hoe je aan de slag kan gaan met dit waardevolle gereedschap.

Wat is Gutenberg?

Gutenberg is de nieuwe content-maker en -bewerker die al geruime tijd beschikbaar was als plug-in en sinds december 2018 met de lancering van WordPress 5 de standaard is om berichten en pagina´s te bewerken.

De Gutenberg-editor gebruikt blokken om alle mogelijke soorten inhoud van de pagina´s en blogberichten te maken.
Het is bedoelt om meer eenheid te scheppen in de verschillende manieren van WordPress om pagina-inhoud aan te passen.

Denk aan de vele verschillende paginabouwers en de niet zo gebruikersvriendelijke shortcodes.
Door bovendien aan de huidige coderingsstandaarden te voldoen is Gutenberg volledig op de toekomst gericht, om alle nieuwe mogelijkheden te kunnen benutten.

De blokken zullen de manier hoe gebruikers en ontwikkelaars in WordPress werken volledig veranderen. Het maakt het bouwen van meer gecompliceerde webpagina´s eenvoudiger en intuïtiever. Het maakt het publiceren en werken met website-inhoud eenvoudiger voor iedereen, ongeacht de technische kennis en vaardigheden.

Hoe werkt de Gutenberg bewerker?

De Gutenberg-bewerker is dus een op blokken gebaseerde editor, maar wat betekent dat eigenlijk?

In essentie vervangt Gutenberg het enkele bewerkingsveld, zoals bekend van tekstbewerkers als Microsoft Word door meerdere individuele velden genaamd “blokken”.
Met deze blokken kan je veel complexere ontwerpen maken. Ook kan je flexibeler en efficiënter werken dan met de huidige WordPress-editor.

Ok, maar wat is een blok dan?
Nou, een blok kan vrijwel alles zijn. Je kan bijvoorbeeld blokken hebben voor:

• Platte tekst
• Afbeeldingen
• Ingesloten filmpjes
• Buttons
• Widgets ( ja, dezelfde widgets die je nu ook al in de zijbalk gebruikt)
• Tabellen
• En nog veel meer..
  

Nog een enorm sterke kant van Gutenberg is dat ontwikkelaars nieuwe soorten blokken kunnen maken die je via plug-ins kan toevoegen voor nog meer mogelijkheden.

Elk blok staat op zichzelf en kan je op individuele basis manipuleren.

Dit is bijvoorbeeld een Gutenberg voorbeeld van een pagina met een tekstblok en een afbeelding blok. Zie hieronder hoe gemakkelijk je deze twee blokken opnieuw kan rangschikken door op een knopje te klikken:

Omdat elk blok nu “apart” is, kan je nu ook alleen voor specifieke blokken dingen aanpassen. Denk hierbij bijvoorbeeld aan achtergrondkleur en -afbeelding, tekstgrootte, etc.

Over het algemeen kan je dus zeggen dat Gutenberg meer flexibiliteit biedt en daarbovenop meer controle.

Dus Gutenberg is dan een paginabuilder, toch?

Ehh, nou niet helemaal. 

Althans niet bij de introductie. Gutenberg biedt meer mogelijkheden om reguliere inhoud zoals blogberichten en standaardpagina’s vorm te geven, maar was niet direct als vervanger voor paginabouwers bedoeld. In de basis miste Gutenberg in 2018 namelijk twee essentiële dingen:

• Flexibele kolommen(er was wel een experimenteel kolomblok, maar dat was erg simpel )
• Drag & drop (je kon wel al sommige onderdelen slepen & loslaten en herschikken, maar´t werkte toen nog niet optimaal)

Buiten het gemis van deze twee dingen was Gutenberg wel in staat om de noodzaak van paginabouwers voor de meeste “standaard” pagina-inhoud te elimineren. Bovendien creëerde het een universele manier voor het maken van meer complexe lay-outs in WordPress.

Inmiddels is Gutenberg ook volledig geschikt voor meer complexe pagina’s, zoals landingspagina´s.

Begin 2019 hadden paginabouwers (nog) de voorkeur, zoals Elementor, Beaverbuilder, Brizy, Divi en SiteOrigin pagebuilder. Maar inmiddels heeft Gutenberg ook alle opties voor grotere flexibiliteit en uitgebreidere mogelijkheden:

• Soepel werkende drag & drop mogelijkheden
• Ongelijke breedte kolommen
• Meerdere vooraf ingestelde sjablonen
• Geavanceerde styling-opties
• Regelaars en schuifjes voor o.a. marges en kleuren
• Ontwerpinstellingen gericht op mobiele apparaten

In de loop van 2020 zal je met Gutenberg zelfs alle delen van de website kunnen bewerken en zal het bewerken zoveel makkelijker worden. Tot die tijd zou je hiervoor eventueel nog kunnen uitwijken naar, of combineren met Beaverbuilder, Divi of Elementor. Dit zijn op zich prima plug-ins van derden, maar door de komst van Gutenberg is de toekomst van al dit soort paginabouwers niet meer zo zeker. Daarom raden wij aan om je zo veel mogelijk op de standaard blokkenbewerker van WordPress zelf te richten.

Hoe krijg je de klassieke editor weer terug op je website?

Gutenberg heeft de standaard bewerker in WordPress 5.0 helemaal vervangen, maar wanneer je toch liever met de “oude versie” wil werken zijn er twee manieren om dat voor elkaar te krijgen:

• Je kan het Klassieke Gutenberg blok gebruiken
• Of je kan de klassieke editor plug-in installeren

Klassieke Gutenberg blok

Het klassieke blok van Gutenberg is vrijwel gelijk met de originele Tiny-MCE editor. Het enige verschil is de knop media toevoegen, die staat nu tussen de andere icoontjes.

De balk bovenin en rechts veranderen op deze manier wel naar de nieuwe look, dus op deze manier kan je rustig wennen. Wanneer je de update naar versie 5 van WordPress hebt gedaan wordt alle bestaande teksten en afbeeldingen in klassieke blokken geplaatst.

De klassieke bewerker plug-in

Wanneer de beheerders van de website echt hele grote moeite hebben met de nieuwe bewerker is het mogelijk de klassieke bewerker plug-in te installeren. Dit is natuurlijk niet optimaal, dus het is beter om ze met deze handleiding voor WordPress Gutenberg “om te scholen”. Er is namelijk ook door WordPress aangegeven dat deze plug-in tot ongeveer 2022 blijft werken.

Alleen wanneer je gekke dingen ziet gebeuren na de update naar WP 5.0 zou ik adviseren om deze plug-in wel te gebruiken. Tot 2022 kan je dan af en toe controleren of alles wel goed werkt door de plug-in tijdelijk uit te zetten. Op het moment dat alles wel (weer) goed werkt kan de plug-in dan verwijderd worden.

Hoe de klassieke editor plug-in installeren? … gewoon op de standaard manier:

• Ga naar Plug-ins → Nieuwe toevoegen
• Zoeken naar “Classic editor”
• Klik op Nu installeren
• Wacht tot de knop Nu activeren verschijnt om de plug-in te Activeren
• Klik op Activeren

Zodra je de plug-in activeert, gebruikte je website automatisch weer de Klassieke bewerker. Wanneer je dus naar Berichten → Nieuw toevoegen gaat zal alles er weer zoals vanouds uitzien:

Gebruik een Gutenberg-thema voor de beste resultaten

Hoewel Gutenberg is ontworpen om te werken met elk WordPress-thema (net als de WordPress-editor), zal het kiezen van een thema dat specifiek Gutenberg-compatibiliteit biedt, enkele grote voordelen bieden.

Ten eerste kunnen thema’s een ingebouwde vormgeving bieden voor de Gutenberg-blokken. Nog beter, thema’s kunnen deze vormgeving daadwerkelijk in de editor laten zien. Dat betekent dat je de echte vormgeving van je blokken kan zien terwijl je de webpagina bouwt.

Gutenberg-thema’s zullen ook in staat zijn om vooraf gemaakte sjablonen te mee te geven die uit verschillende blokken bestaan. Op deze manier hoef je alleen de gewenste inhoud aan te klikken, de teksten of afbeelding aan te passen en op publiceren te klikken.

Op het moment van schrijven van deze handleiding voor WordPress Gutenberg zijn de verschillen tussen de thema´s voor wat betreft deze aanvullende mogelijkheden nog niet zo groot, maar dat gaat zeker veranderen.

Bouw je eerste lay-out met de WordPress Gutenberg-editor

Oké – nu dat je een beetje een idee hebt wat Gutenberg is zal ik hieronder laten zien hoe je de nieuwe WordPress bewerker daadwerkelijk kunt gebruiken om een ​​volledige pagina lay-out te maken.

Je kan natuurlijk je eigen WordPress website gebruiken. Maar anders kan je ook de voorbeeld website van Gutenberg of Frontenberg gebruiken om te oefenen. Na het lezen van dit artikel ben je dan helemaal klaar om van start te gaan met het echte bouwen.

Een korte rondleiding door de Gutenberg-interface

Laten we eerst even de belangrijkste elementen van de interface van Gutenberg bekijken voordat we beginnen met het toevoegen van blokken:

• (A) – hiermee kan je nieuwe blokken toevoegen.
• (B) – knoppen ongedaan maken / opnieuw uitvoeren
• (C) – geeft toegang tot documentinstellingen, met betrekking tot zaken als categorieën en tags, aanbevolen afbeeldingen, enz. (vergelijkbaar met de klassieke editor-zijbalk van WordPress)
• (D) – wanneer je een afzonderlijk blok hebt geselecteerd, geeft dit toegang tot instellingen die specifiek zijn voor dat blok
• (E) – hiermee krijg je toegang tot een live voorvertoning van je bericht of kan je het bericht publiceren of bijwerken
• (F) – zodra je wat blokken hebt toegevoegd, zul je hier echt met de inhoud van je bericht werken

Blokken toevoegen aan Gutenberg

Zoals ik al in het intro aangaf, gebruik je afzonderlijke ‘blokken’ om je lay-outs met Gutenberg te bouwen. Als je een nieuw blok wilt toevoegen, hoeft je alleen maar op het plus pictogram te klikken en het type inhoud te selecteren dat je wil toevoegen:

In het bovenstaande voorbeeld liet ik zien hoe je een eenvoudig alineablok toevoegt. Maar Gutenberg heeft nog veel meer verschillende blokken, verdeeld onder verschillende tabbladen:

De Meest gebruikt en Herbruikbaar tabbladen zijn uniek voor jou en helpen je snel toegang te krijgen tot blokken die het meest relevant zijn voor je website. Meest gebruikt is zoals de naam al aangeeft gebaseerd op de elementen die je vaak gebruikt, terwijl je alle (bewerkte) blokken kan opslaan als Herbruikbaar blok om eventueel opnieuw ergens op je website te hergebruiken. Om toegang te krijgen tot alle blokken, gebruikt je de andere tabbladen, zoals o.a. Opmaak, Widgets en Insluitingen.

Qua tabbladen zijn er:

• Algemene blokken – bevat elementaire bouwstenen zoals afbeeldingen, alinea’s ( standaardtekst ), koppen, aanhalingstekens, etc.
• Opmaak : hiermee kan je meer opgemaakte inhoud toevoegen, zoals aanhalingstekens, tabellen of de klassieke WordPress-teksteditor
• Layout Elementen – laat je tekst opsplitsen in kolommen, maar ook knoppen, scheidingstekens of de tag ‘Meer’
• Widgets – hiermee kan je Shortcodes, laatste berichten of categorieën toevoegen. Het is zelfs mogelijk om sidebar-widgets rechtstreeks in Gutenberg weer te geven
• Insluitingen – maak het insluiten van bijvoorbeeld YouTube of Vimeo kinderspel. Nog 30+ andere diensten zijn ook direct beschikbaar.

Sommige thema´s breiden de standaard collectie van blokken uit met blokken en mogelijke extra tabbladen. Ook kan de installatie van een plug-het overzicht er anders laten uitzien.

Een basislay-out bouwen met Gutenberg

Laten we eenvoudig beginnen. Stel dat je gewoon een standaard blogbericht wilt maken met daarin:

• Regelmatige tekst
• Een afbeelding
• Een blikvangercitaat
• En een ingesloten YouTube video

Dit is hoe je het zou doen met Gutenberg:

Eerst zal je waarschijnlijk een volledige bericht in de editor schrijven. Of, wanneer je net als ik liever in een tekstverwerker schrijft kan je het gewoon allemaal kopiëren & plakken. Gutenberg zet dan alle tekst automatisch om naar blokken.

Loop alles nog wel even na, want soms zijn er te veel/weinig blokken, of komen er extra spaties mee.

Toevoegen van andere blokken

Nu de inhoud in blokken is opgedeeld, kan je de muisaanwijzer over de plek zweven waar je je eerste afbeelding wilt invoegen en op het plus pictogram klikken:

Hiermee kan je dan een afbeelding blok invoegen, van waaruit je afbeeldingen kan uploaden of een reeds eerder geüploade afbeelding selecteren uit de mediabibliotheek:

Zodra je de afbeelding hebt geselecteerd en op invoegen hebt geklikt moet deze zichtbaar worden in de pagina lay-out:

Beweeg vervolgens over de plek waar je het blikvangercitaat wilt invoegen en voeg een nieuw blok in. Je kan zoeken naar ‘Pull Quote’ via het zoekveld of naar het tabblad Opmaak gaan:

Vervolgens zie je het nieuwe pull-quote-blok. Om de tekst toe te voegen hoef je dan alleen nog maar in het blok te klikken en te typen:

Wanneer je een YouTube-video wilt invoegen, kan je op dezelfde manier een nieuw YouTube- blok toevoegen via het tabblad ‘ Insluitingen ‘. Als je dan de video wilt invoegen, hoef je enkel de betreffende URL in te voeren en op Insluiten te klikken:

Optioneel – verschillende kolommen maken

Wilt je nog creatiever worden? Gutenberg bevat nu een eenvoudige kolommenfunctie waarmee je snel meerdere kolommen kunt maken met gelijke breedte. Voor andere breedtes zijn er inmiddels al veel Uitbreidingen voor Gutenberg.
Het enige wat je hoeft te doen is het blok Kolommen toe te voegen.Vervolgens kan je dan andere blokken in de kolommen invoegen:

Wanneer je klaar bent, hoeft je enkel nog maar op de knop Publiceren te klikken:

En voila, het werkelijke resultaat kan je bekijken aan de bezoekers kant van je website.

Hoe individuele Gutenberg-blokken aan te passen

Omdat de WordPress Gutenberg-editor erg veel verschillende blokken heeft, kunnen we helaas in deze beknopte handleiding WordPress Gutenberg niet laten zien hoe elk individueel blok kan worden gebruikt.
Maar we kunnen wel een basiskader geven dat van toepassing is op alle blokken.

De inhoud kan je altijd in de eigenlijke tekst van de editor bewerken door de cursor actief te maken:

Voor basis tekststijlen en uitlijning kan je bij elk blok de menubalk gebruiken die wordt weergegeven wanneer de muisaanwijzer over een blok of de inhoud beweegt:

En de geavanceerdere opmaak en instellingen vind je aan de rechterkant op het tabblad Blok.

Om toegang te krijgen tot het bijbehorende tabblad zal het blok dat je wil bewerken actief moeten zijn. Dit is o.a. te herkennen aan het lichtgrijze kader om het blok heen en de knipperende cursor:

Hoe individuele Gutenberg-blokken opnieuw te rangschikken

Wanneer je blokken wilt herschikken, zijn er twee opties. Je kan de pijl Omhoog of Omlaag gebruiken wanneer je over een blok beweegt om het blok in die richting te verplaatsen:

Of je kan de blokken slepen en neerzetten door over een blok te zweven en de muis ingedrukt te houden boven het stippeltjes icoon.(tussen pijl omhoog en omlaag)

De mogelijkheid om het blok te verplaatsen wordt nu ook bevestigd door de weergave van een handje. Ook zal je bij het verslepen blauwe lijntjes zien verschijnen, dit zijn de beschikbare nieuwe plekken voor het blok:

Handige Gutenberg tips

Naarmate je meer bekend raakt met de WordPress Gutenberg-editor, kan je een aantal van deze handige en mogelijk tijdbesparende tips gebruiken.

Nog sneller een nieuw blok maken

We hebben laten zien hoe je blokken kan maken met de invoeg knop.(het plusje) Maar om tijd te besparen, kan je ook blokken maken door een schuin streepje te typen:

/bloknaam

Onmiddellijk verschijnen er automatische voorstellen om je te helpen het juiste blok te vinden. Hier zie je bijvoorbeeld hoe je met het toetsenbord een afbeelding blok maakt:

Heel handig en kan behoorlijk wat tijd besparen!

Bewerk de broncode rechtstreeks

Je kan op elk gewenst moment de broncode voor je volledige bericht bekijken of bewerken door op de drie stippen in de rechterbovenhoek te klikken. Selecteer hiervoor de optie Code-editor:

Herbruikbare blokken en meer..

Via het icoon met de 3 stippen van de menubalk bij het actieve blok kan je het huidige blok ook Als HTML bewerken door deze optie te selecteren. Bovendien zijn hier ook nog andere functies te vinden, zoals Verwijderen en Dupliceren van blokken.

Het toevoegen aan herbruikbare blokken kan heel handig zijn wanneer je op meerdere pagina´s van de website precies dezelfde inhoud wil tonen. Je kan via deze functie het huidige blok toevoegen aan het blok keuzemenu.

Daarom wordt er bij het kiezen van deze optie gevraagd een naam op te geven om het blok herkenbaar te maken. Vanaf dat moment is de inhoud bewerkbaar vanaf elke plek waar het blok is gebruikt en zal deze op alle andere plekken mee veranderen. Dit kan erg handig zijn voor bijvoorbeeld advertenties.

Alles bij elkaar genomen

Zodra je de basiswerking van Gutenberg door hebt, is het best een fijne en intuïtieve tool. Vergeleken met paginabouwers zoals Elementor of Beaver builder is er alleen nog wel een flinke weg te gaan, maar het begin is er in elk geval.

Vooral wanneer je de oude editor van WordPress gewend bent zal je wel wat groeipijnen en worstelingen moeten ervaren om basisacties uit te voeren die de afgelopen jaren altijd als vanzelfsprekend voor je waren.

Gelukkig kan je dan af en toe nog terugvallen op het klassieke blok, maar uiteindelijk verwacht ik dat je niet anders meer zal willen. Wanneer je namelijk eenmaal alles onder de knie hebt zal je merken dat je nu echt lay-outs kan bouwen.

Met het steeds grotere aantal geavanceerde blokken die Gutenberg biedt, krijg je nu veel meer flexibiliteit en mogelijkheden dan de “oude” TinyMCE WordPress-bewerker.

Nawoord

Hoop dat je veel aan deze handleiding voor WordPress Gutenberg hebt gehad en meteen aan de slag bent gegaan. Laat je tips, bevindingen of vragen eventueel hieronder achter, dat stellen we erg op prijs.