Gutenberg the new Wordpress Editor

Gutenberg, de nieuwe WordPress editor komt eraan!

en dat heeft grote gevolgen voor ALLE wordpress gebruikers!

Wat is Gutenberg?

Bij WordPress zijn ze er al een tijdje mee bezig. Gutenberg is de nieuwe nieuwe visuele editor voor WordPress en deze gaat de huidige TinyMCE [editor] vervangen. Gutenberg is een front-end editor. Dit betekent dat je direct je pagina of bericht kunt aanpassen terwijl je je pagina ziet zoals je bezoekers die ook zien.

Waarom is die verandering nodig?

Gutenberg is de eerste fase van een drie stappenplan van WordPress. Het uiteindelijke doel is WordPress eenvoudiger en leuker maken voor gebruikers [en de strijd aangaan met platforms zoals Squarespace, Wix en andere website-bouwers die front-end editors aanbieden]. De eerste stap is dus deze nieuwe editor. Daarna gaat WordPress zich richten op pagina templates en in de laatste fase is het de bedoeling dat WordPress met een volledige site-builder wordt.

Wanneer gaat dat gebeuren?

Op dit moment [18/04/2018] bevindt Gutenberg zich nog in de bèta- en testfase en is het nog niet duidelijk wanneer Gutenberg precies klaar is voor een release. De verwachting is nu rond eind april 2018 tegelijkertijd met de update naar WordPress 5.0. Je kunt Gutenberg nu wel al downloaden als plugin.

Wat verandert er allemaal?

Schrijven zonder afleiding is een van de belangrijkste doelen van de Gutenberg editor. Dat staat in direct verband met de meest ingrijpende verandering. Het verdwijnen van de bekende TinyMCE editor. Wanneer je de beide editors naast elkaar ziet, zie je direct wat daarmee bedoeld wordt.

In Gutenberg is alles een blok.

Begin je met een nieuwe post of pagina dan is het eerste wat opvalt dat het er allemaal behoorlijk leeg uitziet. Er is alleen een titel- en een tekstblok zichtbaar en er lijken geen editmogelijkheden te zijn.  Deze edit mogelijkheden verschijnen pas zodra je content gaat toevoegen. Je kunt verschillende blokken toevoegen door op het + linksboven te klikken. Er verschijnt dan een overzicht van blokken met verschillende functies waarmee je een eigen layout van je pagina of post kunt opbouwen.

 

Klik je op een blok dan wordt deze onderaan toegevoegd. Met de up & down pijltjes kun je vervolgens het blok verplaatsen. Elk blok kan een eigen opmaak en instellingen krijgen. Er zijn ook blokken voor het embedden van video’s, social media e.d. Het i icoontje geeft informatie over de content structuur.

Aan de rechterkant kunt je de instellingen openen – per document of per blok – door op het tandwielpictogram te klikken. Door te klikken op de drie stippen naast het tandwielpictogram, kun je o.m. overschakelen naar de code-editor, waarin je de code kunt bewerken.

Herbruikbare blokken

Een van de coolste dingen in Gutenberg zijn herbruikbare blokken. Als je bijvoorbeeld een mooie  lay-out hebt gemaakt voor de intro van je blogartikelen kun je dit opslaan als een herbruikbaar blok. Hierna hoef je alleen maar naar je opgeslagen blokken en kun je je blok opnieuw gebruiken.

Wat zijn de gevolgen voor jou als website bezitter?

Het verdwijnen van de TinyMCE betekent dat je waarschijnlijk wel even moet gaan verdiepen in hoe deze nieuwe editor nu precies werkt. Ik heb de Gutenberg-plug-in op mijn eigen website geïnstalleerd en geprobeerd de belangrijkste voor en nadelen op een rijtje te zetten zodat je weet wat je zo’n beetje kunt verwachten.

De voordelen
  • De plugin is intuïtief en gemakkelijk te gebruiken. Het kost niet al te veel moeite om erachter te komen hoe je een nieuw kopje kunt kiezen of hoe je een afbeelding kunt invoegen.
  • Ook heel prettig is dat de opties om je tekst te kunnen bewerken bovenaan ieder blok staan. Handig als je delen van je tekst wilt verplaatsen. Zo neem je meteen de juiste styling mee.
  • Iedere keer als je tijdens het schrijven op enter drukt opent er een nieuw blok. Het voordeel hiervan is dat je automatisch  [broodnodige] witruimte creeert. Iets wat voor veel gebruikers vaak problematisch is.
  • De drag & drop voor beeld is echt een enorme vooruitgang! Gewoon je foto in de post slepen, heb je eenmaal de juiste foto dan moet je nog wel even naar de media libary om je alt tekst (tbv de SEO) toe te voegen.

