WordPress Gutenberg Editor

Wij leggen de ins en outs van deze Nieuwe WordPress editor uit.

door Remco Nieuwenhuizen

Voorzitter van WP supporters

Zolang als ik mij kan heugen (meer als 10 jaar) heeft de text editor van WordPress geen update gehad. En hoewel dit geen slechte zaak is, de oude text editor werkte volgens velen nog prima, vonden de mensen achter de WordPress organisatie dat het tijd was voor verandering.

Ongeveer een jaar geleden werd er aangekondigd dat WordPress bezig was met een opvolger van de text editor. Deze nieuwe manier van schrijven zou bekend worden als de Gutenberg update. Het doel van deze update was om het schrijven van artikelen in de WordPress editor eenvoudiger en plezieriger te maken.

En na de release van WordPress 5.0 in December 2018 hebben wij een aantal maanden met de nieuwe Gutenberg Update kunnen werken. Vandaag maken wij de conclusie op met de vraag; Is het WordPress gelukt om de eeuwenoude text editor te vervangen.

Maar voordat we jullie vertellen wat wij van de Gutenberg update vinden beginnen wij eerst met:

Wat is Gutenberg

Gutenberg is de naam van de nieuwe text editor van WordPress. Het is vernoemd naar Johannes Gutenberg, een uitvinder die 500 jaar geleden een efficiënte drukpers uitvond. (bron: Wikipedia)

Met deze verwijzing naar het verleden willen de ontwikkelaars van WordPress vertellen dat zij een nieuwe manier hebben gevonden om berichten of pagina’s te schrijven.

Waar de oude text editor veel weg had van een oude versie van Microsoft Word is de nieuwe versie wel even wennen.

Er wordt namelijk gebruikt gemaakt van blokken, in plaats van een kale text editor.

Deze blokken maken het mogelijk om op een makkelijkere manier, geavanceerde opties toe te voegen. Je hoeft met de visuele Gutenberg editor dus geen gebruik meer te maken van html of shortcodes.

Met de nieuwe blokken is het veel makkelijker gemaakt om bijvoorbeeld afbeeldingen te plaatsen, videos of social media posts te importeren, knoppen toe te voegen of zelfs producten uit je WooCommerce winkel te plaatsen.WordPress Gutenberg is vanaf WordPress 5.0 bruikbaar. Deze versie werd in December 2018 gelanceerd. En na een rommelige start horen wij links en rechts steeds positievere geluiden over deze update.

“De blokken maken het mogelijk om op een makkelijkere manier, geavanceerde opties toe te voegen. Je hoeft met de visuele Gutenberg editor dus geen gebruik meer te maken van html of shortcodes.”

Wat kan je met de Gutenberg editor

Zoals we in het vorige hoofdstuk al zeiden word het makkelijker gemaakt om blokken toe te voegen met extra content.

Denk bijvoorbeeld aan een quote via twitter die je in jouw bericht wilt delen.

Of een youtube video waarin je extra informatie geeft over het onderwerp waarover je schrijft.

En WordPress kennende zullen de opties alleen maar worden uitgebreid aangezien deze editor de nieuwe manier van schrijven zal worden.

Laten we eens dieper duiken in de nieuwe editor.

Wat zien we zoal en wat kunnen wij er mee doen?

De nieuwe WordPress Gutenberg editor

Bij het open van WordPress moet je, om met de nieuwe editor te werken, een nieuw bericht of pagina maken.

Laten we dus eens een scherm openen om een nieuw bericht te schrijven.

De nieuwe editor valt direct op. Er is geen menu meer aanwezig waarin je alle opties kunt aanklikken zoals in de oude editor het geval was.

De nieuwe editor laat je direct jouw titel schrijven om daaronder aan te vangen met de nieuwe blokken.

Standaard kan je meteen beginnen met schrijven omdat er een testblok is geactiveerd. Wil je jouw bericht beginnen met iets anders dan tekst dan heb je meerdere manieren om een blok te importen.

Hoe voeg je een nieuw blok toe

Om je workflow makkelijk te maken zijn er meerdere manieren om een blok toe te voegen.

Hieronder de verschillende opties:

  1. Linksboven in de Gutenberg Editor zie je een + teken. Klik daarop en je ziet jouw blokken.
  2. Beweeg met je muis over het 1ste tekstblok, je ziet links een + verschijnen. Klik daarop en opnieuw openen jouw blokken.
  3. Begin met schrijven en typ een / hierna zullen de meest gebruikte blokken in een lijst verschijnen.
  4. Beweeg met je muis in het midden aan de bovenkant van het tekstblok. Ook hier zal een + teken verschijnen om een blok boven het geselecteerde blok te plaatsen.
  5. Als je met je muis over het tekstblok beweegt heb je aan de rechterkant een aantal snelopties die verschijnen. Zo kan je een afbeelding toevoegen, de oude editor openen of een titel/kopregel toevoegen.
  6. Mocht je al iets getypt hebben en je wilt dit aanpassen. Dan kan je het blok selecteren en op het icoon linksboven in het popup menu te klikken wat boven de tekst verschijnt. Hier kan je kiezen tussen een aantal andere vergelijkbare opties.

