Gutenberg: Spelen met de blokkendoos!

Een aantal leuke uitbreidingen voor de Gutenberg Editor

Soms krijg je met WordPress het gevoel, dat je weer helemaal terug mag gaan naar de kleuterschool. Enkele jaren geleden schreef ik een artikel over het spelen in de zandbak met WordPress en vandaag halen we de ‘blokkendoos’ uit de kast. Met andere woorden, we gaan eens kijken naar een aantal leuke uitbreidingen voor Gutenberg.

Wat is Gutenberg nu precies?

Toen met de invoering van WordPress 5.0 de Gutenberg editor standaard onderdeel van WordPress werd, wist eigenlijk iedereen wel wat Gutenberg was. Het was de codenaam voor de nieuwe editor voor WordPress. Inmiddels merk ik dat onder de mensen die na die tijd met WordPress zijn gaan werken er mensen zijn die niet precies doorhebben wat Gutenberg nu precies is. En waarom zouden ze ook? Het is gewoon ‘de editor’. Dat heeft toch geen aparte naam nodig?

Wat echter spijtig is, dat ik merk dat zowel een groot aantal oude als nieuwe gebruikers van Gutenberg niet door heeft, wat je nu allemaal met Gutenberg kan doen. De editor veel te veel alleen gebruikt om tekst in te typen.

En dat terwijl Gutenberg zoveel meer kan.

De magie zit hem in het de ‘slash’, het ‘/’ teken. Wanneer je dit aan het begin van een regel indrukt, dan krijg je allerlei ‘onderdelen’ te zien die je in de pagina kan toevoegen. De zogenaamde blocks.

Wat nog veel leuker is, is dat deze blocks heel makkelijk toegevoegd kunnen worden aan Gutenberg. Gebruik jij bijvoorbeeld de Yoast SEO plugin tik dan eens ‘/yoast’ aan het begin van een regel. Je ziet dan een ‘How To’ block en een ‘FAQ’ block. De kracht van deze blokken, is dat ze haarfijn aan Google uitleggen, dat het hier om een ‘how to’ of een ‘faq’ gaat en er een redelijke kans bestaat, dat Google jouw howto of faq als ‘Rich Answer‘ aan zal bieden.

Maar er zijn ook tal van andere plugins die ‘blokken’ toevoegen aan de Gutenberg editor. En een aantal daarvan wil ik graag samen met jou bekijken.

1. Gutenberg Maps block for Google Maps

De Gutenberg Maps block for Google Maps is precies wat de naam voorstelt. Toch fijn zo’n zelfbeschrijvende productnaam. Na het installeren krijg je hem onder andere te zien door /goo of /map in te tikken.

Alle instellingen voor dit block vind rechts in het scherm. En het spreekt verder eigenlijk helemaal voor zich.

2. TinyMCE Advanced

TinyMCE is de ‘oude’ editor in WordPress. Een editor die overigens nog steeds aanwezig is en geactiveerd kan worden door middel van de ‘Classic Editor’ plugin, maar ook indirect geactiveerd wordt, wanneer je een ‘classic block’ of een ‘klassiek blok’ toevoegt aan je content.

Helaas heeft dit ‘klassiek blok’ niet de opmaakmogelijkheden die je in andere blokken mag verwachten.

De TinyMCE Advanced plugin voegt die mogelijkheden toe aan de klassieke editor. Zaken als tekst grootte, achtergrond kleur en meer zijn dus makkelijk aan te passen.

3. WP Call Button

Wil je dat je bezoeker je direct belt? Maak het makkelijk voor hem met de WP Call button. Deze knop kan -naar keuze- alleen zichtbaar gemaakt worden op mobiele telefoons. Klikt de bezoeker op de knop, wordt direct het door jou ingestelde nummer gebeld.

De meest directe ‘Call to action’, dacht je niet?

4. Gutenberg PDF Viewer / Reader block

Wil je een PDF document zichtbaar maken in je blogpost of pagina? Dan is de Gutenberg PDF Viewer / Reader block plugin precies wat je nodig hebt.

Het werkt heel eenvoudig. Je voegt het block toe, kiest je PDF uit de media library en je geeft eventueel aan dat het document links, rechts, of in het midden uitgelijnd moet worden.

Eén belangrijk punt om rekening mee te houden is dat een PDF bestand niet responsive is. Dat ligt niet aan de plugin, maar aan de aard van het PDF bestand zelf. Een PDF zichtbaar maken op een telefoon kan dus vaak niet al te duidelijk zijn.

5. Planet Charts

Laat jij graag staaf, lijn, taart of andersoortige grafieken zien op jouw webpagina’s? Dan is de tijd dat je met het exporteren van afbeeldingen vanuit Excel voorgoed voorbij. Want met Planet Charts kan jij allerlei grafieken eenvoudig op de pagina krijgen.

Drop het blok, kies het type grafiek wat je wilt hebben en vul vervolgens de gegevens in, die in de grafiek gebruikt moeten worden.

Wanneer je door de blocken de blog niet meer ziet!

Laten we eerlijk zijn. De mogelijkheid om je Gutenberg blokken uit de breiden en daarmee de functionaliteit van de editor uit te breiden is geweldig. Maar op een gegeven moment loop je het gevaar, dat je door de bomen het bos, of door de blocken de blog niet meer ziet.

Want stel je voor, je hebt twee handige block collecties geïnstalleerd. Allebei de collecties hebben een ‘Tab’ block… maar welk ‘Tab’ block was nu ook al weer dat block waar je zo graag mee werkt? En eigenlijk vind je het Gutenberg standaard kolommen niet zo geweldig en heb je de voorkeur voor een andere kolommen block, maar je bent al zo gewoon om /kol in te tikken, om je kolommen te krijgen?

Hoe los je dit allemaal op?

Sinds WordPress 5.2 heeft Gutenberg ook zoiets als een ‘Block Manager’, een functie waarmee je de door jou geïnstalleerde blocken kan beheren. Door in het editor scherm op de drie puntjes rechtsboven te klikken roep je het menu ‘Meer gereedschappen en opties’ op. Ongeveer op 2/3 van dat menu vind je de optie ‘Blockbeheerder’.

Hier kan je simpel die blocken aan- en uitvinken die je wel of niet nodig denkt te hebben.

Al gebruikte blocken blijven wel actief, maar ze worden niet meer in de lijst weergegeven.

Doe meer met Gutenberg

Anderhalf jaar na de invoering van WordPress 5.0 merk ik dat de meeste gebruikers nog schoorvoetend gebruik maken van Gutenberg. En wanneer ze het doen, eigenlijk slechts met een minimaal gebruik van de mogelijkheden.

Dat is jammer. Want hoewel Gutenberg veel te vroeg met nog allerlei kinderziektes werd geïntroduceerd is het inmiddels een volwassen editor geworden en met Gutenberg kan je oneindig veel meer -en makkelijker- dan met de klassieke TinyMCE Editor.

Durf dieper in te duiken in de mogelijkheden.