Gutenberg WordPress editor

Gutenberg voor WordPress, het einde van alle zware pagebuilders?

Een pagebuilder voor WordPress. Veel mensen zijn er dol op, echte programmeurs worden er misselijk van. Waarom zou je een extra toevoeging nodig hebben als je het ook met simpele code af kunt? Die reden is echt te makkelijk: als je de kennis niet hebt en je wilt graag met WordPress werken heb je eigenlijk altijd een pagebuilder nodig.

Veel premium thema’s van bijvoorbeeld Themeforest.net en nog een aantal andere thema-marktplaatsen hebben al jaren een pagebuilder aan boord. Bijvoorbeeld Enfold, waar ik al vaker over geschreven heb, maar ook Avada en Divi hebben allemaal hun eigen systeem om relatief eenvoudig een pagina binnen WordPress vorm te geven. Om met dit soort pagebuilders te concurreren hebben de mensen achter WordPress bedacht dat dit anders kon. Zo is de Gutenberg editor langzaam ontstaan.

Op WordCamp Europe 2017 in Parijs is Gutenberg editor gelanceerd als een plugin. Ik voeg hier meteen aan toe dat voorlopig het plan is dat de functionaliteit vanaf WordPress versie 5 standaard binnen dit CMS aanwezig zal zijn. Tot die tijd zul je het als losse plugin moeten installeren.

Wil je gaan testen met de plugin, doe dit dan niet op je live website. De Gutenberg plugin is nog in een betaversie, dus er kunnen onbekende bugs opduiken. Dit wil je echt niet op een live site. Maak dus gebruik van een staging omgeving om rustig te testen. Geef vooral de bugs door via de Github pagina zodat de WordPress-community deze kan oplossen in aankomende releases.

 

Johannes GutenbergWaarom de naam Gutenberg?

Johannes Gutenberg is de uitvinder van de boekdrukkunst. Deze Duitser werkte in Straatsburg en Mainz aan zijn meest bekende werk, de Gutenbergbijbel, die in het jaar 1455 werd voltooid.

Gutenberg zorgde ook voor een revolutie, want de boekdrukkunst zorgde voor massale verspreiding en maakte publiceren voor iedereen toegankelijk. En dat is precies het doel van WordPress, het vereenvoudigen en voor iedereen toegankelijker maken van publiceren.

Om een eerlijk en objectief beeld te kunnen schetsen heb ik de Gutenberg Editor plugin zelf ook geïnstalleerd op een testlocatie. Dit gaat heel gemakkelijk net als iedere andere plugin via ‘plug-in toevoegen’. Je zoekt op ‘Gutenberg’ en installeert en activeert de plugin. Vervolgens kun je direct aan de slag

Eerste indruk van de Gutenberg plugin voor WordPress

Gutenberg Editor WordPress

Na installatie krijg je in je pagina-overzicht de mogelijkheid om naast bewerken te kiezen voor Gutenberg. Als je hierop klikt, kom je in een speciale editor, anders dan je tot nu toe gewend bent als de visuele editor of voor meer geavanceerde werkzaamheden de texteditor. Het is best even wennen moet ik zeggen.

Als je een nieuwe pagina toevoegt krijg je een pagina te zien met een titel en een tekstblok. Aan de rechterzijde heb je alle Gutenberg opties. Als eerste kun je kiezen om een block toe te voegen. De keuzes die je hier in blokvorm vindt, zijn gelijk aan de keuzes die je normaal in de horizontale balk vind bovenaan je visuele editor. Een tekstblok, een image blok, een opsomming en nog een aantal andere opties. Je klikt het blok van je keuze aan en het wordt onderaan je pagina toegevoegd. Als je bijvoorbeeld een paragraaf toevoegt, dan vind je de tekstopties voor deze paragraaf in een zwevende balk boven je blok. Wat mij opviel was dat de zwevende balken soms in de weg zitten als je een blok wilt selecteren dat boven je huidige blok zit. Dit zal hopelijk in toekomstige releases verholpen zijn.

Wat mij verder nog opviel is dat je bijvoorbeeld met moeite twee blokken naast elkaar krijgt. Waar je in een Enfold thema een blok oppakt en versleept, werkt dit in Gutenberg niet. Ik heb het niet voor elkaar gekregen om twee kolommen met afbeeldingen naast elkaar te krijgen.

De mogelijkheden in Gutenberg op een rij

Ik wil je graag kort een aantal opties laten zien dat er op dit moment aanwezig is binnen Gutenberg.

