Een uitgebreide uitleg over de nieuwste Gutenberg WordPress editor

Toen de WordPress blockeditor, beter bekend als de Gutenberg editor, gelanceerd werd in december 2018, wist niemand echt wat we moesten verwachten. Uiteraard hadden we allemaal ruim de tijd gehad om met de beta-versie te spelen, maar we konden niet voorspellen hoe soepel de daadwerkelijke lancering zou gaan, en hoe enthousiast gebruikers en developers de nieuwe editor zouden ontvangen.

De afgelopen twee jaar sinds we dit artikel hebben gepubliceerd, hebben we de Gutenberg editor enorm zien groeien. Het is van een Minimum Viable Product (MVP) gegroeid tot een volwassen project dat steeds dichter in de buurt komt van het doel van een geharmoniseerde Full Site Editing ervaring voor WordPress.

Om deze veranderingen recht te doen, kijken we opnieuw naar de Gutenberg editor om het nieuwe uiterlijk te bespreken en te kijken hoe de editor zich de komende tijd gaat ontwikkelen.

Wat is de Gutenberg blockeditor?

Gutenberg, ook bekend als de “WordPress blockeditor” of gewoon de “WordPress editor”, is de WordPress content editor die geïntroduceerd werd bij WordPress 5.0, met een release op 6 december 2018.

Als je die term nog nooit eerder gehoord hebt, het gaat over de standaard editor die alle WordPress websites gebruiken, tenzij je dit specifiek uitzet. Dit ziet er ongeveer zo uit:

Het grote verschil tussen de Gutenberg WordPress editor en de vorige WordPress editor (die we nu de “klassieke editor” noemen, of de “TinyMCE editor”), is de op blokken (“blocks” genoemd) gebaseerde aanpak bij het maken van content.

Bij Gutenberg is elk element van je content een block, waardoor je content sneller kan bewerken. Elke alinea is een block, elke afbeelding is een block, elke knop is een blok, en ga zo maar door.

Externe developers kunnen ook hun eigen blocks maken, wat een eind maakt aan de relatie van WordPress met shortcodes. Stel dat je een contactformulier wil opnemen in je website. In plaats van het toevoegen van een shortcode (bijvoorbeeld `[jouw-formulier-shortcode]`) zoals vroeger, kan je nu gewoon een block van je formulierenplugin naar de gewenste pagina slepen.

Daarnaast kan je blocks gebruiken om complexe layouts te maken, zoals een ontwerp met meerdere kolommen, of het groeperen van blocks voor meer samenhang in je pagina’s.

Naarmate we meer laten zien van hoe je de blockeditor kan gebruiken, zul je steeds beter snappen hoe je met blocks mooiere en betere content kan maken.

Gutenberg is niet alleen een content editor

Een belangrijk idee dat je moeten begrijpen is dat het Gutenberg project niet alleen gaat om het maken van een leuke content editor.

In juli 2021 was Gutenberg inderdaad nog primair alleen een content editor. Maar het lange-termijn doel voor Gutenberg is dat het steeds meer gaat naar een concept dat Full Site Editing heet.

Het principe achter Full Site Editing (oftewel het bewerken van volledige pagina’s), is dat je 100% van je website kan ontwerpen met de Gutenberg editor. In plaats van dat je bijvoorbeeld beperkt met tot de opties voor headers in je WordPress thema, kan je dan Gutenberg gebruiken om je eigen headers te ontwerpen, dankzij de block editor.

Dit soort functionaliteit is nog niet beschikbaar, maar dit komt er zeker wel aan en we hebben al wat “proof of concept” projecten die we verderop zullen laten zien.

Voordelen en nadelen van Gutenberg ten opzichte van populaire alternatieven

Nu we inmiddels de WordPress blockeditor al twee jaar hebben mogen gebruiken, hebben we een goed idee van de voordelen en nadelen van Gutenberg ten opzichte van andere oplossingen.

Er zijn twee belangrijke alternatieven voor het maken van content op WordPress:

• WordPress TinyMCE editor: Dit is de klassieke editor die in WordPress gebruikt werd vóór WordPress 5.0.
• Page builder plugins: Dit zijn externe plugins waarmee je een visuele ontwerp-ervaring krijgt in WordPress, waarbij je elementen naar de juist plek kan verslepen.

In het algemeen biedt de klassieke TinyMCE editor een eenvoudige, tekstverwerker-achtige ervaring, terwijl page builders juist meer visueel werken en een meer flexibele aanpak bieden.

