• TrophyWebbureau met 10+ jaar ervaring
  • HouseWij maken websites, apps en webapplicaties
  • MedalWinnaar FD Gazellen 2019!
  • Page 1Specialist in digitale automatisering
  • Google+ icon4.9 ★★★★★ Klantbeoordeling
Banner for WordPress 5 en Gutenberg: wat is het en wat betekent het voor jou?

WordPress 5 en Gutenberg: wat is het en wat betekent het voor jou?

Op 6 december 2018 is de nieuwste versie van WordPress uitgebracht: WordPress 5. Deze nieuwe versie brengt één van de grootste veranderingen in de historie van het veelgebruikte CMS, namelijk de introductie van de nieuwe “Gutenberg” Block Editor.

Wat is Gutenberg en wat betekent het voor jou als websitebeheerder?

WordPress is ontstaan in 2003, een tijd waarin het internetlandschap er heel anders uitzag dan nu. CMS-pakketten – Content Management System, software waarmee de inhoud van een website beheerd kan worden – waren schaars, duur en complex. Hierdoor was het publiceren van informatie op het internet niet voor iedereen weggelegd.

Dat moest en zou anders kunnen, vonden Matt Mullenweg en Mike Little. Het online publiceren van een blogartikel zou net zo simpel en toegankelijk moeten zijn als het sturen van een e-mail, zo vonden zij.

En dus startten zij de ontwikkeling van WordPress: een content management systeem dat gemakkelijk in gebruik moest zijn en bovendien vrij inzetbaar en gratis beschikbaar voor iedereen.

Het bleek een goede visie. In de jaren die volgden groeide WordPress uit tot het meest gebruikte CMS ter wereld, met op dit moment een marktaandeel van zo’n 60%. Sterker nog: volgens een laatste schatting draait maar liefst 30% van alle websites op het internet op WordPress! Ook Linku gebruikt WordPress als CMS voor onze maatwerk websites.

In de 15 jaar tussen 2003 en 2018 heeft de ontwikkeling van WordPress uiteraard niet stilgestaan. Tal van nieuwe features en verbeteringen zijn doorgevoerd, maar wat al die jaren eigenlijk amper veranderde is de editor.

En dáár komt nu verandering in.

Een webpagina is géén A4’tje

Aan de basis van elk CMS zoals WordPress staat de editor waarin de inhoud van een pagina of bericht bewerkt kan worden. WordPress gebruikt al jaren dezelfde editor:

De traditionele editor in WordPress 4.9
De traditionele editor in WordPress 4.9

Deze editor doet sterk denken aan bekende tekstverwerkers zoals Microsoft Word. Je kunt tekst dik- of schuingedrukt maken, koppen toevoegen, linkjes invoegen, etcetera. Dat werkt prima en volstaat als je een document wil schrijven – zoals je in Word zou doen.

Maar: een webpagina is geen A4’tje. Qua afmetingen en opmaak niet, maar vooral ook niet qua content. Anno 2018 bestaat een een moderne webpagina al lang niet meer uit alleen tekst en afbeeldingen maar ook uit andere interactieve en visuele elementen zoals buttons, formulieren, een headerfoto, uitklappende velden, tekst in meerdere kolommen, etcetera.  De traditionele editor biedt standaard geen goede mogelijkheden om dit soort content, ook wel rich content genoemd, in te voegen.

Oplossingen via uitbreidingsmogelijkheden

Om dit op te lossen grijpen ontwikkelaars naar de uitbreidingsmogelijkheden in WordPress via shortcodes (korte codes om content in te voegen), plugins of zogeheten “extra velden” (invoervelden buiten de editor). Op deze manier kan een webpagina alsnog ingevuld en opgemaakt worden met rich content.

Het nadeel hiervan is dat deze werkwijze niet altijd intuïtief is voor de websitebeheerder, en er is vaak additioneel programmeerwerk voor nodig. Dat is voor ons als websitebouwers natuurlijk geen probleem; dat is ons vak. Maar het druist in tegen het credo van WordPress dat iedereen zonder technische kennis een webpagina zou moeten kunnen opbouwen.

