Handige tips om met Gutenberg te leren werken (deel 1)

Roeien met de riemen die we hebben : De Gutenberg Editor.

Ik heb van mijn aversie van de Gutenberg Editor nooit echt een geheim gemaakt. Ik ben hier allesbehalve dol op. Toch is het de standaard editor geworden en we kunnen natuurlijk allemaal om een kampvuur gaan zitten kniezen en elkaar vertellen dat Video2000 en CD-i toch echt veel beter waren dan… of gewoon aan de slag gaan met de gereedschappen die we voorhanden hebben.

Een derde mogelijkheid is natuurlijk altijd Gutenberg helemaal over te slaan en aan de slag te gaan met een volwassen pagebuilder als elementor. Maar in dit blog artikel kijken we vooral naar Gutenberg. Vandaar een aantal handige tips om met Gutenberg te leren werken.

1. Leer de interface kennen

Een nogal voor de hand liggende tip. Maar niet geheel onbelangrijk. Gutenberg heeft een compleet andere layout dan de oude editor van WordPress. Je pagina is opgebouwd uit zogenaamde ‘content blocks’. Zo’n ‘content block’ selecteer je door op de plus links boven op de pagina van je editor te klikken. Vervolgens verschijnt er rechts een venster met een aantal instellingen die van toepassing zijn op het op dat moment actieve content blok.

Experimenteer. Schrijf eens een bericht of maak eens een pagina waarin je al die contentblokken uitprobeert. Welke instellingen zijn er en wat is het effect?

Wees je jezelf er ook van bewust dat door nieuwe plugins toe te voegen, nieuwe contentblokken aan je editor toegevoegd kunnen worden.

2. Maak ook gebruik van de content blokken

Dank zij Gutenberg is het nu ook standaard mogelijk om bijvoorbeeld iets als een knop in te voegen in een pagina. Maak hier gebruik van als je mensen tot actie over wilt halen. Een knop is zoveel meer effectief als bijvoorbeeld een simpele link.

3. Maak gebruik van de ‘/’ shortcut.

Vind je het onhandig, dat je steeds op de plus moet klikken voor een nieuw blok? Maar dat hoeft helemaal niet. Tik je namelijk een ‘slash’ in (‘/’) en begin je dan de naam van een blok te typen, dan zal Gutenberg de naam aanvullen. Klik je op Enter wordt dat blok gekozen.

4. Drag en drop je afbeeldingen!

Dit is werkelijk een hele mooie. Enkele maanden terug klaagde ik nog, dat Gutenberg zo vervelend deed met afbeeldingen. Dat was geheel ten onrechte. Gutenberg gaat juist heel mooi om met je afbeeldingen, maar dat was op dat moment nog een ‘undocumented feature’. Je kan namelijk regelrecht vanuit je desktop een afbeelding ‘verslepen’ naar de exacte plaats in de tekst waar je hem hebben wilt. WordPress/Gutenberg zorgt er dan zelf voor, dat de afbeelding wordt geüpload.

Had toch even handig geweest, als dit in een vroeger stadium al goed gedocumenteerd was, wat dit is wel enorm handig!

5. Leer de keyboard shortcuts kennen!

Ik ben dol op keyboard shortcuts. Ik type bijvoorbeeld veel liever control B om tekst vet te krijgen, dan dat ik de tekst markeer, op de knop druk in de werkbalk van mijn editor en dan weer door ga met typen. Keyboard shortcuts maken je productiever. En gelukkig kent Gutenberg al die shortcuts die de oude editor kende ook. Maar er is een aantal hele nieuwe bijgekomen. Door Shift – Alt – H te toetsen krijg je een dialoog met alle beschikbare shortcuts. Kijk hier regelmatig naar, tot je de belangrijkste voor jezelf onder de knie hebt.

6. Je kan het type van een blok veranderen!

Ok, dit is echt mooi. En tot nu toe heb ik dit nog niet in een andere pagebuilder mogen ontdekken. Heb je in Gutenberg een blok aangemaakt en het is het verkeerde type? Of heb je zojuist een nieuwe plugin geïnstalleerd waardoor nieuwe bloktypen beschikbaar zijn gekomen en dat nieuwe bloktype past veel beter dan het oude? Je kan met Gutenberg heel makkelijk een blok van type wisselen. Klik hiervoor op de knop met de ‘ronde pijltjes’ in je toolbar…

7. Zet je toolbar vast!

Nu we het toch over die toolbar hebben, ik word er werkelijk doodmoe van hoe deze in en uit het scherm ‘knippert’. Gelukkig kan je zelf kiezen wat je er mee wilt doen. Door te klikken op de drie puntjes rechts op de toolbar, kan je verschillende vormen van gedrag van die toolbar instellen. Zo zet ik hem zelf graag vast boven aan het scherm. Werkt een stuk fijner.

8. Herschik je tekst met Drag en Drop

In de oude editor verplaatste je tekst met knippen en plakken. Dat kan in Gutenberg nog steeds. Maar aangezien Gutenberg automatisch je tekst organiseert een een blok per paragraaf, dan kan je ook heel makkelijk je tekst herschikken door met de blokken te slepen.

9. En gebruik Shift-Enter wanneer je een nieuwe regel zonder nieuwe paragraaf wilt.

Geen nieuwe feature, dit zat ook al in de oude editor, maar veel mensen kenden de mogelijkheid niet. Klik je op Enter dan krijg je een nieuwe paragraaf.

Zoals dit. Maar als je nu wel op een nieuwe regel wilt beginnen, maar niet met een nieuwe paragraaf,
zoals dit… hoe moet dat dan?

Door in plaats van op enter op shift-enter te klikken krijg je precies dat voor elkaar. Handig toch?

10. Gebruik kolommen, maar niet die halfbakken optie van Gutenberg zelf

Gutenberg komt met de optie om tekst in kolommen te gebruiken. Maar de optie die Gutenberg mij biedt kan mij absoluut niet bekoren, sterker nog… ik heb er altijd ruzie mee en als ik het Internet afzoek dan ben ik niet de enige met dit probleem.

Gelukkig is er een plugin die kolommen aan Gutenberg toevoegt, die wel Kadence Blocks werkt. De plugin voegt een aantal nuttige nieuwe blokken toe aan je Gutenberg editor, waaronder een werkende kolommen plugin. Van harte aanbevolen.

11. Lees verder voor de volgende tips…

En de laatste tip in de lijst: Lees ook de blogpost voor volgende week, waarin ik je meer Gutenberg tips geef.

Zoals eerder aangegeven, ik ben geen groot fan van de Gutenberg editor. En ik vermoed dat er nog heel wat moet gebeuren, voor ik dit wel zal worden. Schoorvoetend ben ik gaan toegeven om de Gutenberg editor te gaan gebruiken om te bloggen, maar voor het bouwen van mijn pagina’s maak ik veel liever gebruik van een product als ‘Elementor Pro‘.

Kies je voor een nieuwe website via WordPress XPress, dan heb je de keuze uit maar liefst drie pagebuilder/editors om je pagina’s op te bouwen. Want de ‘oude’ Classic editor staat naast de Gutenberg editor geïnstalleerd. Daarnaast krijg je ook de beschikking over Elementor Pro.