Als we de drie soorten editors op volgorde van flexibiliteit qua ontwerp zouden zetten, zou het ongeveer hierop neerkomen:

Classic TinyMCE editor (minst flexibel) < Gutenberg < Page builders (meest flexibel)

Tijd om het over de verschillende voordelen en nadelen te hebben tussen de Gutenberg blockeditor en alternatieve oplossingen.

Gutenberg en de klassieke editor: voordelen en nadelen

Laten we beginnen met een vergelijking tussen Gutenberg en de klassieke TinyMCE editor.

Voordelen:

• Gutenberg geeft een meer visuele ontwerpmethode.
• Je hebt geen shortcodes nodig om content op te nemen, maar krijgt een geharmoniseerd blocksysteem.

Nadelen:

• Sommige mensen vinden het schrijven in Gutenberg te veel werk, omdat je voor elke alinea een nieuw block moet maken. Voor lange artikelen kan het dan veel werk zijn om de tekst te bewerken. Je zou dan liever in een andere editor kunnen schrijven, en vervolgens alle tekst plakken in Gutenberg wanneer je klaar bent met het schrijfwerk.
• Alhoewel de prestaties van Gutenberg flink verbeterd zijn, kan het nog steeds traag worden bij grote artikelen, wat minder snel gebeurt bij de klassieke editor.

Als je denkt dat de klassieke TinyMCE editor gewoon beter bij jouw wensen past, kan je de Gutenberg editor ook uitzetten.

Gutenberg en page builders: voordelen en nadelen

Tijd om Gutenberg te vergelijken met externe page builder plugins.

Voordelen:

• Gutenberg is een kernfeature, waardoor je nooit na hoeft te denken over problemen met de compatibiliteit.
• Doordat het een kernfeature is, kunnen alle developers ondersteuning voor Gutenberg inbouwen in hun plugins.
• Gutenberg levert strakkere code, die meer lichtgewicht is. Als alle overige dingen hetzelfde zijn, laadt een ontwerp dat met Gutenberg gebouwd is meestal sneller dan hetzelfde ontwerp via een page builder.

Nadelen:

• Gutenberg biedt geen eenvoudige visuele bewerking, zoals een page builder dat doet. Het is zeker toegankelijker dan de klassieke editor, maar nog niet net zo soepel als een page builder.
• Page builders zijn nu nog flexibeler en bieden je meer opties voor je layout.
• De meeste page builders bieden vloeiender sleepbewegingen.

Conclusies over de vergelijking

Voor de meeste gebruikers biedt Gutenberg precies genoeg flexibiliteit.

Lang niet iedereen heeft de flexibiliteit van een page builder nodig voor hun content, zeker niet als het gewoon blogartikelen zijn. Maar anderzijds is het natuurlijk wel handig dat je eenvoudig een layout met meerdere kolommen kan maken of een knop kan toevoegen, iets dat een klassieke editor niet zo eenvoudig maakt.

Met die conclusie in ons achterhoofd kunnen we gaan kijken naar hoe je Gutenberg kan gaan gebruiken.

Zo gebruik je de Gutenberg WordPress blockeditor

Nu we een beeld hebben bij de Gutenberg blockeditor, kunnen we gaan kijken naar hoe je met deze editor content kan gaan maken.

We beginnen met een eerste oriëntatie in de interface en gaan gaandeweg naar gevorderde toepassingen toe.

De Gutenberg Blockeditor interface

Wanneer je de editor opent, zal het WordPress dashboard verborgen worden, waardoor je het hele scherm hebt om je content te bewerken:

Er zitten drie belangrijke onderdelen in de editor:

• Content: Je content neemt de meeste ruimte in. Je ziet een visuele preview van wat je aan de frontend van de website te zien krijgt. Dit klopt niet altijd 100%, maar je krijgt wel een goed idee van het eindresultaat.
• Top toolbar: De toolbar bovenaan biedt tools om nieuwe blocks toe te voegen, acties ongedaan te maken, en andere belangrijke instellingen
• Sidebar: De zijbalk bevat twee tabbladen. Met het tabblad Post kan je instellingen op het niveau van je artikel bepalen, zoals de categorieën, tags, uitgelichte afbeelding en meer. Het tabblad Block toont de instellingen voor het geselecteerde block, daarover later meer.

