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:

De Gutenberg WordPress editor.

De Gutenberg WordPress editor.

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 in december 2018 gelanceerd, en er is sindsdien een hoop veranderd! 🚀 Lees deze vernieuwde gids voor alle details ⬇️Click to Tweet

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:

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:

Nadelen:

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:

Nadelen:

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:

De Gutenberg WordPress blockeditor interface.

De Gutenberg WordPress blockeditor interface.

Er zitten drie belangrijke onderdelen in de editor:

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.

Tonen/verbergen van de zijbalk door op het tandwiel te klikken.

Tonen/verbergen van de zijbalk door op het tandwiel te klikken.

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

Een voorbeeld van het Twenty Twenty-One thema dat een eigen stijl geeft aan de blockeditor.

Een voorbeeld van het Twenty Twenty-One thema dat een eigen stijl geeft aan de blockeditor.

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.

De "plus" icoontjes laten je een nieuw block toevoegen.

De “plus” icoontjes laten je een nieuw block toevoegen.

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.

Klik op de gewenste block.

Klik op de gewenste 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:

De zwevende toolbar biedt eenvoudige opties voor opmaak.

De zwevende toolbar biedt eenvoudige opties voor opmaak.

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.

Toevoegen van een link in de Gutenberg WordPress blockeditor.

Toevoegen van een link in de Gutenberg WordPress blockeditor.

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.

Je kan de instellingen van een block openen via de zijbalk

Je kan de instellingen van een block openen via de zijbalk.

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:

De block instellingen van een normale alinea met tekst

De block instellingen van een normale alinea met tekst.

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.

Je kan de positie van de blocks veranderen met de pijlen, of ze verslepen.

Je kan de positie van de blocks veranderen met de pijlen, of ze verslepen.

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.
Embedden van een YouTube video in Gutenberg

Embedden van een YouTube video in Gutenberg.

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:

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:

Kiezen van de structuur en verhouding van de kolommen

Kiezen van de structuur en verhouding van de kolommen.

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:

Toevoegen van content aan de kolommen

Toevoegen van content aan de kolommen.

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:

Snel toevoegen van blocks via de voorwaartse slash

Snel toevoegen van blocks via de voorwaartse slash.

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:

Afbeeldingen toevoegen door ze naar je site te slepen

Afbeeldingen toevoegen door ze naar je site te slepen.

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:

De blockeditor ondersteunt de basis van Markdown syntax voor headings.

De blockeditor ondersteunt de basis van Markdown syntax voor headings.

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:

Je kan de formatting toolbar bovenaan vastmaken

Je kan de formatting toolbar bovenaan vastmaken.

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.
Een block inclusief instellingen kopiëren

Een block inclusief instellingen kopiëren.

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:

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

Openen van de List View maakt het makkelijk om te navigeren in geneste blocks

Openen van de List View maakt het makkelijk om te navigeren in geneste blocks.

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:

De HTML van een block bewerken

De HTML van een block bewerken.

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.

De HTML editor voor één block

De HTML editor voor één block.

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:

De volledige code editor, inclusief de markup voor blocks

De volledige code editor, inclusief de markup voor blocks.

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 (⌘)”:

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:

Je kan blocks uitvinken zodat ze verborgen worden in de block inserter.

Je kan blocks uitvinken zodat ze verborgen worden in de block inserter.

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:

Heb je een hostingoplossing nodig die je een voordeel geeft ten opzichte van de concurrentie? Kinsta helpt je door ongelofelijke snelheden, topbeveiliging en automatische op- en afschaling. Bekijk hier onze pakketten.

Instellen van een tekst voor een anchor

Instellen van een tekst voor een anchor.

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

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.

Een block pattern toevoegen

Een block pattern toevoegen.

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:

Maken van je eigen block pattern

Maken van je eigen block pattern.

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.

Toevoegen van je eigen block pattern

Toevoegen van je eigen block pattern.

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.

Een reusable block maken

Een reusable block 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.

Een reusable block toevoegen

Een reusable block toevoegen.

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.

Updaten van een reusable block

Updaten van een reusable block.

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:

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:

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:

Blocks gebruiken om widgetgebieden te bewerken

Blocks gebruiken om widgetgebieden te bewerken

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:

De Query Loop block gebruiken voor het tonen van dynamische content.

De Query Loop block gebruiken voor het tonen van dynamische content.

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.

Een nieuwe template maken in de Template mode.

Een nieuwe template maken in de Template mode.

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.

De nieuwe template editor in WordPress 5.8.

De nieuwe template editor in WordPress 5.8.

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-kern 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.

Een vroeg voorbeeld van Full Site Editing.

Een vroeg voorbeeld van Full Site Editing.

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

De nieuwe design blocks bij Full Site Editing.

De nieuwe design blocks bij Full Site Editing.

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:

Bewerken van templates voor thema's.

Bewerken van templates voor thema’s.

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.

In de ruim 2 jaar sinds de lancering van Gutenberg is er een hoop veranderd, en er verandert nog veel meer! 😲 Lees in deze uitleg wat er komende maanden en jaren nog gaat veranderen 👀Click to Tweet

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!


Bespaar tijd en kosten en maximaliseer siteprestaties met:

  • Directe hulp van WordPress-hostingexperts, 24/7.
  • Cloudflare Enterprise integration.
  • Globaal bereik met 28 datacenters verspreid over de wereld.
  • Optimalisatie met onze ingebouwde Application Performance Monitoring.

Dat alles en nog veel meer, in één pakket zonder langlopende contracten, met migraties en een 30 dagen geld-terug-garantie. Bekijk onze pakketten of neem contact op met sales om het pakket te vinden dat bij je past.