Gutenberg is de standaard contenteditor in WordPress. Hij werd geïntroduceerd in WordPress 5.0, uitgebracht in december 2018, ter vervanging van de Classic Editor die meer dan een decennium de standaard was geweest. De naam is een verwijzing naar Johannes Gutenberg, de uitvinder van de drukpers. Het kernidee is eenvoudig: in plaats van één tekstvak waarin u alles inline opmaakt, is elk stuk content een eigen "blok" dat u onafhankelijk kunt verplaatsen, configureren en stylen.
De geschiedenis achter Gutenberg
Vóór Gutenberg gebruikte WordPress TinyMCE, een klassieke WYSIWYG-editor (What You See Is What You Get) voor rijke tekst. TinyMCE diende WordPress jarenlang goed, maar had beperkingen. Voor complexe lay-outs, zoals secties met meerdere kolommen of opgemaakte call-to-action-vakken, waren doorgaans shortcodes, aangepaste HTML of pagebuilder-plugins nodig. Het WordPress core-team startte het Gutenberg-project in 2017 met als doel het maken van rijke content toegankelijk te maken voor iedereen, niet alleen voor ontwikkelaars of gebruikers die bereid waren externe pagebuilders te installeren. Toen WordPress 5.0 in december 2018 verscheen, werd Gutenberg de standaardeditor voor alle nieuwe berichten en pagina's.
Hoe de blokeditor werkt
Alles in Gutenberg is een blok. Een paragraaf is een blok. Een afbeelding is een blok. Een koptekst, een lijst, een video-embed, een knop, een tabel; allemaal blokken. U bouwt een pagina door deze blokken verticaal te stapelen en elk blok te configureren via een eigen werkbalk en instellingenpaneel. Blokken kunnen worden herschikt door ze te slepen of door de pijltjes omhoog/omlaag te gebruiken. Elk blok slaat zijn inhoud en configuratie op als een combinatie van HTML en speciale HTML-opmerkingen die WordPress gebruikt om het blok in de editor te reconstrueren.
Blokcategorieën en -typen
WordPress wordt geleverd met tientallen ingebouwde blokken, ingedeeld in categorieën:
- Tekstblokken: Paragraaf, Koptekst, Lijst, Citaat, Code, Voorgeformatteerd, Pull quote, Vers, Tabel.
- Mediablokken: Afbeelding, Galerij, Audio, Video, Cover, Bestand, Media en Tekst.
- Designblokken: Kolommen, Groep, Rij, Stack, Scheidingslijn, Spacer, Knoppen, Details.
- Widgetblokken: Recente Berichten, Recente Reacties, Archieven, Categorieën, Pagina-overzicht, Zoeken, Tagwolk, Sociale pictogrammen, Kalender.
- Embedblokken: YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok en vele andere oEmbed-compatibele diensten.
Herbruikbare blokken en blokpatronen
Met herbruikbare blokken (sinds WordPress 6.3 "Synced Patterns" genoemd) kunt u een blok of een groep blokken opslaan en in meerdere berichten of pagina's invoegen. Wanneer u een synced pattern bijwerkt, wordt de wijziging overal doorgevoerd waar het wordt gebruikt. Dit is handig voor elementen zoals call-to-action-secties, disclaimers of auteursbiografievakken die op veel pagina's verschijnen. Blokpatronen zijn vooraf ontworpen rangschikkingen van blokken, bijvoorbeeld een hero-sectie met een achtergrondafbeelding, koptekst en knop. WordPress core bevat ingebouwde patronen, thema's kunnen hun eigen patronen registreren, en u kunt honderden meer doorbladeren in de WordPress Pattern Directory.
Full Site Editing en blokthema's
Gutenberg is veel verder uitgebreid dan alleen de inhoud van berichten. Met Full Site Editing (FSE), geleidelijk geïntroduceerd vanaf WordPress 5.9, kunt u de volledige lay-out van uw site bewerken met blokken: kopteksten, voetteksten, zijbalken, archieftemplates, single-post-templates, 404-pagina's en meer. Om FSE te gebruiken, hebt u een "blokthema" nodig (zoals de standaardthema's Twenty Twenty-Four of Twenty Twenty-Five). Blokthema's vervangen de traditionele PHP-templatehiërarchie door HTML-gebaseerde templates die blokken gebruiken. De Site Editor (Weergave > Editor) biedt een visuele interface om elk onderdeel van uw site aan te passen zonder code te schrijven. Traditionele "klassieke thema's" werken nog steeds, maar ondersteunen geen FSE.
De Classic Editor-plugin
Niet iedereen omarmde de overstap. De Classic Editor-plugin werd door het WordPress-team uitgebracht als officiële manier om de oude TinyMCE-editor te herstellen. Het is een van de meest geïnstalleerde WordPress-plugins, met miljoenen actieve installaties. WordPress heeft oorspronkelijk toegezegd de Classic Editor tot 2024 te ondersteunen, en de plugin blijft werken en updates ontvangen. Veel langlopende sites, vooral met sterk aangepaste TinyMCE-configuraties of complexe shortcode-gebaseerde lay-outs, gebruiken hem nog steeds. Voor nieuwe sites is de blokeditor echter duidelijk de richting die WordPress opgaat.
Gutenberg-plugin versus WordPress core
Er is een belangrijk onderscheid tussen de Gutenberg-plugin en de blokeditor die in WordPress core is ingebouwd. De Gutenberg-plugin is een aparte plugin die beschikbaar is op wordpress.org en dient als testterrein voor functies die gepland zijn voor toekomstige WordPress-releases. Hij brengt ongeveer elke twee weken nieuwe updates uit en bevat experimentele functies die nog niet stabiel genoeg zijn voor core. Zodra een functie in de plugin volwassen is, wordt hij samengevoegd in de volgende grote WordPress-release. Als u ontwikkelaar of early adopter bent en aankomende functies wilt testen, kunt u de Gutenberg-plugin installeren. Voor de meeste site-eigenaren is de versie die met WordPress core wordt meegeleverd de juiste keuze.
Prestatieoverwegingen
Gutenberg is aan de editor-zijde gebouwd met React, en voegt blokspecifieke CSS en JavaScript toe aan de frontend. Elk bloktype kan zijn eigen stylesheet inschakelen, dus een pagina met veel verschillende bloktypen kan meer CSS-bestanden laden dan een pagina gebouwd met de Classic Editor. WordPress heeft eraan gewerkt dit aan te pakken: sinds versie 5.8 worden blokstijlen per blok geladen in plaats van als één grote stylesheet. Toch kunnen sites met veel blokken of intensief gebruik van externe blokplugins eindigen met merkbare frontend-overhead. Site-eigenaren die op prestaties gericht zijn, combineren Gutenberg vaak met een caching-plugin en een CSS-optimalisatietool om laadtijden laag te houden.
Populaire bloklibrary-plugins
De ingebouwde blokken dekken de basis, maar veel site-eigenaren breiden de editor uit met externe bloklibraries voor geavanceerdere lay-outs en componenten:
- Spectra (van Brainstorm Force): Voegt blokken toe voor prijstabellen, post grids, formulieren, countdowns, sterbeoordelingen en meer. Populair bij gebruikers van het Astra-thema.
- Stackable: Biedt designgerichte blokken met geavanceerde stylingopties, globale instellingen en een eigen designbibliotheek.
- GenerateBlocks: Een lichte plugin van het GeneratePress-team. Biedt slechts vier zeer flexibele blokken (Container, Headline, Buttons, Grid) die via hun configuratie-opties tientallen gespecialiseerde blokken kunnen vervangen.
- Kadence Blocks: Bevat een geavanceerd row/layout-blok, iconenlijsten, infovakken, testimonials en een formulierblok. Bekend om goede prestaties en een royaal gratis aanbod.
- CoBlocks: Van GoDaddy, biedt blokken voor recepten, prijstabellen, sociaal delen, click-to-tweet en meer.
Custom blokken bouwen voor ontwikkelaars
Ontwikkelaars kunnen aangepaste blokken maken met behulp van de WordPress Block API. De officiële tool om een blokplugin te scaffolden is @wordpress/create-block, die de bestandsstructuur, build-configuratie en boilerplate-code genereert. Aangepaste blokken worden aan de editor-zijde gebouwd met JavaScript (meestal JSX met React) en kunnen worden gerenderd via JavaScript of server-side PHP op de frontend. Het bestand block.json definieert metadata zoals de bloknaam, categorie, attributen en ondersteunde functies. Ontwikkelaars die liever met PHP-gebaseerde workflows werken, kunnen via de Advanced Custom Fields (ACF)-plugin ACF Blocks gebruiken, waarmee u aangepaste blokken kunt maken via PHP-templates en ACF-velden zonder React-code te schrijven.
Wat InspectWP controleert
InspectWP detecteert of uw WordPress-site de Gutenberg-editor gebruikt door de paginabron te scannen op blokspecifieke HTML-opmerkingen (zoals <!-- wp:paragraph -->, <!-- wp:image --> en andere) en op Gutenberg-gerelateerde CSS- en JavaScript-bestanden. Hiermee krijgt u inzicht of een site de blokeditor heeft geadopteerd of nog steeds de Classic Editor gebruikt.