Om een prettiger ervaring te hebben tijdens het schrijven, kan je de zijbalk verbergen door op het tandwiel rechtsboven te klikken. Om de zijbalk weer terug te brengen, klik je er nog eens op.

Zo ziet de interface van de editor er bijvoorbeeld uit als je het nieuwe Twenty Twenty-One standaardthema gebruikt:

Toevoegen van blocks

Om een normale alinea toe te voegen aan je artikel, kan je gewoon klikken en gaan typen. Elke keer dat je op enter drukt, zal de editor automatisch een nieuwe paragraph block aanmaken.

Voor andere soorten content, moet je een nieuw block toevoegen. Je kan block onder meer gebruiken voor afbeeldingen, knoppen of video embeds.

Om een nieuwe block toe te voegen klik je op een plusje in de interface. Dit vind je linksboven voor de belangrijkste knop, maar je zal ook andere iconen in de interface zijn waarbij je een kleinere interface opent voor het toevoegen van blocks.

Om te beginnen zet je de muis op plek waar je het nieuwe block wil hebben. Om bijvoorbeeld een nieuwe block toe te voegen onder de knop, klik je net onder de knop, en dan op het icoon +.

Je zou nu een zijpaneel moeten zien met alle beschikbare blocks, opgesplitst in categorieën. Je kan zoeken op een specifieke block, of een optie uitkiezen. Wanneer je de muis boven een block houdt, zie je een omschrijving en preview.

Om de block echt toe te voegen, klik je er gewoon op. Stel dat je bijvoorbeeld een normale afbeelding wil toevoegen, dan klik je op het image block.

Je kan vervolgens de prompts volgen om een bestaande afbeelding te kiezen uit je Media Library of een nieuwe te uploaden.

Belangrijke opties voor opmaak

Om basiskeuzes te maken voor de opmaak van je block, krijg je een toolbar die verschijnt wanneer je op een block klikt.

Bij het opmaken van normale tekst, kan je daar bijvoorbeeld:

• Tekst cursief of dikgedrukt maken
• Links toevoegen
• Uitlijning aanpassen
• Formatting toevoegen, zoals inline code, doorgestreepte of onderstreepte tekst

Stel dat je een link wil toevoegen in je content. Dan zou je eerst het stuk tekst selecteren waarmee je wil linken, in ons voorbeeld is dat “For other types of content”. Vervolgens kan je op het icoon voor links klikken in de toolbar, om opties voor het toevoegen van een link te openen.

Configureren van geavanceerde instellingen voor blocks

Alle blocks die je toevoegt hebben hun eigen extra instellingen in de zijbalk. Sommige blocks hebben maar een paar instellingen, en anderen veel meer, met bijvoorbeeld het ontwerp, de layout, verschillende functies en nog veel meer.

Om de instellingen van een block te openen, klik je op het block in de editor om deze te selecteren. Vervolgens ga je naar het tabblad Block in de zijbalk om de bijbehorende instellingen te zien.

Hieronder kan je de instellingen voor het button block zien, voor een knop, die erg veel opties biedt. Je kan bijvoorbeeld de kleur veranderen, de knop breder maken, en nog allerlei andere zaken aanpassen.

Wanneer je iets verandert in deze instellingen, zie je dat meteen in de editor.

Nogmaals, elk block heeft dus instellingen die uniek zijn voor dat soort blocks. Als je bijvoorbeeld de instellingen openen voor een normale alinea met tekst, dan krijg je alleen wat keuzes qua lettertype en kleur. Hieronder zie je dat we de achtergrondkleur van tekst kunnen veranderen om dit te markeren:

Wijzigen van de plek van blocks

Naast blocks kopiëren en plakken (wat je ook voor tekst kan doen), biedt Gutenberg je twee manieren om de plek van blocks aan te passen.

Als je bijvoorbeeld een block enkele plekken naar boven of beneden wil verplaatsen, dan kan je de pijlen omhoog of naar beneden gebruiken om de zwevende toolbar.

Voor grotere wijzigingen, kan je de block verslepen. Om een block te slepen, moet je op de “zes puntjes” klikken, links van de pijlen.

Nadat je op dat icoon klikt en ingedrukt houdt, kan je de block slepen naar waar je het wil hebben.

Embedden van content van andere bronnen

Gutenberg biedt speciale blocks voor het embedden van externe content, zoals van YouTube, Vimeo of Soundcloud. Je kan al deze opties vinden in het onderdeel Embeds in de block inserter.

Om bijvoorbeeld een YouTube video op te nemen in je content, hoef je alleen maar:

