Een duik in het nieuwe Gutenberg WordPress editor systeem (Voor- en nadelen)

De huidige visuele editor van WordPress heeft de afgelopen jaren niet veel veranderingen gehad en is grotendeels hetzelfde gebleven. Hoewel dit geen slechte zaak is, denken velen dat het tijd is voor verandering. Andere platforms zoals Medium of Ghost bieden een echt unieke en verfrissende ervaring voor schrijvers, dus waarom WordPress niet? Vrijwilligers hebben de afgelopen zes maanden achter de schermen aan de nieuwe Gutenberg WordPress-editor gewerkt. Hun doel? Om het toevoegen van rijke inhoud aan WordPress eenvoudig en plezierig te maken.. Vandaag duiken we in de nieuwe editor en bespreken we enkele voor- en nadelen.

• Wat is Gutenberg?
• Hoe installeer je Gutenberg
• Gutenberg ontdekken
• Voordelen van de Gutenberg WordPress editor
• Nadelen van de Gutenberg WordPress editor
• Probeer de Gutenberg Demo

Wat is Gutenberg?

Gutenberg is een nieuwe kijk op WordPress. Het is genoemd naar Johannes Gutenberg, die meer dan 500 jaar geleden een drukpers uitvond met een beweegbaar type. De huidige visuele editor vereist dat we shortcodes en HTML gebruiken om dingen te laten werken. Het doel is om dit eenvoudiger te maken, vooral voor degenen die net met WordPress beginnen. Ze omarmen “kleine blokken” en hopen meer geavanceerde lay-outopties toe te voegen. Je kunt het officiële voorbeeld bekijken.

Om eerlijk te zijn tegenover de ontwikkelaars en het team dat hieraan werkt, is het belangrijk op te merken dat het zich momenteel in de bèta- en testfase, bevindt en nog niet klaar is om op productiesites te draaien. Maar we wilden zelf zien waar de hype over gaat. We zullen ervoor zorgen dat dit bericht wordt bijgewerkt wanneer er verbeteringen en wijzigingen worden uitgebracht. Het lijkt erop dat voordat dit officieel zal worden samengevoegd met de kern van WordPress, Matt Mullenweg (de oprichter) hoopt 100.000 actieve installaties te krijgen. Dat is volkomen logisch, omdat hierdoor veel van de bugs en problemen worden opgelost en ze nieuwe ideeën en functieverzoeken kunnen verwerken.

“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU

— Bridget Willard (@YouTooCanBeGuru) June 17, 2017

Omdat Gutenberg zich nog in de testfase bevindt, moedigt het team dat eraan werkt mensen aan om het uit te proberen en opmerkingen en feedback achter te laten op het ondersteuningsforum van WordPress  of om een probleem op GitHub te openen. Ook kun je deelnemen aan de discussies die plaatsvinden in #core-editor in de core WordPress Slack. Gutenberg wordt geleverd met WordPress 5.0.

Hoe installeer je Gutenberg

Op moment van schijven heeft de Gutenberg plugin iets meer dan 20000 actieve installaties met een totale downloads van 290000 en een 2.5 uit 5 sterren rating. Het vereist ook  WordPress 4.8 om Gutenberg te gebruiken.

Gutenberg WordPress plugin

Je kunt de laatste versie van Gutenberg via de WordPress repository downloaden of de plugin opzoeken vanuit je WordPress dashboard via de “Voeg toe” in de plugin sectie. Nogmaals, we raden het aan om Gutenberg te installeren op een test site of in jouw hosts staging omgeving.

Installeer Gutenberg WordPress plugin

Gutenberg ontdekken

Nadat je Gutenberg hebt geïnstalleerd, zie je links onder je berichten waarmee je de Gutenberg-editor kunt openen. Hij vervangt niet de standaard WordPress-editor, wat naar onze mening een goede zaak is, omdat je tijdens de testfase heen en weer kunt switchen. Vanaf de laatste versie van de repository ondersteunt het nu ook aangepaste paginatypes en pagina’s.

Gutenberg link op een post

