Gutenberg WordPress editor: een waardevolle opvolger?

Tijdens de jaarlijkse WordPressconferentie 'WordCamp' is iets groots aangekodigd. Matt Mulenweg - medeopichter van WordPress - vertelt dat de vertrouwde TinyMCE editor in WordPress aan vervanging toe is. Minder knoppen, minder afleiding en meer focus op een leeg schrijfvlak, zodat iedereen er lekker op los kan typen. Dit moet de nieuwe Gutenberg WordPress editor ons brengen, die standaard onderdeel gaat uitmaken van WordPress 5.0. Moet je hier eigenlijk wel zo blij mee zijn en wat zijn de gevolgen voor je website?

Gutenberg vs TinyMCE: een minimale interface

Schrijven zonder afleiding is een van de belangrijkste doelen van de Gutenberg editor. Wanneer je beide editors naast elkaar legt, zie je pas echt wat daarmee bedoeld wordt.

De Gutenberg WordPress editor valt zodanig te minimaliseren dat er vrijwel alleen een leeg scherm met je content overblijft. De toolbar komt pas tevoorschijn wanneer je op een titel, tekst, afbeelding of ander element klikt en zal alleen de opties bevatten die relevant zijn voor dat specifieke element.

Wanneer je op het tandwiel klikt, verschijnt een zijpaneel met aanvullende opties. Net als de toolbar zal de inhoud van het zijpaneel afhangen van het element waar je op hebt geklikt.

Waar je jezelf in het begin waarschijnlijk af zal vragen waar alle opties gebleven zijn, valt deze nieuwe en dynamische aanpak na een paar pogingen wel te waarderen. Het zorgt voor minder afleiding en creëert ongetwijfeld meer focus op je teksten, maar het is de vraag of het ook gebruiksvriendelijker werkt.

Ten eerste zullen de meeste mensen een zichtbare toolbar boven hun teksten gewend zijn. Niet gek ook, aangezien je het in bijna alle programma’s op je computer terugziet. Word, Excel, je internetbrowser: allemaal hebben ze een vaste toolbar bovenin het scherm en iedereen weet hoe het werkt. Een lege pagina met tools die pas tevoorschijn komen als je ergens op klikt, kan dan even schrikken zijn.

Daarnaast zal je veel (nieuwe) tools over het hoofd zien omdat ze verscholen zijn achter een leeg scherm. Het invoegen van tabellen is bijvoorbeeld een nieuwe functie die de TinyMCE editor niet biedt. Maar je moet maar net weten dat deze functie bestaat in de Gutenberg WordPress editor.

De Gutenberg WordPress editor introduceert een nieuwe manier van denken

Naast een minimale interface is er overgestapt naar het werken met blokken. In plaats van één tekstvenster waarin al je inhoud schuilgaat, is elk element van je pagina een apart blok: de titel, een alinea tekst, een afbeelding etc. Het werken met blokken forceert je om kritischer na te denken over de lay-out van je pagina en het uiteindelijke resultaat.

• Is een blok met tekst niet te groot aan het worden in vergelijking met de andere blokken eromheen? Misschien is het goed om de leesbaarheid te verbeteren en grote blokken tekst op te splitsen in kleinere blokken.

• Past een tabel beter boven of onder een afbeelding? Dankzij het makkelijk heen en weer schuiven van blokken ben je daar zo achter.

• Waarom moet een afbeelding even breed zijn als de tekst? Door extra wijde blokken is het mogelijk om buiten de hokjes te denken.

Naast minder afleiding en meer lay-outmogelijkheden heeft de nieuwe blokkenstructuur nog meer voordelen. Zo hoef je jezelf geen zorgen meer te maken of er genoeg witruimte tussen alle elementen op je pagina is. Elk blok krijgt namelijk een vooraf ingestelde hoeveelheid witruimte met zich mee. Bespaart je weer het gepuzzel met de enter-knop.

Ook kan je het opsporen van overbodige regels HTML-code achterwege laten. Het verwijderen van een blok tekst zorgt er gelijk voor dat de achterliggende code die erbij hoort ook verdwijnt. In de huidige editor kan je nog wel eens een overbodige <p> tag aantreffen.

Ten slotte is het onderscheid tussen alle elementen op je pagina veel duidelijker. Zo herken je tijdens het opmaken van je pagina gelijk een titel of quote, iets wat bij de TinyMCE editor lastiger is.

Nieuwtjes in de Gutenberg editor

De Gutenberg editor introduceert in vergelijking met de huidige editor veel nieuwe tools. Zo heb je voor de volgende tools in ieder geval geen plug-in meer nodig.

Tabellen

Via Gutenberg plaats je met één klik een tabel op je pagina, iets wat bij de huidige TinyMCE editor alleen met code kan. Opmaakopties zijn er niet, maar iets is beter dan niets. Ook valt er nog het een en ander te verbeteren aan de responsiveness van de tabellen, aangezien je nu een scrollbar ziet wanneer de tabel niet volledig op het scherm past.

Pullquotes

Tekstopties

Tekst heeft veel aandacht gekregen in de Gutenberg editor. Zo is het mogelijk om direct de tekstkleur, -achtergrond en -grootte aan te passen. Een alinea tekst opsplitsen in meerdere kolommen behoort ook tot de opties, maar werkt helaas (nog) niet responsive.

Zoals eerder al vermeld, hebben titels daarnaast ook een eigen blok gekregen. Het is zelfs mogelijk om naar een titel in je pagina te linken via anchors.