1. De speciale YouTube block toe te voegen.
2. De URL naar de video te plakken.
3. Klikken op Embed.

Je zou nu een preview van de bedoelde video moeten zien in de editor.

Maken van layouts met meerdere kolommen of groepen

Zoals we zonet aanstipten, is één van de belangrijkste voordelen van de blockeditor ten opzichte van de oude TinyMCE editor dat je nu ingewikkeldere layouts kan maken, zonder dat je eigen code hoeft te schrijven of shortcodes te gebruiken.

De blockeditor biedt twee standaardblocks om je hierbij te helpen:

• Columns: Maken van een layout met meerdere kolommen.
• Groups: Groeperen van meerdere blocks. Je kan deze opties gebruiken om bijvoorbeeld een achtergrondkleur in te stellen voor een heel gedeelte, die dan op meerdere blocks wordt toegepast.

Beide blocks werken door het “nesten” van blocks, waarbij je dus één of meerdere blocks binnen een andere block plaatst.

We laten je een voorbeeld zien met het block voor kolommen, maar dit werkt hetzelfde bij de optie voor het groeperen.

Stel dat je een layout wil maken met twee kolommen, waarbij de linker kolom normale tekst heeft, en de rechterkolom een knop.

Om te beginnen gebruik je dan de block inserter om de columns block toe te voegen. Daarbij krijg je een vraag waarbij je de gewenste layout kan kiezen:

We kiezen voor een layout met twee kolommen en een verhouding van 50/50 voor dit voorbeeld. Daarna zie je twee velden van gelijke grootte, met + icoontjes erin. Om content toe te voegen kan je op de + klikken, voor de interface voor het toevoegen van blocks:

Na het toevoegen van het eerste block aan een kolom, kan je op + drukken om meer blocks toe te voegen. Je kan ook een block van buiten de kolom naar de kolom verslepen.

10 handige tips voor Gutenberg om productiever te werken

Nu we redelijk weten hoe Gutenberg werkt, kunnen we gaan kijken naar waardevolle tips waarmee je de blockeditor effectiever en efficiënter kan gebruiken.

1. Gebruik / (voorwaartse slash) om snel blocks toe te voegen

Als je veel blocks moet toevoegen, is het handmatig openen van de block inserter te veel gedoe. Wanneer je de namen van de gebruikelijke blocks een beetje kent, kan je gelukkig veel sneller blocks toevoegen via je keyboard, namelijk met de /, oftewel de voorwaartse slash.

Als je op “Enter” drukt om een nieuw paragraph block te maken, kan je ook een voorwaartse slash gebruiken, en dan de naam van de gewenste block, om deze net zo snel toe te voegen.

Wanneer je begint met typen, zie je meteen een lijst met blocks die passen bij wat je getypt hebt. Je kan de pijltjes op je toetsenbord gebruiken om naar het gewenste block te gaan, en daarna op “Enter” drukken.

Een voorbeeld van deze functie voor het toevoegen van een image block:

2. Afbeeldingen toevoegen door ze te verslepen vanaf je bureaublad

Als je veel afbeeldingen toevoegt, biedt de blockeditor nog een handige functie om tijd te besparen, waardoor je geen image block meer hoeft toe te voegen voordat je een afbeelding gaat uploaden.

Je kan dan gewoon de afbeelding direct van je bureaublad slepen naar de locatie waar je het wil toevoegen aan je artikel. Wanneer je de afbeelding naar de content van je artikel sleept, zie je een blauwe lijn waar de afbeelding te zien zal zijn.

Nadat je het bestand loslaat, zal WordPress dit automatisch uploaden en op die plek netjes een image block toevoegen:

3. Gebruik Markdown opmaak

Als je een fan bent van de Markdown syntax voor het maken van content, zal het goed nieuws zijn dat de blockeditor enige ondersteuning biedt voor markdown, met name in de headings.

Als je bijvoorbeeld een heading block met een H3 tag wil toevoegen, kan je drie hashtags (hekjes, `###`) typen, en dan op spatie drukken. De editor zal dit automatisch omzetten naar een H3, en je kan meteen de daadwerkelijke heading intypen:

Stel dat je nog meer ondersteuning wil voor complexere Markdown. Dan kan je een gratis plugin, zoals EditorsKit installeren, waarmee je Markdown kan gebruiken voor dikgedrukte tekst, schuine tekst, en doorgestreepte tekst. We zullen het zometeen uitgebreid hebben over Gutenberg plugins.