Zoals je ziet is de Gutenberg editor zo gemaakt zodat iedereen zijn eigen manier kan hanteren die het beste bij hem past.

Hoe verwijder je een blok

Ook om een Gutenberg blok te verwijderen zijn er meerdere opties gemaakt je jouw workflow niet hoeft te wijziging. De mogelijkheden zijn:

  1. Selecteer het blok en druk op escape. Je zal het hele blok nu verwijderden
  2. Selecteer het blok en in het popupmenu wat erboven verschijnt klik op de 3 verticale punten. Een menu opent zicht waarin je de optie blok verwijderen kan kiezen.
  3. Selecteer het blok en klik op de sneltoets Control-Option-Z (apple)
  4. Of als je net een verkeerd blok hebt aangemaakt kan je de actie ongedaan maken met Control-Z

Net als bij het aanmaken van een blok heb je dus ook meerdere opties om weer een blok te verwijderen.

Welke blokken zijn er zoal

Zoals wij al eerder zeiden zijn er op dit moment al veel opties beschikbaar in de editor. Daarnaast zullen actieve plugins ook steeds vaker samenwerken met de Gutenberg editor.

Zo hebben wij op dit moment WooCommerce en Yoast SEO geïnstalleerd, die beide extra blokken beschikbaar hebben gemaakt in de editor. En zij zullen vast niet de enige zijn aangezien Gutenberg niet meer weg zal gaan.

Maar standaard zitten de volgende blokken in de WordPress Gutenberg editor. Kijk hier voor een actueel overzicht: WordPress Gutenberg official

  • Paragraaf
  • Lijst
  • Titel
  • Subtitel
  • Tabel
  • Knop
  • Klassiek blok
  • Tekstkolommen
  • Afbeelding
  • Omslagfoto
  • Fotogalerij
  • Audio
  • Video
  • Shortcode
  • Citaat
  • Pullquote
  • Vers
  • Code
  • Voorgeformateerd
  • Aangepaste HTML
  • Insluiten
  • Separator
  • Lees verder

Veel blokken spreken voor zich, en als je veel teksten gaat schrijven dan ontdek je spelenderwijs welke blokken je vaker gebruikt en welke blokken je links laat liggen.

Het Gutenberg Menu

Bovenaan de Gutenberg editor vindt je een aantal opties.

De eerste optie hebben wij al besproken. Het + teken is namelijk de 1ste plek waar je een blok kan toevoegen aan de pagina.

Naast de plus zie je de ongedaan en opnieuw tekens. Hiermee kan je jouw voorgaande actie ongedaan maken of opnieuw uitvoeren.

Naast deze tekens zie je een omcirkelde I en een navigatie blok. In de omcirkelde I kan je zien hoeveel woorden, paragrafen, titels en blokken je hebt aangemaakt in het bericht.

In het navigatieblok kan je snel van blok veranderen. Helaas kan je tot op heden nog geen naam geven per blok. Zo wordt het namelijk wel erg onoverzichtelijk als je meer als 20 blokken in gebruik hebt. Wij vinden dan ook dat het blokken navigatie op dit moment weinig toevoegt aan de pagina, en wij scrollen liever net zo snel naar het juiste blok.

Ook heeft ieder blok die je in Gutenberg maakt zijn eigen instellingen. Deze kan je via het Gutenberg blok menu benaderen.

Aan de rechterkant van de visuele editor zie je het menu dat je ook al kent uit de oude editor van WordPress. Hierin kan je bijvoorbeeld een categorie, tags, uitgelichte afbeelding etc kiezen.

Bovenaan dit menu zie je dat je kan switchen van document naar blok. Hierin vindt je alle blokken opties van Gutenberg.

Zo kan je bijvoorbeeld voor een tekstblok de tekstgrote veranderen, een initiaal maken of de kleuren aanpassen van de tekst en achtergrond. Voor ieder soort blok is er weer een ander Gutenberg menu. Maar het is goed om deze opties eens te bekijken als je in de editor bezig bent.

Het laatste menu wat wij met je willen bespreken is het popupmenu dat aan de bovenkant verschijnt als je een blok selecteert. Dit menu is ook weer per blok verschillend.

Zo kan je vaak aangeven hoe je de inhoud van het blok wilt uitlijnen. En komen er extra opties naar voren zoals het vetdrukken of cursief maken van tekst, links toevoegen of welke H tag je een titel wilt geven.

