gutenberg wordpress

Nieuwe Gutenberg editor in WordPress

Gutenberg is de codenaam voor de nieuwe editor van WordPress. Deze gaat geïntegreerd worden vanaf WordPress 5.0. Naar verwachting is het medio april 2018 al zover.

De editor heeft al flink wat los gemaakt in de WordPress community. Zoals bij iedere – grote – verandering is niet iedereen even enthousiast. Maar, eind goed al goed, ik denk dat het uiteindelijk een hele waardevolle toevoeging gaat worden.

In deze blog post wil ik graag de mogelijkheden van de nieuwe WordPress editor laten zien. Ook zal ik deze plek gebruiken om regelmatig updates over de editor te plaatsen.

Wat is de WordPress Gutenberg editor?

Gutenberg is de vervanger van de huidige WYSIWYG editor en zelfs meer dan dat. Om WordPress vrij vertaald te citeren:

Guttenberg is meer dan een editor. Dit is pas het begin, Gutenberg gaat straks alle manieren van publiceren en aanpassen in WordPress beïnvloeden.

Zie het verschil tussen beide editors in onderstaande afbeelding.

Guttenberg en Klassieke editor

Visuele editor

Als je een regelmatige gebruiker bent van WordPress ken je vast het probleem dat het positioneren en opmaken van tekst en afbeeldingen niet altijd even gemakkelijk is. WYSIWYG staat voor Wat Je Ziet Is Wat Je Krijgt (op z’n Engels dan….), maar het uiterlijk van de opmaak in de editor en aan de voorkant van je website verschillen vaak enorm.

De huidige editor is eigenlijk gewoon een invulveld dat aan de voorkant van je website getoond wordt.

De nieuwe Gutenberg editor moet een volledige “live opmaak ervaring” geven. Je doet aanpassingen intuïtief en kan exact zien hoe dit er aan de voorkant uit komt te zien.

Daarnaast ben je met de introductie van allerlei verschillende blokken in staat om verschillende soorten content gemakkelijk (zonder technische kennis) toe te voegen.

Over de verschillende blokken later meer in dit artikel.

Hoe werkt de Gutenberg editor?

De besturing van de editor gebeurt via de opties aan de bovenkant. Aan de zijkant vind je een aantal vertrouwde functies, maar ook enkele nieuwe toevoegingen.

Gutenberg editor uitleg

Per cijfer in de afbeelding:

  1. Via deze knop voeg je een blok toe. Dit gebeurt onderaan het laatst toegevoegde blok
  2. Deze twee pijltjes bieden je de mogelijkheid om gemakkelijk wijzigingen te annuleren of terug te halen
  3. Deze optie geeft je informatie over het artikel dat je aan het maken bent. Zoals het aantal woorden en gebruikte blokken.
  4. Als je klikt op deze link komen de opties in beeld zoals te zien in bovenstaand screenshot. Dit zijn de globale instellen voor  de hele pagina.
  5. Bij selectie van deze link verdwijnen de globale opties voor de pagina en verschijnen hier blok specifieke opties voor het blok dat op dat moment geselecteerd is.
  6. Schuif de sidebar met instellingen in om meer ruimte te hebben voor het aanpassen van de content
  7. Als je klikt op deze drie puntjes verschijnt een menu waarmee je de achterliggende HTML code van de content toont in de editor.  Handig als je hier iets in wilt wijzigen.
  8. Dit uitschuif panel is gelijk aan die in de oude editor. Je kunt hier bijbehorende categorieën selecteren en toevoegen
  9. Zelfde als bij 8, maar dan voor tags
  10. Nog een optie zoals in de oude editor, voor het toevoegen van de uitgelichte afbeelding. Deze afbeelding verschijnt, afhankelijk van je thema, meestal bovenaan je bericht.
  11. Dit is een optie die voorheen onder de editor stond. Deze samenvatting (excerpt) is vaak zichtbaar in berichtoverzichten.
  12. Via deze opties kun je reacties op het bericht toestaan of niet.

Switch to draft Gutenberg
Een andere mooie nieuwe optie is de “Switch to Draft” knop. Hiermee kun je een gepubliceerd bericht met één klik weer op “concept” zetten. Erg handig als je, zoals ik, regelmatig per ongeluk een artikel al publiceert als je er nog mee bezig bent.
Gutenberg publish warning
Dit is duidelijk een belangrijk punt geweest bij de ontwikkeling… Want, ook als je een bericht wil publiceren krijg je eerst de vraag of je dat wel zeker weet. Handig!