Een ander nadeel van de traditionele editor en bovengenoemde werkwijzen is dat dit niet WYSIWYG is: What You See Is What You Get.
De inhoud van een pagina ziet er in de editor namelijk heel anders uit dan op de webpagina zelf. Hierdoor ben je in de praktijk vaak veel tijd kwijt doordat je voortdurend op de “Voorbeeld”-knop moet klikken om te kijken hoe je pagina eruit komt te zien – om vervolgens weer de nodige aanpassingen te moeten doen.

De beperkingen van WordPress – of in elk geval de editor – om een moderne website te maken begonnen dus zichtbaar te worden. En ondertussen stond de concurrentie niet stil. Andere platformen zoals Wix en Jimdo bieden al langer de mogelijkheid om rich content toe te voegen in een omgeving die grotendeels WYSIWYG is.

En dus vond het WordPress-ontwikkelteam dat er wat moest veranderen. Project Gutenberg was geboren.

Project Gutenberg

Begin 2017 werd begonnen met de ontwikkeling van een nieuwe editor die de traditionele editor zou moeten vervangen en de hierboven geschetste tekortkomingen moest oplossen. Een nieuwe “block-based editor” waarin behalve standaard-tekst ook allerlei dynamische en interactieve elementen kunnen worden opgenomen, zonder dat daarbij shortcodes, plugins of programmeerwerk voor nodig is:

Kijk eens aan mooi he

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes or custom HTML.

- Matt Mullenweg, 2017

De Duitse drukker Johannes Gutenberg zorgde in de 15ᵉ eeuw voor een revolutie in de boekdrukkunst door het uitvinden van de zogeheten letterdruk. Het WordPress-ontwikkelteam vond het daarom wel gepast om de ontwikkeling van de nieuwe editor naar hem te vernoemen – het zou een revolutie betekenen in WordPress-land. Overigens is “Gutenberg” eigenlijk enkel de projectnaam van het ontwikkeltraject, de nieuwe editor zelf heeft de veel minder spannende naam “Block Editor” gekregen – maar in de praktijk worden beiden termen nu door elkaar gebruikt om de editor te benoemen.

Al snel werd duidelijk dat de nieuwe editor dusdanig veel impact zou hebben op WordPress als geheel, dat een nieuw major versienummer gerechtvaardigd was. Veel programmeeruren en diverse testversies later werd op 6 december 2018 WordPress 5 uitgebracht, met de Gutenberg block editor als nieuwe standaardeditor:

Gutenberg Block Editor in WordPress 5
Gutenberg Block Editor in WordPress 5

Wat direct duidelijk is, is dat de nieuwe block editor inderdaad compleet anders is dan de traditionele editor. Allereerst neemt het bijna het complete scherm in beslag – in tegenstelling tot de traditionele editor wat een relatief klein vlak is. Ook wordt direct duidelijk dat het een interactieve editor is geworden. Als je met je muis beweegt over de editor zie je allerlei zaken verschijnen: kaders (om een blok aan te geven), plusjes (om een blok in te voegen) en pijltjes (om een blok te verplaatsen). Daarnaast is er een zijbalk bijgekomen waarbij diverse zaken van het geselecteerde blok bewerkt kunnen worden.

Editing experience op basis van blokken

Het woord “blok” is nu al tien keer gevallen in twee zinnen, en dat heeft een reden. Het is de basis waarop de nieuwe editing experience van WordPress gebouwd is. In plaats van dat de inhoud van een pagina of bericht bestaat uit enkel tekst, bestaat deze nu uit blokken. Een blok kan van alles zijn: een stuk tekst of een afbeelding, maar ook kolommen, quote-blokjes, afbeelding-galerijen, een formulierwidget en meer. Standaard biedt de nieuwe editor maar liefst 29 verschillende blokken die ingevoegd kunnen worden. En daar hoeft het natuurlijk niet bij te blijven, want via plugins en met eigen programmeerwerk kunnen ook andere bloktypen worden toegevoegd.

De nieuwe editor is behoorlijk intuïtief in gebruik, maar het is wel even wennen. Het is in het begin soms behoorlijk zoeken waar een bepaalde instelling gevonden moet worden, maar zodra je de editor een aantal keer gebruikt, werkt het snel en vloeiend.