4. Zet de formatting toolbar vast bovenaan in de editor

Als je het onhandig vindt dat de formatting tool “zweeft” boven het geselecteerde block, dan biedt de blockeditor ook de optie om deze vast te zetten aan de bovenste toolbar:

5. Kopieer een block met alle instellingen

Met de blockeditor kan je tekst kopiëren en plakken, net als in een andere tekstverwerker, gewoon met “Ctrl + C” of rechtsklikken en kiezen voor Copy.

Maar je kan deze aanpak niet gebruiken om een heel block te kopiëren en plakken. In plaats daarvan moet je dit doen:

1. Selecteer het block.
2. Klik op de drie puntjes in de toolbar van de block.
3. Selecteer Copy.

Nadat je een block op deze manier gekopieerd hebt, kan je het wel op de normale manier plakken, dus “Ctrl + V” of rechtsklikken en kiezen voor Paste.

6. Sneller de goede block selecteren met de lijst van blocks

Voor de meeste blocks kan je gewoon op de editor klikken om het block te selecteren. Maar wanneer je geneste blocks gebruikt, kan dat wat lastiger worden, omdat je dan blocks binnen een groep of kolom van blocks hebt.

De editor biedt daarom een optie List View, die je in de bovenste toolbar kan openen. In deze lijst zie je elk block, waaronder ook geneste blocks.

Je kan een block selecteren door erop te klikken in de lijst, en de editor zal ook de blocks markeren wanneer je er met de muis boven zweeft.

In onderstaand voorbeeld zie je:

• De primaire parent block met kolommen
• Geneste blocks voor elke kolom
• Een geneste group block binnen één kolom
• Een geneste heading block binnen de group block

Om de bovenste parent block te selecteren, kan je het makkelijkste de lijst openen en deze selecteren:

7. Open de code editor (voor individuele blocks of volledige artikelen)

Eén van de voordelen van de Gutenberg blockeditor is dat je allerlei stijlen en layouts kan configureren, zonder dat je code hoeft te schrijven. Maar toch kunnen er momenten zijn waarop je graag direct aan de code wil kunnen werken, zeker voor ervaren gebruikers.

Om dat te doen biedt de Gutenberg editor verschillende mogelijkheden.

Allereerst kan je de code van een individueel block bewerken, handig voor kleine wijzigingen, zoals het toewijzen van een CSS class. Om dit te doen open je het dropdownmenu in de toolbar van de block, en selecteer je Edit as HTML:

Deze optie zet de visuele preview om in een code editor voor dat ene block, zonder dat de visuele previews van de andere blocks veranderen.

Als tweede optie biedt de editor een custom HTML block waarmee je volledige stukken HTML kan toevoegen. Je voegt gewoon dit block toe, en schrijft of plakt je code daarin.

Als laatste optie kan je ook een volledige code editor openen voor het hele document, door het dropdownmenu rechtsboven te gebruiken, of op een sneltoets te drukken: Ctrl + Shift + Alt + M.

Bedenk je wel dat als je deze volledige code editor opent, je daar ook de block formatting van Gutenberg zelf ziet, dus het wordt wel snel ingewikkeld:

8. Leer de sneltoetsen

De blockeditor heeft een hoop sneltoetsen waarmee je veelgebruikte bewerkingen sneller kan uitvoeren. Het is de moeite waard om deze te leren, aangezien je hiermee veel productiever bent, en je een hoop repetitief werk en tijd kan besparen.

Hieronder alvast de belangrijkste sneltoetsen, en als je een Mac gebruikt, moet je “Ctrl” vervangen door “Command (⌘)”:

• Open de lijst met blocks — Shift + Alt + O
• Wijzigingen opslaan — Ctrl + S
• Laatste bewerking ongedaan maken — Ctrl + Z
• Laatste bewerking opnieuw uitvoeren — Ctrl + Shift + Z
• Geselecteerde block(s) kopiëren — Ctrl + Shift + D
• Geselecteerde block(s) verwijderen — Shift +Alt + Z
• Nieuwe block toevoegen voor de geselecteerde block(s) — Ctrl + Alt+ T
• Nieuwe block toevoegen na geselecteerde block(s) — Ctrl + Alt+ Y

Je kan ook een complete cheatsheet openen in de editor, met alle mogelijke sneltoetsen. Om dit te doen kan je alvast een eerste sneltoets gebruiken, namelijk Shift + Alt + H, of op de drie verticale puntjes klikken voor het menu (⋮), rechtsboven in de editor, en in het dropdownmenu kiezen voor Keyboard shortcuts.

9. Ruim de interface op door blocks te verbergen

De blockeditor voegt standaard allerlei blocks toe, maar meestal hoef je daar niks mee te doen. Om je te helpen om de interface op te ruimen, biedt de editor een feature met de naam Block Manager waarmee je blocks die je niet gebruikt kan verbergen of uitzetten:

10. Voeg anchors toe voor jump links

Onze laatste tip is de speciale HTML anchor link feature van de blockeditor, waarmee je jump links naar delen van je content kan maken, zoals je dat vaak ziet in een inhoudsopgave.

In de klassieke editor moest je nog zelf de code voor de HTML anchors schrijven. Maar met Gutenberg kan je gewoon de gewenste weergavetekst voor je jump link toevoegen in het veld HTML anchor binnen het Advanced deel van de instellingen van een block:

Gevorderde concepten van de blockeditor

We hebben inmiddels al een hoop besproken van hoe de editor werkt, en hoe je de editor effectiever kan gebruiken. Nu je deze basiskennis in huis hebt, kijken we nog naar twee gevorderde tactieken:

• Block patterns
• Reusable blocks

Block Patterns

Een block pattern, of patroon van blocks, is eigenlijk niets meer dan een template. Het is een verzameling van blocks die al in een layout staat. Dit kan iets heel kleins zijn, bijvoorbeeld een verzameling knoppen die je vaker gebruikt. Maar het kan ook een template zijn voor een heel deel, of zelfs een hele pagina.

WordPress heeft eigen ingebouwde block patterns, en plugin developers kunnen ook hun eigen templates toevoegen.

Je kan nieuwe block patterns toevoegen via het tabblad Patterns in de block inserter.

Nadat je de block pattern toegevoegd hebt, kan je alle blocks bewerken waar het patroon uit bestaat, net zoals wanneer je de blocks handmatig had toegevoegd.

Op dit moment kan je met de basis Gutenberg editor geen eigen block patterns maken (tenzij je kan programmeren). Maar je kan dit oplossen met de gratis Block Pattern Builder plugin van Justin Tadlock. Wanneer je deze plugin activeert, kan je eigen ontwerpen maken via Gutenberg, en zo’n ontwerp opslaan als template voor volgende pagina’s of onderdelen.

Om te beginnen ga je, na het activeren van de plugin, naar Block Patterns > Add New om een nieuwe pattern aan te maken in de editor. Let erop dat je dit ook publiceert:

Nadat je dat gedaan hebt kan je dit block pattern toevoegen zoals je dat ook bij de reeds bestaande patterns zou doen. Je kan je eigen creatie vinden in het deel Uncategorized.

Het WordPress kernteam is ook een officiële bibliotheek voor block patterns op WordPress.org gestart. Je kan ze toevoegen in de editor door te kopiëren en plakken. Klik gewoon op Copy in de bibliotheek met block patterns en plak dit vervolgens in de editor.

Reusable Blocks

Reusable blocks, oftewel herbruikbare blocks, zijn een verzameling van blocks die je als groep kan toevoegen. Het lijkt dus sterk op block patterns, maar er is één belangrijk verschil.

Een block pattern is een start-template waarbij je alle blocks nog gaat bewerken, maar een reusable block gebruik je wanneer je identieke blocks op meerdere plekken wil gebruiken.

Wanneer je een reusable block aanpast, zullen die veranderingen ook meteen doorgezet worden naar alle reeds bestaande blocks.

Daardoor is het bijvoorbeeld handig om een reusable block te gebruiken voor je Call to Action (CTA), die je overal in je content hetzelfde wil hebben. Als je op een gegeven moment de CTA wil veranderen, hoef je maar één keer de reusable block aan te passen, en je nieuwe boodschap staat meteen overal op je website.

Om een reusable block in de Gutenberg WordPress editor te maken, kan je één of meer blocks selecteren. Vervolgens klik je op de optie Add to Reusable blocks. De plugin met block patterns die we net noemden, maakt het ook mogelijk op deze manier block patterns te maken.

Je blocks zullen gegroepeerd worden, je kan een reusable block een naam geven in de instellingen van dat block in de zijbalk.