Belangrijk: Zodra WordPress 5.0 wordt gelanceerd dan zal Gutenberg de standaard editor zijn (#41316), maar je zult nog steeds de mogelijkheid hebben om de klassieke editor te installeren mocht je tegen compatibiliteits problemen aanlopen (zoals te zien is in de nieuwe call-out hieronder).

WordPress 5.0 Gutenberg callout

Gutenberg voegt een nieuw menu toe aan je WordPress-dashboard met een demo (zoals hieronder te zien) en de mogelijkheid om een nieuw bericht te maken. Nogmaals, dit menu is waarschijnlijk alleen bedoeld voor testdoeleinden. Zoals je ziet, ziet de visuele editor er heel anders uit dan je waarschijnlijk gewend bent. Het heeft een vergelijkbaar gevoel als medium, wat volgens ons geweldig is.

Gutenberg editor demo

Als je zowel de Gutenberg-editor als de huidige visuele editor naast elkaar bekijkt (klik op de afbeelding om te vergroten), kun je zien hoeveel meer schrijfruimte Gutenberg heeft, vooral op kleinere schermen. Voor mensen die op laptops schrijven, zal Gutenberg een mooie verandering in tempo zijn! Het is echt gericht op “het schrijven van content” en probeert een minder afleidende omgeving te bieden.

Vergelijk Gutenberg en de huidige editor

In de WordPress-editor van Gutenberg kun je klikken op “Berichtinstellingen” om de rechterzijbalk te verbergen. En hoewel dit u toegang geeft tot nog meer van uw scherm, zit dit tussen de “distraction-free” modus in die op dit moment al beschikbaar is. We hebben geprobeerd om Shift + Alt + W te gebruiken om het in Gutenberg-editor te starten, maar dit lijkt nog niet te werken. Het kan zijn dat ze dit nog niet hebben toegevoegd. Maar we zijn er vrij zeker van dat ze dit nog doen, want er zijn waarschijnlijk nogal wat mensen die dit gebruiken.

Verberg post settings (half op weg naar distraction-free schrijven modus)

Om te schakelen tussen de visuele editor-modus en de teksteditor (code), is er links bovenaan een dropdown. Je zult merken dat er nu HTML-opmerkingen aan het begin en aan het einde van elk blok zijn. Met het volgende kunt u bijvoorbeeld een tekstblok maken.

<!-- wp:core/text --> <!-- /wp:core/text -->


Hiermee kunt u de blokken rechtstreeks vanuit de teksteditormodus maken. Het voegt echter ook veel meer rommel toe dan je waarschijnlijk gewend bent als je in deze modus aan het bewerken bent.

Gutenberg tekst editor

Wanneer u een blok highlight, zijn er opties om het blok eenvoudig omhoog of omlaag te verplaatsen met de pijlen, het te verwijderen of naar de instellingen van het blok te gaan. Dit komt sterk overeen met de beschikbare besturingselementen op Medium.

Werken met Gutenberg blocks

We waren ook verrast door de manier waarop het direct op mobiel werkte. Als je snel een afbeelding wilt invoegen of een alinea wilt toevoegen voordat je een bericht publiceert terwijl je onderweg bent, ziet het ernaar uit dat Gutenberg dat heel gemakkelijk gaat maken.

Gutenberg editor mobiel

Een van de eerste dingen die je waarschijnlijk hebt gemerkt is dat de TinyMCE toolbar die je al jaren zag nu weg is.
Het is vervangen met een drop-down menu als je op de “Insert” button klikt. Dit is waarschijnlijk omdat Gutenberg probeert om de afhankelijkheid van de TinyMCE te verwijderen. Of niet?

TinyMCE is niet meer

Dit is wat Matt Mullenweg erover te zeggen had.

“Wat we proberen te doen is het te zo te maken dat je maar één keer over blokken hoeft te leren en als je het eenmaal weet over een afbeeldingsblok, dan kan dat zijn in een bericht, in een zijbalk, op een pagina, in een aangepast berichttype en het zal overal precies hetzelfde werken. Wat ook mee is geïntegreerd, laten we zeggen een plug-in die uw Google Foto’s of uw Dropbox toevoegt, die zal nu ook overal werken.” — Matt Mullenweg (src: WP Tavern)

Maar Andrew Roberts, de projectleider van het TinyMCE-team, nam ook contact met ons op en maakte een paar dingen duidelijk met betrekking tot wat er gebeurt met TinyMCE en Gutenberg.

Ik werk sinds het begin samen met het Gutenberg-team. Het is een gezamenlijke inspanning geweest. Het is waarschijnlijk de moeite waard om op te merken dat de kern-engine van TinyMCE de “bewerkbare” componenten aandrijft die op zijn beurt de drijvende kracht achter de blokken is. Het tabelblok bijvoorbeeld. Dat zal waarschijnlijk in de nabije toekomst zo blijven.

Het klassieke tekstblok is in feite de TinyMCE-editor. Hoeveel prominentie het krijgt, is afhankelijk van feedback van de community. Er is een Pull Request (#1394) aan het werk, waardoor Gutenberg in feite een wrapper wordt voor de ‘oude’ editor, zodat bestaande TinyMCE-plug-ins en knoppen blijven werken. Blijft nog maar te zien of dat wordt opgenomen.

Hoe dan ook, het is waarschijnlijk dat de WP- en TinyMCE Core-teams blijven samenwerken om ervoor te zorgen dat een gebruikerservaring in tekstverwerkingsstijl in WordPress komt. Zelfs als het uiteindelijk een plug-in wordt.

Ter vergelijking: een van de redenen waarom we met het Gutenberg-team aan het Gutenberg-project hebben gewerkt, is om deze concepten de komende 12 maanden naar de bredere TinyMCE-gemeenschap te brengen. Op die manier kunt u de op blokken gebaseerde bewerkingsconcepten in uw eigen toepassing brengen.
— Andrew Roberts

Hieronder zijn een aantal nieuwe block toevoegingen die we heel tof vinden.

Tabel blok en Tekst kolom blok

Eenvoudige tabellen zijn nu veel eenvoudiger, omdat je ze als blokken in de editor kunt invoegen. Vroeger moest je een plug-in of HTML-code van derden gebruiken. Momenteel kan je alleen een 2 × 2-tabel toevoegen met de invoegoptie en je kunt deze niet opmaken zonder naar de tekstweergave te gaan. Uiteindelijk gaan we ervan uit dat je al deze dingen vanuit de visuele editor kunt doen.

Gutenberg tabellen

Ze hebben ook de mogelijkheid toegevoegd om responsieve kolom blokken in de tekst toe te voegen, wat geweldig is! Momenteel kan je kiezen tussen een lay-out met 2, 3 en 4 kolommen. Responsieve kolommen in WordPress zijn in het verleden altijd lastig geweest en vereisen meestal een plug-in van derden om goed te werken.

Gutenberg kolommen

Live HTML Block

Ze hebben ook wat we een live HTML-blok noemen. Je kan je code invoegen en vervolgens een voorbeeld direct in het blok bekijken. Dit is eigenlijk een vrij cool idee en voorkomt dat sommigen van ons heen en weer moeten schakelen tussen de visuele editor en teksteditor-modus.

HTML block in Gutenberg editor

Slepen van afbeeldingen

Vanaf Gutenberg 0.5.0 kun je nu afbeeldingen direct naar een afbeeldingblok slepen en neerzetten, net zoals je gewend bent met de visuele editor. Er is echter een vervagingseffect wanneer je dit doet, wat best vreemd is. We zouden gemakkelijk kunnen zien dat dit een probleem is.

Slepen van afbeeldingen

U kunt nu ook aanvullende CSS-klassen toevoegen aan bepaalde blokken.

Toevoegen CSS class

Recente Blocks

Nu alle blokken in de Gutenberg-editor zijn ingebouwd en waarschijnlijk nog veel meer worden toegevoegd, hebben ze ‘Recente blokken’ toegevoegd om te het invoegproces te versnellen.

Recente blocks

Cover tekst opties

Vanaf Gutenberg 0.9.0, zijn ook enkele nieuwe visuele stijlen en opties voor de omslagtekst geïntroduceerd. Je kunt de lettergrootte gemakkelijk wijzigen, deze in een Drop Cap veranderen en de kleur wijzigen met een nieuw aangepaste kleurenpaletcomponent.

Gutenberg omslag tekst

Slash automatisch aanvullen

Een leuke functie die is toegevoegd in Gutenberg 1.1.0 is de mogelijkheid om auto-aanvullen te gebruiken om blokken in te voegen. Voor degenen onder ons die Slack dagelijks gebruiken, is dit een heel bekende manier om snel inhoud te formatteren zoals jij dat wilt. De mogelijkheid om klikken te minimaliseren en meer van het toetsenbord te gebruiken, is altijd goed!

Gutenberg autocomplete (Img src: WordPress.org)

Inhoudsopgave en Interne link ondersteuning

TZe hebben ook een inhoudsopgave aan de zijbalk toegevoegd. Het zijn klikbare koppelingen, zodat je gemakkelijk naar een sectie in het artikel kunt gaan. Dit kan van pas komen bij het schrijven van lange artikelen/content.

Gutenberg inhoudsopgave

Een andere functie die u nu op blokken kunt gebruiken, is ankers. Dit is eigenlijk behoorlijk spannend en is iets dat al heel lang nodig is als kernfunctie. Door ankers toe te voegen, kan je rechtstreeks linken naar een bepaalde sectie of kop in het artikel. Dit is geweldig om te delen en om snel naar menu’s in SERP’s te navigeren.

Gutenberg anchor support

Woord en Blok telling

MDe meesten van ons zijn gewend om het totale aantal woorden onderaan de WYSIWYG-editor te zien. In Gutenberg 1.2.1 hebben ze dit toegevoegd als een kleine informatieve pop-up die je snel kunt bekijken. Er is het totale aantal woorden, het aantal blokken en het aantal koppen zien.

Gutenberg woord en block telling

Pull Quotes blokken en nieuwe uitlijn opties

Naast het standaard blockquote dat we al jaren gebruiken, hebben ze ook een nieuwe pull-quote. En ja, pull-quotes zijn anders. Het is ook leuk om enkele variaties op de positionering van de blokken te zien. Jarenlang heeft de standaard visuele editor je de mogelijkheid gegeven om links uit te lijnen, het midden uit te lijnen, rechts uit te lijnen of geen uitlijning toe te kennen. Met de Gutenberg WordPress-editor kun je ookbreed uitlijnen (zoals hieronder te zien is), en de volledige breedte uitlijnen.

Gutenberg pull quote breed uitgelijnd

Knoppen

Er is ook een ingebouwde methode om een eenvoudige knop toe te voegen. Hoewel er nog niet veel opties zijn, is het leuk om te zien, omdat veel bloggers en uitgevers eenvoudiger manieren nodig hebben om call-to-actions toe te voegen aan hun blog artikelen. Op dit moment moet je HTML gebruiken of vertrouwen op een knop/ shortcode-plug-in van derden.

Gutenberg knop

Embed Opties

Als je meer toegankelijke embed-opties wilde, nou, je krijgt zeker je wens! Gutenberg maakt het insluiten van media-inhoud supermakkelijk, of het nu YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit en nog veel meer is. Hoewel je deze inhoud eerder al kon insluiten, realiseerden velen zich dit niet omdat er geen melding was in de visuele editor. Gecombineerd met de nieuwe blokbeleving en uitlijningsopties, weten we niet zeker wat er beter dan dit gedaan kon worden. Hoewel ze misschien dingen in de toekomst moeten reorganiseren omdat dit gemakkelijk rommelig kan worden.

Gutenberg embed opties

Voordelen van de Gutenberg WordPress Editor

Hier zijn een paar voordelen die we zien in de huidige Gutenberg-editor.

• Vermindering van *enige* afhankelijkheid van de TinyMCE is een goed iets naar onze mening.

'Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.' @photomatt #WCEU

— Alex Denning (@AlexDenning) June 17, 2017

• Uitgevers die de nieuwere bewerkingservaring in Medium-stijl verkiezen, zullen waarschijnlijk dol zijn op de WordPress Gutenberg-editor.
• Gutenberg biedt een minder storende ervaring met meer ruimte op het scherm.
• Blokken zijn leuk om te gebruiken en de nieuwe uitlijningsopties zijn een stap voorwaarts voor schermen met een grotere resolutie, sites met volledige breedte en responsieve websites.
• Werkt al uitstekend op mobiel en in de toekomst zullen we zien dat mensen dit veel vaker gaan gebruiken. Moet je snel een bewerking op je telefoon uitvoeren terwijl je onderweg bent? Geen probleem.
• De mogelijkheid voor ontwikkelaars van thema’s en plug-ins om hun eigen aangepaste blokken te maken
• Gemakkelijk in gebruik voor beginners

Een ander ding dat onze aandacht trok in Gutenberg 0.4.0 was de vermelding in hun ontwikkelingslog dat er een API wordt toegevoegd voor het verwerken van geplakte content (Het doel is om een specifieke afhandeling te hebben om inhoud te converteren van Word, Markdown of Google Docs naar native WordPress blokken).
Dit zou geweldig zijn. Op dit moment is het kopiëren van Google Docs naar WordPress helemaal kapot.

Nadelen van de Gutenberg WordPress editor

En hier zijn een paar nadelen die we zien in de huidige versie van Gutenberg. Vergeet niet dat het nog in de testfase zit, dus veel van deze dingen zullen waarschijnlijk worden opgelost of toegevoegd.

• Ondersteuning voor Markdown ontbreekt.
• Ondanks dat we het ook hebben aangemerkt als makkelijker voor beginners, kunnen wij dit ook zien als iets moeilijker om aan te leren.
• Vanaf oktober 2017 ondersteunt Gutenberg meta boxes. Dit is echter slechts initiële ondersteuning en er zijn ontwikkelaars nodig die hier mee gaan werken. Het is echter een stap in de goede richting. Je kunt tenminste je Yoast SEO-instellingen nu minimaal aanpassen. 😄

Gutenberg daarna

• Met zoveel thema’s en plug-ins die er zijn, zal compatibiliteit een groot probleem worden in de toekomst. In feite zullen er duizenden ontwikkelaars zijn die veel werk moeten verzetten, bijvoorbeeld diegenen die integraties hebben met TinyMCE. Van alle WordPress-updates zal dit waarschijnlijk het meeste werk zijn voor ontwikkelaars. Er komt mogelijk een wrapper die TinyMCE compatibiliteit mogelijk maakt. Zie pull request #1394.
• Sommigen maken zich zorgen over de toegankelijkheid van Gutenberg. Joost de Valk, de ontwikkelaar van Yoast SEO, bracht deze zorg naar voren. Zorg ervoor dat je ook deze post leest over het gebruik van Gutenberg via een schermlezer.

Ontwikkelaars zijn maken hun zorgen over Gutenberg kenbaar. Ahmad Awais heeft ook een Gutenberg boilerplate uitgebracht om WordPress-ontwikkelaars van thema’s en plug-ins te helpen bij de ontwikkeling met Gutenberg. De moeite waard om te bekijken.

En velen van jullie vragen zich waarschijnlijk af of Gutenberg optioneel is of niet? Het antwoord is nee. Als ze Gutenberg officieel in de WordPress-kern uitrollen kun je het niet uitschakelen, omdat dit de officiële editor voor WordPress wordt. Er is echter een gratis plug-in genaamd Classic Editor die je kunt gebruiken om de oude berichteditor te herstellen. Maar dit is meer een middel dan een doel.

We raden ook aan om deze geweldige post over Gutenberg myth-busting. Deze post zou eventuele aanvullende vragen kunnen beantwoorden.

Probeer de Gutenberg Demo

Wil je met Gutenberg spelen zonder het te installeren? Bekijk Frontenberg, een beperkte front-end demo van de WordPress Gutenberg-editor.

Voor meer informatie raden we je aan onze WordPress 5.0-handleiding te bekijken: Wat is er nieuw in WordPress 5.0? (Hoe je je op Gutenberg voorbereidt)

Introductie van het thema Twenty Twenty.

Mocht je er nog niet klaar voor zijn, dan kan je de nieuwe editor uitschakelen. Hier is onze gids: Hoe Schakel je de Gutenberg WordPress Editor uit.

Samenvatting

Over het algemeen waren we behoorlijk onder de indruk van de nieuwe Gutenberg WordPress-editor, het is absoluut iets waar we enthousiast over zijn voor de toekomst. We moedigen iedereen aan een kopie ervan te downloaden in de WordPress repository en deze te installeren op een dev- of staging-site. Dit is onze kans om de editor die we allemaal wilden te helpen bouwen. We kunnen dezelfde ervaring hebben als de medium mensen, maar in ons favoriete CMS! Het team hier bij Kinsta zal zeker wat tijd vrijmaken voor het geven van feedback.

Heb jij Gutenberg al geprobeerd? Als dat zo is, horen we graag jouw gedachten, zowel goed als slecht.