Naast de veelvoud aan nieuwe extra invul- en opmaakmogelijkheden zijn er ook andere verbeteringen die het maken en bewerken van pagina’s prettiger en beter maakt. Als je bijvoorbeeld een pagina tussentijds opslaat, gebeurt dat nu zonder dat de pagina herlaadt (voor de technici: via AJAX), wat een stuk sneller is en waardoor je direct door kunt gaan waar je bezig was. Ook het verplaatsen van content – bijvoorbeeld een plaatje boven of onder een bepaalde paragraaf zetten – werkt veel vloeiender en intuïtiever dan in de traditionele editor.

En, niet te vergeten: het is WYSIWYG!
Althans, in een standaardinstallatie met het standaardthema Twenty Nineteen ziet de inhoud van de editor er exact hetzelfde uit als de webpagina aan de voorkant. In hoeverre dat nog opgaat als je een ander thema gebruikt of een custom-made thema, is geheel afhankelijk van in hoeverre de thema-ontwikkelaar ook de benodigde aanpassingen heeft gemaakt in de block editor.

Wat duidelijk is, is dat WordPress hiermee een grote stap heeft gezet richting het opmaken van webpagina’s met rich content op een snelle, gemakkelijke en gebruiksvriendelijke manier.

Kritiek op Gutenberg

Is het dan alleen maar halleluja, de nieuwe editor?
Nee, dat nou ook weer niet.

Zo is er flink discussie over de huidige kwaliteit van de nieuwe editor en het feit dat deze al uitgebracht is. Er zouden nog teveel bugs in zitten en zou dus nog niet af genoeg zijn om al uit te brengen voor miljoenen WordPress-gebruikers wereldwijd. De slechte score van Gutenberg op de WordPress-pluginsite (2.1 uit 5, op het moment van schrijven) en het grote aantal openstaande issues op ontwikkelplatform GitHub (1.530) zijn hier getuige van. Ook is er flinke kritiek van personen en partijen die zich inzetten voor digitale toegankelijkheid. De nieuwe editor zou niet goed werken voor mensen die bijvoorbeeld vanwege een handicap geen gebruik kunnen maken van een muis.

Ondanks dit alles lijkt het erop dat het merendeel van de WordPress-community de nieuwe editor omarmt. De voordelen wegen op tegen de nadelen, en het kan alleen maar beter worden vanaf hier.

Een nieuwe workflow voor Linku

Voor Linku geldt dat wij graag meegaan in deze tendens. Zoals altijd willen wij onze klanten hoge-kwaliteit-oplossingen aanbieden die goed werken voor zowel de eindgebruiker als de klant zelf, en wij denken dat Gutenberg hierin kan bijdragen.

Dat betekent wel dat wij als Linku aardig wat werk te doen hebben.
In onze huidige setup leunen we namelijk zwaar op zelf-gedefinieerde contentblokken via extra velden:

Contentblok gevormd met extra velden (l) en de uitwerking op de pagina (r). Voorbeeld van iCreate Magazine.
Contentblok gevormd met extra velden (l) en de uitwerking op de pagina (r). Voorbeeld van iCreate Magazine.

Wij en onze klanten zijn erg tevreden met deze werkwijze, maar helaas werkt dit niet vanzelf goed samen met de nieuwe Gutenberg-editor. We zullen dus aanpassingen moeten doen in de manier waarop wij ontwikkelen, zodat de contentblokken als Gutenberg-blokken gebruikt kunnen worden in plaats van via extra velden.
Aangezien dit een grote omslag is vraagt dit om een zorgvuldige aanpak, omdat we natuurlijk wel de kwaliteit willen blijven leveren zoals iedereen van ons gewend is. Wij zijn op dit moment bezig met onderzoeken wat voor ons de beste manieren zijn om Gutenberg in te passen in onze WordPress-ontwikkelworkflow.

We hebben er alle vertrouwen in dat we hier een goed antwoord op vinden en dat we in de loop van 2019 de eerste nieuwe klanten blij kunnen maken met een WordPress 5-powered website mét Gutenberg block editor.

Interesse in Gutenberg?

Heb jij zelf interesse in een nieuwe website met WordPress 5 en de Gutenberg block editor? Neem gerust vrijblijvend contact met ons op om de mogelijkheden te bespreken.

Neem contact op Next line
Bart

Meer weten? Bart vertelt je graag meer over WordPress!