Sidebar Gutenberg WordPress

Gutenberg WordPress plugin sidebar

De basis van Gutenberg wordt bij het bewerken gevormd uit drie onderdelen. Hiernaast zie je de sidebar die statisch in beeld is. Je kunt hier in het tabblad ‘Document’ onder andere de uitgelichte afbeelding instellen en de samenvatting invoeren. Ook schakel je hier per pagina in of er wel/geen reactiemogelijkheid op de pagina is.

De tweede optie waar je naar kunt swichten zijn de block opties. Dit verschilt per blok wat je aan het bewerken bent. Een paragraaf met tekst geeft je hier bijvoorbeeld de mogelijkheid om de tekstkleur te wijzigen en de lettergrootte.

Verder vind je in de topbalk van je pagina de mogelijkheid om verschillende blokken in te voegen. Je kunt hierbij kiezen voor een los blok of een geëmbed blok zoals bijvoorbeeld een tweet of een Youtube filmpje.

De ingevoegde blokken zijn eenvoudig te bewerken met zo min mogelijk kliks. Als je bijvoorbeeld een image block invoegt, komt meteen op het blok een uploadknop te staan. Je hoeft hiervoor dus niet eerst door te klikken. Hetzelfde geldt voor een Youtube filmpje, je kunt meteen op de voorkant van het blok de URL plakken.

Wat mij opviel was dat wanneer je een pagina in de visual editor opent, het niet mogelijk is om te switchen naar Gutenberg en andersom. Eigenlijk hoef je ook niet te switchen, want Gutenberg kun je ook op textmodus zetten waardoor alle onderliggende code zichtbaar wordt. Ook dit zal mogelijk in toekomstige versies verholpen worden.Gutenberg editor voor WordPress

Is de Gutenberg editor de toekomst van WordPress?

Als het aan WordPress ligt verdwijnen in de toekomst losse pagebuilders en moet het voor iedereen gemakkelijker worden om een website te bouwen met de Gutenberg editor. Mijn mening is in ieder geval dat er nog een heleboel aangepast zal moeten worden voordat de Gutenberg plugin gelijk staat aan de eerder genoemde pagebuilders van bijvoorbeeld Enfold en Avada. Op dit moment lijkt het hier wat mij betreft in de verste verte nog niet op.

Maar het is ook niet fair om deze nu al met elkaar te vergelijken, aangezien Gutenberg volop in ontwikkeling is. Als toelichting, op dit moment staan er alleen al 426 grote en kleine issues open voor de ontwikkelaars die aangedragen zijn door testers .

De planning van de ontwikkelaars is nog steeds om Gutenberg einde van dit jaar te integreren in WordPress 5.0. Of dit haalbaar is zullen we moeten afwachten.

Een heel belangrijk punt van zorg van veel ontwikkelaars is de toegankelijkheid. Op dit moment is de editor van WordPress geoptimaliseerd voor mensen met een beperking, de Gutenberg editor is juist heel gebruikersonvriendelijk voor deze groep gebruikers. Joost de Valk van Yoast heeft hier al direct zijn zorgen over geuit bij het uitkomen van de plugin en zelfs een teamlid vrijgemaakt om te helpen de toegankelijkheid te optimaliseren.

De test die ik gedaan heb is gebaseerd op het standaard TwentySeventeen WordPress theme zonder toegevoegde plugins. Het compatible maken met vele plugins zal ook nog een behoorlijk uitdagende klus worden waar een hoop ontwikkelaars lange tijd mee bezig zullen zijn.

Er is dus nog genoeg te doen voordat Gutenberg überhaupt onderdeel uit zal maken van de core van WordPress. Ook de stelling van de ontwikkelaars dat deze builder alle andere builders overbodig moet gaan maken durf ik te betwijfelen. Ja er zijn zeker voordelen, maar de plugin zal nog heel ver doorontwikkeld moeten worden, voordat het gebruiksgemak van de bestaande pagebuilders overtroffen gaat worden. Deze hebben sowieso al een aantal jaren voorsprong. Maar niets is uiteraard onmogelijk. Het mooie aan de WordPress-community is dat je met zijn allen bouwt aan nog betere producten en hierdoor nooit stilstaat, nee zelfs constant vooruit gaat.

Wil jij een bijdrage leveren aan het succes van WordPress? Neem dan zelf de moeite om de Gutenberg plugin te downloaden en goed te testen op een testlocatie en vooral de bugs/errors te melden via Github. Met zijn allen maken wij WordPress dan nog beter.

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *