Hij is er sinds een goede 2 jaar, de WordPress Gutenberg editor. Ik ken weinig bloggers die echt laaiend enthousiast zijn over de nieuwe interface van WordPress. Maar we zullen er toch aan moeten wennen, want wie nu WordPress installeert krijgt standaard de Gutenberg editor aangeleverd.
Lees dit artikel als je meer wil weten over het hoe en waarom van de WordPress Gutenberg blokeditor. In dit stuk wil ik je graag snel op weg helpen met de nieuwe WordPress-interface.
WordPress Gutenberg editor volledig benutten? Gebruik een WordPress-thema dat “Gutenberg ready” is
De meeste bouwers van WordPress-thema’s zullen zeggen dat hun thema prima overweg kan met Gutenberg. Zeker wanneer het theme in kwestie nog geen 3 jaar op de markt is. Die bewering klopt ook wel. Je vertrouwde WordPress-thema zal waarschijnlijk niet vastlopen.
Om echter ten volle te kunnen genieten van de flexibiliteit die de Gutenberg editor biedt, kies je toch beter voor een thema dat van begin af aan is ontworpen met de WordPress Gutenberg editor in gedachten. Deze themes zijn trouwens vaak er minimalistisch opgezet. Precies om de gebruiker maximale vrijheid te geven om pagina’s naar eigen smaak en goeddunken in te richten.
Uiteraard zijn de laatste themes van WordPress zelf – zoals WordPress Twenty Twenty compatibel met Gutenberg. Andere opties zijn:
Enkele tips om te starten met de Gutenberg editor
Voor wie voor het eerst een nieuw blogbericht of -pagina wil aanmaken in Gutenberg is het misschien even schrikken. Want waar is het vertrouwde venster met daarboven de functieknoppen naartoe?
Anders dan vroeger werk je nu niet in één groot (tekst)venster, maar is je artikel opgebouwd uit allemaal blokken. Letterlijk: stukjes content die je afzonderlijk kan bewerken.
Toolbar (linksboven)
Helemaal bovenin vind je de ribon met een zestal knoppen:
Blok toevoegen (het plusje)
Klik op het plusje (links) en je vindt er alle beschikbare blokken waaruit je je pagina kan opbouwen. Van een simpele tekstparagraaf over quotes en citaten tot en met Youtube-video’s en scheidingslijnen. Zoek en selecteer een contentblok. Het wordt ingevoegd daar waar de cursor staat. Je kan het blok in kwestie meteen beginnen bewerken.
Merk op dat je ook de mogelijkheid hebt om een blok toe te voegen door op het plusje te klikken tussen de verschillende blokken op je pagina OF door gewoon / te tikken in een lege regel.
Ongedaan maken en Opnieuw
De knoppen zijn een stuk vertrouwder, niet? Gebruik ze om een bewerking te cancelen dan wel terug door te voeren.
Inhoudstructuur
Eén van de nadelen van het werken met de WordPress Gutenberg editor? Het kan lastig zijn om te navigeren in een pagina met erg veel blokken. Een klik op de knop Inhoudstructuur geeft je een overzicht van de inhoud van je pagina (Document schets). Klik de plek aan die je wil bewerken en je wordt er meteen naartoe gebracht. Handig!
Hier vind je trouwens ook enkele statistiekjes over het aantal woorden, het aantal gebruikte blokken, tussenkopjes en paragrafen…
Bloknavigatie
Ook dit is een manier om snel een overzicht te krijgen van hoe je pagina is opgebouwd. Zoals je wellicht al raadde worden hier de verschillende blokken getoond waaruit je pagina bestaat. En ook hier weer: klik om snel naar een bepaalde sectie te gaan.
Gereedschap
Hier kan je kiezen om een bepaald contentblok te selecteren dan wel te bewerken. Vlak boven elk blok bevindt zich een balkje met gereedschapsknoppen voor dat stukje content. Merk op dat niet elk blok over hetzelfde gereedschap kan beschikken. Zo heeft een tekstblok andere instelmogelijkheden dan pakweg een blok voor afbeeldingen of een video.
Toolbar (rechtsboven)
Concept opslaan
Hiermee kan je je werk (voorlopig) opslaan.
Voorbeeld
Klik op deze knop om te zien hoe je artikel er – eens gepubliceerd – komt bij te staan. Jij ziet met andere woorden precies wat je bezoeker voorgeschoteld krijgt. Het duurt meestal een paar seconden eer het voorbeeld op het scherm verschijnt.
Het is “best practice” om eerst je concept op te slaan vooraleer een voorbeeld op te roepen.
Publiceer…
Gelieve hier alle opties en instellingen te vinden voor het publiceren van je pagina of blogbericht. Het is hier dat je een gepubliceerd bericht ook opnieuw in concept kan zetten en het tijdstip van publicatie kan instellen.
Instellingen (tandwieltje)
Hier heb je nog een hele reeks instellingen voor je pagina. Opvallend is dat dit onderdeel bestaat uit twee tabs. Document en Blok.
Document herbergt de zaken die je in de klassieke WordPress editor in de rechterkolom terugvond. Het gaat dan om dingen als (het instellen van) de publicatiestatus, de verschillende revisies, de uitgelichte afbeelding, de categorieën tags enzovoorts.
Via Blok heb je dan weer (veel) extra mogelijkheden om individuele contentblokken op te maken en aan te passen. Wat die opties precies zijn hangt wederom af van de geselecteerde Gutenberg blokken.
Meer gereedschap en opties (drie puntjes)
Hier vooral wat extra’s om de WordPress Gutenberg editor wat meer naar je hand te zetten.
Top toolbar
Brengt alle blokgereedschap en documentgereedschap op één plek samen. Je krijgt dan een rij knoppen bovenin het scherm. Dit kan erg handig zijn wanneer de pagina door de veelheid aan blokken onoverzichtelijk wordt. En het speelt ook in op de natuurlijke reflex om met de muis functies te activeren aan de bovenkant van het scherm.
Spotlight modus
Laat je toe om als blogger al je aandacht te focussen op één enkel Gutenberg blok, namelijk het blok dat je op dat moment aan het creëren/bewerken bent. De andere omliggende Gutenberg blocks worden gedimd.
Schermvullende weergave
De werkbalk van WordPress verdwijnt uit beeld voor een nog breder canvas. Naast het feit dat dit nuttig kan zijn als je werkt met plaatjes en andere visuele content, zorgt dit ook voor minder afleiding.
Wisselen tussen de visuele editor en de code editor
Normaliter werk je in de visuele editor. Wil je om de een of andere reden HTML toevoegen, dan kan je de code editor gebruiken.
Blokbeheerder
Nog een nadeel van de blokeditor van WordPress: het is soms lastig om snel het juiste Gutenberg blok te vinden om mee aan de slag te gaan. WordPress zelf heeft al een hele bibliotheek aan contentblokken, en ook externe partijen bieden (via plugins) meerdere blokken aan.
Om te vermijden dat te veel tijd wordt verloren met het zoeken naar het juiste blok, kan je via de blokbeheerder bepalen welke specifieke blokken er getoond worden (en welke niet in beeld kommen). Zo wordt je niet geconfronteerd met blokken die je toch nooit ofte nimmer gebruikt.
Voordelen van de nieuwe WordPress editor?
Toegegeven, voor wie de klassieke editor van WordPress gewend is, is het allicht wennen aan de nieuwe workflow. Even doorbijten en je wordt er waarschijnlijk sneller toe aangezet om artikels te maken die iets creatiever zijn. Wat leuker om te lezen voor je bezoekers, ook.
Je pagina achteraf bewerken (grote stukken content toevoegen of juist verwijderen) is eveneens makkelijker. Links van elk blok bevinden zich pijltjes waarmee je het blok in kwestie kan verslepen en ergens anders neerzetten.
En daarnaast heb je natuurlijk veel meer mogelijkheden om ieder blok vorm te geven en op te maken zonder dat er ook maar één brokje code aan te pas komt.
Nog meer blokken?
Standaard biedt WordPress dus al heel wat mooie Gutenberg blocks. Echter, veel WordPress-ontwikkelaars zijn druk bezig met het bouwen van hun eigen set blokken. Fraaiere versies van de standaardoplossingen en voor erg uiteenlopende toepassingen. Kijk maar eens naar de verzamelingen van:
Creëer zelf herbruikbare blokken
Nog zo’n pluspunt van de Gutenberg editor is het feit dat je erg makkelijk zelf een blok kan maken om dit dan – later – opnieuw te gebruiken elders op je blog.
Deze video toont hoe je zo’n herbruikbaar blok aanmaakt en gebruikt. Daarnaast is het ook mogelijk om verschillende blokken samen te voegen tot één groot blok. Een complete sectie verhuizen en/of hergebruiken wordt zo kinderspel.
Sneltoetsen in de Gutenberg editor
Soms kan het erg handig zijn om sneltoetsen te gebruiken om een bepaalde bewerking te doen. Ik beperk me hier tot de meestgebruikte toetsencombinaties.
| Toetsencombinatie | Functie |
|---|---|
| / | Selecteer een blok |
| CTRL+B | Maak tekst vet |
| CTRL+I | Maak tekst cursief |
| CTRL+Z | Bewerking ongedaan maken |
| CTRL+SHIFT+Z | Laatste bewerking opnieuw doen |
| SHIFT+ALT+O | Toon bloknavigatie |
| CTRL+S | Concept opslaan |
| CTRL+K | Voeg een hyperlink in |
| SHIFT+ALT+H | Toon alle sneltoetsen |
Geen zin in Gutenberg? Gebruik de plugin “Klassieke editor”
Deze plugin stelt je in staat om moeiteloos te switchen tussen de oude vertrouwde editor en Gutenberg. Het is wel opletten want WordPress heeft al aangegeven dat Klassieke editor nog tot 2021 ondersteund zal worden. Of de plugin daarna nog naar behoren zal werken, is koffiedik kijken…
En tot zover enkele tips omtrent (het werken met) de nieuwe Gutenberg editor van WordPress. Probeer het uit en kijk of het voor jou werkt!
Veelgestelde vragen over WordPress Gutenberg
Via de Gutenberg editor in WordPress kan je wat sneller boeiende content maken. De nieuwe editor spoort je aan om artikels te maken met veel meer audiovisuele elementen. Dit om de moderne internetter aan aangename gebruikerservaring te geven.
Nee, de bestaande content, gemaakt met de klassieke editor van WordPress wijzigt niet. Die content zit standaard vervat in het Klassiek Gutenberg-blok. Je kan het blok wel omzetten naar blokken waarna je deze individueel kan bewerken als waren het Gutenberg blocks.