Ontdek de nieuwe WordPress-editor Gutenberg
In WordPress 5.0 zit een nieuwe WordPress-editor, Gutenberg. En dat verandert behoorlijk wat aan de werkwijze, wat een heleboel voordelen met zich meebrengt. Wat is de filosofie achter deze editor, wat zijn de nieuwigheden, en hoe kan je hem installeren?
Gutenberg introduceert volledig aanpasbare building blocks
Wanneer je nu, in je WordPress controlepaneel, een nieuw bericht aanmaakt, dan kom je in de TinyMCE editor terecht, een WYSIWYG editor. What you see is what you get: elke opmaak aan je tekst wordt meteen getoond. Een prima editor, maar stilaan aan vernieuwing toe.
Daarom werd project Gutenberg opgestart, zo genoemd naar Johannes Gutenberg. Dat is de man die meer dan 500 jaar geleden een drukpers uitvond waarbij de letters aparte blokjes waren (movable type). En precies dat is de basis van Gutenberg: alles wordt blokken (blocks) die volledig aanpasbaar zijn.
Wat is het voordeel van blocks?
Kort door de bocht: met Gutenberg kan je je content opbouwen zoals je met een LEGO-set zou doen: alles komt uit één doos, en voor alle blokjes gelden dezelfde instructies. Dit in tegenstelling tot de TinyMCE editor, waar je specifieke soorten postings had, multimedia content embeddings, widgets enz, die allemaal hun eigen interface vereisten.
Per blok in je content kan je de eigenschappen van het blok bepalen. Een blok kan een paragraaf tekst zijn, een lijst, een header, een galerij enz., en die eigenschap kan je met een simpele klik wijzigen. Maak bijvoorbeeld van een lijn tekst een citaat, wijzig de uitlijning ervan, de versiering, enz.
Je kan ook herbruikbare blokken aanmaken. Wanneer je bijvoorbeeld voor de intro van je posting de ideale opmaak naar jouw smaak gevonden hebt, kan je dat blok samen met zijn instellingen opslaan. In een volgende posting voeg je gewoon jouw zelfgemaakte intro-blok toe.
Zo kan je hele pagina-templates aanmaken, samengesteld uit verschillende blokken. Je moet enkel nog de tekst toevoegen. Een block in wording is de repeatable block, die je op verschillende pagina's kan gebruiken: wijzig je een tekst of opmaak in één block, dan wordt die wijziging in àlle blocks doorgevoerd.
Dit opent enorme opportuniteiten voor ontwikkelaars. Zij kunnen nu een WordPress project afleveren aan de opdrachtgever, met verschillende template-pagina's, waarbij de gebruiker wel de vrijheid heeft om de tekst toe te voegen en (beperkt) op te maken, maar niet buiten de vastgelegde elementen kan. Denk aan een template voor een artikel met drie kolommen, een template voor een productenpagina, enz.
Maar de mogelijkheden gaan verder. De ontwikkelaar van een SEO plug-in bijvoorbeeld kan bij de blocks commentaar laten verschijnen, om de inhoud van het block SEO-vriendelijker te maken.
Waarom de nieuwe WordPress-editor Gutenberg?
Deze editor is enerzijds een inhaalbeweging. Nu al moet content aanpasbaar zijn aan de grootte van het scherm (responsive), van laptop tot tablet en smartphone - en daar heeft WordPress vaak moeite mee. Andere content management systemen zoals Medium bieden bovendien meer geavanceerde tools om tekst te bewerken, die het lezen van bijvoorbeeld longreads veel aantrekkelijker maken.
Anderzijds maakt de Gutenberg-editor WordPress klaar voor de toekomst. Er zijn meer tools om teksten te bewerken, maar tegelijkertijd zijn zij eenvoudiger. En bovendien wordt de visuele weergave aangepast aan de schermen van de toekomst, zoals VR headsets. Daar moet de gebruiker kunnen bepalen dat hij de content links van zijn gezichtsveld wil, search onderaan, en commentaren rechts bijvoorbeeld. Dit alles wordt mogelijk met de blocks.
Hoe werkt Gutenberg concreet?
Wanneer je de Gutenberg-editor opent, valt meteen het minimalisme op. Het werkgebied is veel groter, zodat werken vanop je smartphone een stuk gemakkelijker wordt. En je minder snel afgeleid wordt.
Standaard bevat de Gutenberg editor de volgende blocks:
- Basisblokken zoals afbeeldingen, paragrafen, gewone tekst, headings, quotes, …
- Formatting zoals pull quotes, tabellen, …
- Lay-out elementen zoals tekst opsplitsen in kolommen, buttons, scheidingslijnen, "lees meer" tag toevoegen
- Widgets zoals laatste posting, categorieën
- Embeds voor externe (multimedia) content
Beweeg je cursor over een blok, en je krijgt opties om een blok hoger of lager te plaatsen, te verwijderen, of de instellingen van het blok te wijzigen. Of navigeer naar het tabblad Block voor meer instellingen.
Enkele handige nieuwigheden met de blokken:
- Voeg tabellen in als blok - geen plug-in meer vereist of geknoei met HTML-code.
- Formateer tekst in 2, 3 of 4 responsive kolommen met de Columns block.
- Voeg in een tekstblok een HTML-anchor toe, zodat je bij het sharen van je posting rechtstreeks naar dit blok kan verwijzen.
- Voeg een citaat (pull-quote) toe, en kies voor de extra optie align wide of align full-width.
- Gebruik een button als call-to-action via de button-block.
- Voor je multimedia-content heb je via de Embed button een rijke keuze aan externe content, zoals YouTube en Instagram, maar ook Reddit, Meetup, Tumblr, Vine, enz.
- Wil je in de HTML-code duiken? Klik op de drie puntjes rechtsboven, en kies Code Editor.
Gutenberg uittesten
In WordPress 5.0 zal de Gutenberg-editor de standaard-editor zijn. Je kan echter, als je je weg niet vindt in Gutenberg, de klassieke editor als plug-in installeren.
Wil je nu al aan de slag met Gutenberg? Dat kan - maar wij raden je wel aan om de test uit te voeren in een test- of staging omgeving, niet op een productiesite. Voorzie ook zeker back-ups. In september 2018 was de editor al meer dan 1,7 miljoen keer gedownload.
Om Gutenberg te installeren, ga je in je WordPress controlepaneel naar Plug-ins > Add New. Zoek in het aanbod "Gutenberg" en klik op Install Now. Voortaan zie je in je controlepaneel onder Posts de optie om de Gutenberg editor te openen.
Nog meer testen?
Ben je avontuurlijk aangelegd, en heb je zin om nog andere tools uit te testen, die kans maken om in de toekomst opgenomen te worden in de WordPress core? Probeer dan eens (op eigen risico!) volgende interessante plug-ins:
- Two Factor: voeg 2F-authenticatie toe zodat jij en andere back-end gebruikers nog veiliger kunnen inloggen
- Customize Posts: bekijk meteen hoe jouw wijzigingen de front-end van jouw website beïnvloeden
- Dark Mode: brengt een nachtelijk kleurenschema naar je controlepaneel
Meer bèta plug-ins vind je bij WordPress.
Meer over het Gutenberg-project weten? De YouTube filmpjes van de Gut Guys geven je praktische tips, en de talk van Morten Rand-Hendriksen op de 2017 WordCamp in Nashville vertelt je over de achtergrond en toekomst van Gutenberg.
Gerelateerde artikelen