Vervolgens kan je deze reusable block overal toevoegen waar je wilt, door op de naam te zoeken. Vergeet niet dat je `/` kan gebruiken om de block sneller in te voegen, zoals hierboven uitgelegd.

Als de je reusable block nu aanpast, krijg je de optie om die veranderingen overal te publiceren wanneer je het artikel updatet. Wanneer je deze veranderingen inderdaad publiceert, zullen deze veranderingen automatisch doorgevoerd worden op elke reusable block die je gemaakt hebt.

De blockeditor uitbreiden met plugins

Tot nu toe hebben we ons gefocust op de kernfeatures van de blockeditor, enkele uitzonderingen daargelaten.

Maar één van de mooiste dingen van de nieuwe blockeditor is dat je plugins kan gebruiken om de functionaliteit uit te breiden, net als bij de rest van je WordPress website.

Je kan plugins voor allerlei dingen gebruiken:

• Nieuwe content blocks toevoegen: Plugins kunnen nieuwe blocks toevoegen die je in je content kan gebruiken. Dit is momenteel de meest gebruikte use case voor Gutenberg plugins.
• Nieuwe templates/block patterns toevoegen: Sommige plugins gebruiken het kernsysteem voor block patterns, en anderen hebben een eigen systeem voor templates gemaakt.
• Veranderen van de interface en features van de editor: Je kan plugins gebruiken om de editor zelf aan te passen. Zo kan je bijvoorbeeld betere ondersteuning voor Markdown toevoegen.

Naast plugins die speciaal voor Gutenberg gemaakt zijn, zijn er ook allerlei WordPress plugins die de blockeditor gebruiken.

Wanneer je bijvoorbeeld een plugin voor contactformulieren gebruikt, krijg je daarbij een speciale block die je kan gebruiken om de formulieren toe te voegen aan je site. Dezelfde aanpak wordt gebruikt bij veel andere plugins.

Nadat je de basis van de editor onder de knie hebt, is het de moeite waard om onderstaande plugins eens te ontdekken, om te zien of er nog mogelijke verbeteringen in zitten.

Enkele van de meest populaire plugins op het moment van schrijven:

• Ultimate Addons for Gutenberg
• Kadence Blocks
• GenerateBlocks
• Stackable
• Getwid

Je kan er meer vinden in de WordPress.org sectie met block-enabled plugins.

Gutenberg WordPress editor en Full Site Editing

Zoals we aan het begin van dit artikel al zeiden, is het doel van de Gutenberg editor om veel meer te zijn dan alleen een content editor.

Het idee is om op lange termijn WordPress naar Full Site Editing te krijgen. Dat betekent precies wat de term zegt, namelijk dat je alle onderdelen van je website kan aanpassen via de Gutenberg editor. Dat zijn dus bijvoorbeeld ook de header, footer en zijbalken van je website.

Anders dan de eenmalige implementatie van de blockeditor bij WordPress 5.0, zal het implementeren van Full Site Editing meer stapsgewijs gaan. Er zullen langzamerhand steeds meer features bij komen, waardoor we zo langzaam maar zeker bij het einddoel komen.

Zo is er bijvoorbeeld sinds WordPress 5.8 de mogelijkheid om de blockeditor te gebruiken om de widgets op je site te beheren. Je krijgt ook toegang tot een aantal nieuwe blocks die eigenlijk je thema aanpassen, zoals Site Logo, Navigation, Query Loop (waarmee je templates voor artikelen met lijsten kan maken) en meer.

Maar alhoewel Full Site Editing nog altijd werk in uitvoering is, zijn er ook ondernemende thema developers geweest die al block-based thema’s publiceren, waarmee we al een goede indruk krijgen van hoe Full Site Editing er ooit uit zal gaan zien.

Daarnaast kan je al een deel van de experimentele Full Site Editing features gebruiken in de plugin versie van Gutenberg.

We kijken nog naar twee dingen:

1. De bestaande Full Site Editing features die we sinds WordPress 5.8 hebben
2. Hoe de uiteindelijke Full Site Editing zou kunnen gaan werken, op basis van de experimentele features

Blocks gebruiken in plaats van widgets

Sinds WordPress 5.8 kan je nu blocks gebruiken voor je zijbalken en features, in plaats van widgets (dit is de standaard, kan je eventueel uitzetten).

Wanneer je naar Appearance > Widgets gaat, kan je de content van elk widgetgebied beheren via de blockeditor.