De Gutenberg editor introduceert ook een aantal nieuwe spiksplinternieuwe tools waar je straks geen plug-in meer voor nodig hebt:

  • Tabellen plaatsen kon met de huidige TinyMCE editor alleen m.b.v code. Met  Gutenberg plaats je met één klik een tabel op je pagina. Opmaakopties zijn er niet, maar iets is beter dan niets.
  • De Gutenberg editor heeft een speciaal blok voor knoppen. Door het invoeren van hex-waarden [kleurcodes]kan je de knop ook nog eens elke kleur geven die je wil.
  • Een cover image voor het vergroten van een afbeelding tot buiten de grenzen van je tekstveld en het gebruik van tekst in je afbeelding.
En een paar nadelen…
  • Things will break! Dit is misschien wel het grootste nadeel. De slechte compatibiliteit met het huidige WordPress-landschap. TinyMCE is een editor waarvan duizenden thema’s en plug-ins afhankelijk zijn om goed te kunnen functioneren en niet alle ontwikkelaars hebben de tijd, zin of mankracht om hun producten compatibel te maken met Gutenberg. Er zullen waarschijnlijk een aantal themes en plug-ins zijn die niet meer worden aangepast. Maak jij gebruik van zo’n theme of plugin dan kan dat voor problemen zorgen op jouw site.
    * Goed onderhouden themes en plugins zoals zoals WooCommerce en Yoast SEO zijn zich al lang aan het voorbereiden op Gutenberg en zullen na de update waarschijnlijk prima functioneren.
  • Hoewel de blokken “out-of-the-box” werken ziet het er misschien niet altijd helemaal zo uit zoals je zou verwachten. Het Cover Image-blok moet bijvoorbeeld over de breedte van het scherm worden uitgerekt. Als je thema niet is ingesteld voor het verwerken van afbeeldingen op volledige breedte kan het wat maatwerk kosten om alles precies zo te krijgen als je wilt.
  • Je kunt geen shortcodes, afbeeldingen, video’s etc. meer kunt toevoegen aan een alinea. Hiervoor moet je een “Block” gaan gebruiken.
  • Tot mijn grote verbazing waren de kolommen  (nog) niet responsive op het moment van schrijven. Een minpunt wat wellicht nog opgelost gaat worden?
Teksten schrijven.

Net zomin als TinyMCE vind ik ook Gutenberg niet heel erg geschikt voor het daadwerkelijk schrijven van content. Je kunt nu je alinea’s weliswaar tijdens het schrijven verschuiven maar of dat uiteindelijk de structuur van je tekst ten goede komt vraag ik me af. Ik ben dan ook heel benieuwd wat een tekstschrijver hierover heeft te zeggen.

Ik schrijf zelf het liefst in google docs en ik kwam meteen een volgend minpuntje tegen toen ik deze tekst uit Google-documenten in de Gutenberg-editor probeerde te kopiëren en plakken. In de huidige editor is het een hele klus om de opmaak van een artikel goed te krijgen en helaas werkt het ook niet perfect in Gutenberg. In mijn optiek een gemiste kans.

Kan je Gutenberg straks ook gewoon uitzetten?

Nee, zodra Gutenberg de officiële editor voor WordPress wordt, kun je deze niet uitschakelen.

Je gebruikt al een visual editor, kun je deze nu verwijderen?

Nee dat zou ik niet doen. Gutenberg is geen volwaardige sitebuilder. De meeste visual editors zoals Visual Composer of Beaver bieden veel meer mogelijkheden. Aanmaken van meerdere collumns, aanpassen van spacing, margin en padding etc. Verwijder je je visual editor dan haal je ook een groot deel van deze opties weg en het is nog maar de vraag of je website dan nog wel de layout en de mogelijkheden heeft die je hiervoor had.

Hoe kun je je voorbereiden.

Wanneer precies is dus nog niet duidelijk maar dat Gutenberg er komt staat vast!
Heb je een wordpress website dan is het verstandig om je site alvast voor te bereiden om problemen te voorkomen. Installeer de Gutenberg plugin op je website zodat je kunt checken of alles straks nog naar behoren werkt. Wil je liever eerst even kijken hoe het allemaal werkt? Bekijk dan Frontenberg, dit is een [beperkte] front-end demo van de WordPress Gutenberg-editor waarmee je risicoloos kunt uitproberen. Je kunt ook gebruik maken van de Classic Editor-plug-in zodat je de oude editor kunt blijven gebruiken maar dat is eigenlijk uitstel van executie 😉

*  De Gutenberg-plug-in is nu nog een beta-versie is en veel minpunten gaan waarschijnlijk nog opgelost worden.