Blokken in de Gutenberg editor

De grootste vernieuwing in de Guttenberg editor is de toevoeging van een groot aantal verschillende content blokken. Het toevoegen van video’s, afbeeldingen, gallerijen en headings gaat nu makkelijker dan ooit.

Blok toevoegen gutenberg

Een blok selecteren doe je door linksbovenin op het plusje te klikken. Of je klikt ergens tussen de bestaande blokken. Als je eerder gewerkt hebt met pagebuilders zoals Elementor of Divi voelt dit vrij intuïtief aan en werkt het gemakkelijk.

Naast de standaard paragraaf kun je onder andere blokken toevoegen voor:

  • Afbeeldingen
  • Gallerijen
  • Youtube, je hoeft alleen maar de link naar de youtube video toe te voegen
  • Quotes

Dit moet ook de plek worden waar plugin specifieke blokken toegevoegd kunnen worden. Dat kunnen er in totaal dus heel wat worden.

Een handige tip: als je in een nieuw blokt type: “/BLOK NAAM” dan voeg je een blok toe met je toetsenbord.

Werkt Gutenberg met mijn website?

Vanaf WordPress 5.0 is de Gutenberg editor onderdeel van de core. Alle bericht types en pagina’s die je tot dan toe hebt gemaakt werken ook nog steeds zoals ze daarvoor deden. Alleen de editor aan de achterkant veranderd.

Convert to blocks

Bij het openen van een “oude post” – die is aangemaakt met de klassieke editor – kun je kiezen voor de optie “convert to blocks”. Op die manier worden de alinea’s in blokken verdeeld en kun je de andere blokken gaan toevoegen.

Styling

Daarmee is nog niet gezegd dat de nieuwe editor direct optimaal werkt voor jouw thema. Gutenberg is bedoeld als visuele editor die jouw content toont zoals het ook aan de voorkant zichtbaar is.

Wil jij dit ook in je thema? Dan moet een deel van de styling van de front-end ook in de editor worden toegevoegd.

Ook zullen specifieke blokken zoals de fotogallerij, andere afbeeldingen en embeds er aan de voorkant van je website nog niet altijd optimaal uitzien. Hier is ook extra styling voor nodig.

Het compatible maken van jouw website met Gutenberg vraagt dus nog wel wat werk.

Metaboxes

Metaxboxes zijn de panels die je gewend was in de klassieke editor onder en naast de tekstverwerker. Hier maken externe plugin’s zoals Yoast en Advanced Custom Fields gebruik van.

In eerste instantie was de bedoeling om deze metaboxes in Gutenberg weg te laten. Dit zorgde destijds voor flink wat onrust. Hoe moesten al die externe plugin’s daar zo snel op inspringen? Uiteindelijk is besloten om de metaboxes – in enigzins aangepaste versie – nog te blijven tonen onder de editor.

Op langer termijn is het nog steeds de bedoeling om de metaboxes te laten verdwijnen. Het is aan de plugin developers om hun functies te integreren met de manier waarop Gutenberg werkt.

Het idee achter Gutenberg

De WordPress editor was toe aan een verandering. Daar was iedereen het over eens. Toch heeft Gutenberg tot de dag van vandaag voor veel discussie gezorgd. Bij eerdere versies had ik ook zeker mijn twijfels. Inmiddels is de editor enorm verbeterd en ben ik er zeker van dat het een verbetering gaat worden.

Want houd je vast. Dit is pas het begin!

Het aanpassen van de editor is fase 1 van project Gutenberg. In volgende fases moet een volledige website aan te passen zijn met Gutenberg.

En er is meer…  eind vorig jaar sprak Morten Rand-Hendriksen hierover op Wordcamp. Super cool om deze presentatie eens te bekijken: https://videopress.com/v/AvC6H2JI

Ja, uiteindelijk doen we het allemaal voor Virtual Reality.. 🙂

Probeer Gutenberg

Als je de eer hebt om één van de early adaptors te zijn die dit artikel leest voordat WordPress 5.0 uit is. Het is echt aan te raden om – in een testomgeving (!!) – de gutenberg plugin te installeren en proberen.  Als developer is dit de tool om een thema alvast voor te bereiden op de update.

Heb jij de plugin al geprobeerd? Wat zijn jouw ervaringen met Gutenberg? Waar loop je tegenaan? Laat het hieronder achter in een reactie!

Geef een reactie

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