Elk gebied voor widgets krijgt een eigen editor, die je kan openen door op het accordion-icoon te klikken. Je kan blocks ook verplaatsen tussen gebieden, door op de gehaakte pijl bovenin te klikken:

Nieuwe theme blocks gebruiken

WordPress 5.8 introduceert ook nieuwe speciale theme blocks, waarmee je dynamische content in je website kan gebruiken. Deze blocks worden in de toekomst erg belangrijk wanneer je templates gaat maken voor je thema.

Stel dat je een lijst van de meest recente content op je pagina wil zetten. Je kan dan gewoon de Query Loop block toevoegen, en je kan dan dynamisch content toevoegen van een bepaald artikeltype (bijvoorbeeld blogartikelen), en daarbij filteren op categorieën, auteurs, keywords en meer:

Binnen de Query Loop block kan je de andere theme blocks nesten om de template voor de getoonde content te bepalen. Zo kan je bijvoorbeeld de datum van elk artikel weergeven door de Post Date block toe te voegen aan je template.

Met de Query Loop block van WordPress 5.8 kan je in feite je eigen lijstpagina met blogartikelen maken. Volledige Full Site Editing zal dat soort flexibiliteit uitbreiden naar je hele thema. Eens kijken hoe dat er ongeveer uit zal zien.

Ontwerpen van templates voor content

Template editing mode is een andere nieuwe feature in WordPress 5.8. Hierbij kan je Gutenberg gebruiken om de templates voor je artikelen en pagina’s te ontwerpen op basis van blocks.

Op dit moment is deze feature alleen maar beschikbaar als je theme developer dit specifiek heeft ingeschakeld, dus wellicht zie je dit nog niet, afhankelijk van je thema.

Als je wel een thema gebruikt dat deze nieuwe template editing mode in WordPress 5.8 ondersteunt, dan zie je een nieuw onderdeel Template in het tabblad Post/Page in de zijbalk, bij het bewerken van een pagina of artikel. Je kunt een nieuwe template maken of eentje kiezen uit je al bestaande templates.

Als je een nieuwe template maakt, kan je het een naam geven, zodat je de template makkelijker kan terugvinden. Vervolgens kan je de template ontwerpen via de speciale template editing mode, in combinatie met de theme blocks die we in het vorige onderdeel zagen.

Blockbase Full Site Editing voorbeeld

Blockbase is een thema van Automattic dat functioneert als een soort van “proof of concept” en testplek voor Full Site Editing. Dit is allemaal nog helemaal experimenteel, dus er kan nog een hoop veranderen voordat deze features in de WordPress-core komen. Desalniettemin kan je zo al wel een goede indruk krijgen.

Na het installeren van dit thema en de plugin versie van Gutenberg, krijg je een nieuwe Site Editor, waarmee je je eigen thema kan “bouwen”, met dezelfde editor als we zonet zagen.

Het grootste verschil is dus dat je niet meer één artikel of pagina aan het maken bent. In plaats daarvan gebruik je nu de Gutenberg WordPress blockeditor om de echte templates te maken die alle content op je hele site zal gebruiken, bijvoorbeeld de template voor je header.

Om je hierbij te helpen, krijg je allerlei nieuwe ontwerp blocks, inclusief een aantal theme blocks die we al zagen:

Om te wisselen tussen de verschillende templates, kan je op het WordPress logo linksboven klikken, om de andere templates te bewerken of nieuwe te maken:

Nogmaals, het idee is dat je uiteindelijk de Gutenberg editor zal kunnen gebruiken om alle layouts en templates van je thema te bewerken. Wanneer dat eenmaal gebeurt, zal het maken van een WordPress website er heel anders uitzien dan wat we zien als “normaal” in 2021.

Samenvatting

Sinds 2018 heeft de Gutenberg blockeditor een hoop ontwikkelingen doorgemaakt. Met de toekomstige verandering naar Full Site Editing, zal de blockeditor een steeds belangrijker onderdeel van WordPress worden.

In dit artikel hebben we alles over de blockeditor besproken, van de basis tot geavanceerde tips en features. Ook hebben we gekeken naar hoe de toekomst met Full Site Editing er uit zou kunnen gaan zien.

Als je dit allemaal nog niet wil proberen, kan je de Gutenberg editor ook uitzetten, en het bij de klassieke editor houden. Maar Gutenberg zal steeds groter en beter worden, dus je zal het niet kunnen blijven negeren.

Nog vragen of opmerkingen over de editor? We horen graag wat je denkt, zowel de goede als de slechte dingen!