Custom HTML-editor

De nieuwe HTML-editor biedt uitkomst als je zelf liever een tabel, knop of iets anders toevoegt via HTML-code. Het mooie aan deze editor is dat je gelijk het resultaat ziet zonder steeds te wisselen tussen de editor en je website.

Cover image

Met deze optie vergroot je een afbeelding tot buiten de grenzen van je tekstveld en creëer je variatie in de lay-out van je pagina.

Knoppen

Iets simpels als een knop mist ook in de huidige editor. De Gutenberg editor heeft er nu een speciaal blok voor. Door het invoeren van hex-waarden kan je de knop elke kleur geven die je wil.

Externe media toevoegen

Het toevoegen van YouTube-filmpjes en andere externe media is nu nog makkelijker geworden met de embed-optie, die je de mogelijkheid geeft om 35 verschillende mediakanalen toe te voegen aan je pagina.

Extra CSS

Veel blokken hebben de optie om een CSS-klasse toe te voegen. Hierdoor wordt het bijvoorbeeld mogelijk om via CSS-code een ronde knop te veranderen in een vierkante knop. Je kan het zo gek maken als je zelf wil.

Gutenberg-slordigheidjes

De introductie van nieuwe tools betekent echter niet dat alles rozengeur en maneschijn is. Zo zal je onder andere tegen de volgende vragen of beperkingen aangelopen tijdens het testen van de Gutenberg WordPress editor. Hou hierbij wel rekening dat de Gutenberg-plug-in nog een beta-versie is en veel minpunten nog opgelost gaan worden.

• Het is jammer dat je niet meerdere blokken kan selecteren om ze in één keer te verplaatsen naar een andere plek op de pagina. Elk los blok zal je daarom apart moeten verplaatsen, wat uiteindelijk veel tijd in beslag neemt.

• Om van een alinea tekst een lijst met bullet points te maken, zal je eerst een nieuw lijstblok toe moeten voegen, de tekst hierheen kopiëren en het oude tekstblok moeten verwijderen. Hetzelfde geldt voor headers en andere soorten blokken. Dit is natuurlijk erg omslachtig, vooral als je net met schrijven begint en nog niet weet of iets platte tekst blijft of een lijst wordt.

• Het kopiëren en plakken van tabellen, alinea’s tekst en andere blokken is niet mogelijk. Een omweg is om de achterliggende code van een blok te kopiëren via de teksteditor in plaats van de visuele editor.

• Het plaatsen van blokken naast elkaar werkt nog niet optimaal. In de Gutenberg WordPress editor kan je ze inderdaad naast elkaar plaatsen. Maar zodra je live gaat met je website, komen alle blokken weer onder elkaar te liggen.

• Sommige blokken hebben hun witruimte nog niet op orde. Een alinea tekst zit bijvoorbeeld te dicht op de pullquote vastgeplakt, wat niet mooi oogt.

• De verdeling tussen de opties in de toolbar en de aanvullende opties is ook interessant. Waarom zit de tekstgrootte niet in de toolbar van een tekstblok maar in de aanvullende opties? Waarom zijn er überhaupt twee verschillende locaties voor de opties van een element?

• Misschien wel de belangrijkste beperking is de slechte compatibiliteit met het huidige WordPress-landschap. TinyMCE is dé editor waarvan duizenden thema’s en plug-ins afhankelijk zijn om juist te kunnen werken. Als de Gutenberg WordPress editor de nieuwe standaardeditor wordt, zullen veel van deze thema’s en plug-ins niet meer werken. Stel je de gevolgen eens voor wanneer een plug-in als Yoast SEO van de een op de andere dag mist op je website.

Gutenberg WordPress editor: gemengde gevoelens

De huidige TinyMCE editor mist veel voor de hand liggende tools en het is fantastisch dat de Gutenberg editor deze leegte opvult. Aan de andere kant moeten we ons realiseren dat deze nieuwe editor een totaal andere manier van werken forceert. Veel mensen zullen het werken met blokken en een leeg scherm niet gewend zijn. Dit blijkt wel uit de officiële beoordelingen van de editor (die nu nog een plug-in is). Na vier maanden tijd heeft de editor nog steeds niet boven de drie sterren weten te scoren. De volgende twee commentaren vatten de negatieve houding goed samen.

“How should a client who has no real WP experience react when the editor that resembles MS Word… the one they have been used to since the beginning of computers has been turned into some weird, complicated, and pointless visual editor?”

“Sorry, but this looks and feels bad, and is a productivity drain. Hiding UI elements until you click on things is terribly confusing for some new people (the opposite of your goal.) You’ve just doubled the number of clicks I need to accomplish the exact same thing.”

Combineer dit met het gebrek aan compatibiliteit met veel thema’s en plug-ins en je komt al snel tot de conclusie dat het beter is om de Gutenberg WordPress editor voorlopig nog geen vaste hap te maken in de nieuwe WordPress-versie. Dit betekent niet dat het geen bestaansrecht heeft als alternatief naast de huidige TinyMCE editor. Als alle problemen zijn verholpen en er sprake is van een goede compatibiliteit met belangrijke thema’s en plug-ins, kan dit nog wel eens een mooie vervanging voor de TinyMCE editor worden.

Geïnteresseerd in een testritje met de nieuwe Gutenberg WordPress editor? Download ‘m hier of via de plug-in directory in WordPress zelf. Nog niet in het bezit van een WordPress-website? Probeer dan eens onze WordPress Hosting.

Bekijk WordPress Hosting