WordPress lanceert Gutenberg: nieuwe editor met focus op flexibiliteit

Flexibiliteit: dat is het uitgangspunt van de gloednieuwe teksteditor die WordPress binnenkort lanceert. In de nieuwe editor schrijf je niet langer enkel in paragrafen, maar kan je kiezen uit tientallen ‘blocks’ om je artikel of pagina de inhoud te geven die jij echt wil.

In augustus 2018 kondigde WordPress de grootste vernieuwing aan sinds de launch van het content management systeem in 2003. Zo groot zelfs dat die een eigen naam kreeg: Gutenberg, genoemd naar de uitvinder van de boekdrukkunst Johannes Gutenberg. En die vergelijking is best treffend. De nieuwe teksteditor gooit het principe van artikels die voor 90% uit tekst bestaan over boord en maakt het schrijvers nu makkelijker om hun website te illustreren met beeldmateriaal, citaten, knoppen, kolommen en meer.

Eenvoud lijkt het sleutelwoord in Gutenberg

Hoewel Gutenberg de bestaande teksteditor pas zal vervangen vanaf WordPress 5.0, de major release die in november 2018 beschikbaar gemaakt wordt, kan iedereen er nu wel al mee kennismaken. En dat is ook wat ik deed. Sinds augustus is de bèta-versie van Gutenberg beschikbaar als plugin en is het aangeraden om deze enkel te gebruiken op websites buiten productie.

Blocks

Van zodra de plugin geactiveerd is, kan je beginnen met het ontdekken van deze volledig nieuwe ervaring. En er valt veel te ontdekken, te beginnen met de opgefriste lay-out waar eenvoud en rust centraal staan. Ideaal voor het steeds stijgende aandeel van mobiele surfers! Ervaren WordPress-gebruikers zullen er nog steeds snel hun weg vinden, want de typische twee-kolommen-layout is gebleven.

Het revolutionaire zit ‘m niet zozeer in het design, maar in het achterliggende principe. Artikels schrijven gebeurt vanaf nu door het toevoegen van blocks, waardoor het toevoegen van video, tabellen, citaten en hero images kinderspel geworden is. Zelfs een overzicht van je andere recente berichten tonen, is mogelijk via de intuïtieve drag-and-drop-interface en zonder één regel code te schrijven. Blocks toevoegen kan door op het plus-icoon te klikken en je keuze te maken uit een 30-tal blocks die zo geordend staan dat je met enkele kliks gevonden hebt wat je wil. Zo krijg je eerst blocks te zien die je regelmatig gebruikt op je website.

Gutenberg zit ook vol verborgen, maar handige functies. Nog sneller een block toevoegen? Dat kan door de auto-suggesties: typ je een slash gevolgd door ‘afbeeld’, dan toont WordPress je enkele blocks die je mogelijk wil gebruiken om een afbeelding in je artikel te plaatsen. Weet je even niet meer wat je nu juist al geschreven hebt? Op basis van je headings maakt Gutenberg automatisch een inhoudsopgave van je bericht. Wie nog meer inzichten wil, kan eenvoudig zien hoeveel woorden die al geschreven heeft, hoeveel titels je gebruikt en in hoeveel paragrafen en blocks die staan. Gutenberg biedt je dus een pak meer analysemogelijkheden dan de huidige TinyMCE-editor!

Schrijven sneller gemaakt met auto-suggesties (Foto: kinsta.com)

Geven en nemen

De nieuwe editor voegt niet alleen veel nieuwigheden toe, maar laat ons ook afscheid nemen. Van de TinyMCE-editor, de Wysiwyg van WordPress, bijvoorbeeld. Al verdwijnt die niet helemaal. De content zit nu niet meer in de TinyMCE-editor, maar TinyMCE zit in de content: in het tekstblok, meer bepaald. Ook shortcodes — één van de unieke corefunctionaliteiten van WordPress — verdwijnen. Met shortcodes kon je snel een complexer onderdeel in je artikel plaatsen. Krachtigere blocks nemen nu die functie over. WordPress noemt blocks dan ook de evolutie van shortcodes.

En developers?

Blocks combineren PHP en ES6

Ook voor developers brengt Gutenberg nieuwe uitdagingen met zich mee. Mocht je in het grote basisaanbod aan blocks nog niet vinden wat je zoekt, kan je in de code duiken en zelf een block definiëren. Dat kan al in enkele minuten, maar vereist wel enige kennis van front end development. En dat is volgens mij, als back end developer, de echte grote verandering van Gutenberg. Het voornamelijk back end CMS WordPress lijkt mee te willen surfen op de trend om JavaScript ook te gaan gebruiken voor back end, want Gutenberg is gebouwd in ES6 en React en maakt ook gebruik van de WordPress REST API.

Het maken van een custom block voelt eerst nog vertrouwd: met enkele regels PHP voeg je een block toe en link je naar een JavaScript-bestand waarin je de block echt registreert. Wie vertrouwd is met ES6 bepaalt in een mum van tijd hoe de block er moet uitzien op je website en in de nieuwe Gutenberg-editor. Ook dat is nieuw: what you see is what you get, letterlijk, want schrijvers zien hun artikels nu op exact dezelfde manier als hun lezers.

Een block maken is op zich dus niet moeilijk, zeker als je de uitgebreide documentatie volgt. Gutenberg komt met een nieuw handboek dat in 12 hoofdstukken uitlegt hoe je je website naar een nog hoger niveau tilt met deze ingrijpende verandering.


Benieuwd naar Gutenberg? Op deze speciale website ontdek je de belangrijkste functies van WordPress’ nieuwe teksteditor. Speciaal is de website inderdaad, omdat je er ook meteen kan testen of deze vernieuwde ervaring iets voor jou en jouw website is!