Dat deze opties verspreid zijn over 3 verschillende menu’s vinden wij niet erg handig. Liever hadden wij 1 plek gehad waar al deze opties steeds weer terug kwamen. Nu zit je regelmatig te zoeken waar je wat ook al weer kon aanpassen.

Hopelijk passen ze dit in de nabije toekomst nog aan maar zeker weten doen wij dit niet.

“Na de release in December 2018 installeerde meer als 5 miljoen de ouderwetse editor plugin, gelukkig loopt het aantal actieve installaties ver terug.”

De voordelen van de Gutenberg Editor

Met deze nieuwe editor zijn er zeker wel onderdelen makkelijker geworden. Vooral voor mensen die visueler zijn aangelegd en die minder met html of stortcodes werken.

Wij hebben de voordelen die wij vinden even voor jou op een rijtje gezet.

  1. De blokken zijn makkelijk in gebruik en laten jou extra opties als video’s, social media posts of andere geavanceerde mogelijkheden toevoegen.
  2. De editor werkt goed op zowel een tablet als mobiele telefoon. De uitlijning is goed en een controleren of de tekst er goed uit ziet op mobiele apparaten is vrijwel niet meer nodig. Ook kan je op een tablet of mobiele telefoon nu makkelijker teksten aanpassen. Dus zowel voor de gebruiker als voor de lezer is dit een grote stap voorwaarts.
  3. De editor is geoptimaliseerd om in te typen. Er is weinig afleiding en je ziet direct de opmaak van het bericht.
  4. Het is voor veel mensen makkelijker geworden om teksten aantrekkelijk te maken

De Nadelen van de Gutenberg Editor

Naast de vele voordelen zijn er ook een aantal punten waarvan wij hopen dat ze worden aangepast.

  1. Wij vertelde het al bij de Gutenberg menu’s maar wij vinden het erg onhandig dat er 3 soorten menu’s zijn om aanpassingen te maken. Het topscherm menu, het rechtermenu en het popup menu zouden wij liever samengevoegd willen zien. Nu zitten wij vaak nog op de verkeerde plek te zoeken als wij iets willen veranderen.
  2. De blokken editor maakt het voor mensen makkelijker om extra opties in te voegen. Daarbij kan het ook een grotere leercurve met zich mee brengen. Maar wij denken dat dit gewoon een kwestie is van vaker doen.
  3. Wij vinden de opmaak van sommige blokken nog niet naar onze wens. Zo staan een titel en afbeelding wel erg dicht op elkaar en kan je dit alleen aanpassen door er een separator blok tussen te zetten. Wij zouden graag een blokinstelling willen zien waarbij je de ruimte om het blok heen kunt aangeven.

Sinds de release van Gutenberg zijn er veel mensen geweest die de klassieke editor hebben geinstalleerd. De plugin is op dit moment 1 van de meest populaire WordPress Plugins van de WordPress database met meer als 5 miljoen downloads. Gelukkig neemt het aantal actieve installaties iedere maand af. Wat duidt op een acceptatie van de nieuwe editor alsmede de verbeteringen die ze hebben uitgevoerd sinds de release.

De samenvatting

Onze vraag aan het begin van dit bericht was: Is het WordPress gelukt om de oude editor te doen vervangen.

Wij vinden de Gutenberg editor een grote stap voorwaarts vergeleken met de oude editor.

In het begin waren er veel websites met update problemen waardoor de nieuwe editor een slechte naam kreeg. Maar het is goed dat het WordPress team voet bij stuk heeft gehouden en deze nieuwe koers heeft ingezet.

Voor heel veel mensen is het gebruik van de editor stukken makkelijker geworden en zal de editor ook bijdragen aan kwalitatief betere content, omdat het nou eenmaal makkelijker is geworden om extra video’s, afbeeldingen en quotes te plaatsen.

Wij zijn er van overtuigd dat het WordPress team er alles aan doet om de editor mee te laten gaan met zijn tijd. Wij hopen dus ook dat onze nadelige punten in de toekomst worden opgelost.

Voor nu is het vooral belangrijk om bekend te worden met de nieuwe functies en om de nieuwe editor in volle glorie te gaan gebruiken.

WPSupporters heeft de afgelopen maanden er in ieder geval alles aan gedaan om bekend te worden met de ins en outs van de Gutenberg editor. En wij geven dan ook Gutenberg support mocht er iets niet lukken op jouw website.

Als laatste zijn wij benieuwd wat jij van deze update vondt. Vind jij Gutenberg een aanwinst of ben jij een van de velen die de oude editor plugin heeft gedownload.

We horen het graag van je, dus laat een reactie achter onder dit bericht!

Geef ons een beetje support, en deel met belangstellenden.

Facebook
Google+
Twitter
LinkedIn
WhatsApp

Lees ook:

Laat een reactie achter

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

× Whatsapp met een expert