Gutenberg opent boeiende nieuwe mogelijkheden voor jou als ontwikkelaar. In deze tutorial leg ik alles uit wat je moet weten over de blokeditor. Leer hoe je je eigen WordPress blokken maakt en hoe je bestaande blokken aanpast.

Gutenberg is de editor die werd uitgebracht met WordPress 5.0. Met Gutenberg werd het concept van WordPress blokken geïntroduceerd. Hiermee kunnen websitebeheerders ontwerpelementen plaatsen via drag & drop - zonder daarvoor een externe Page Builder te gebruiken of programmeervaardigheden te bezitten. 

Gutenberg wordt in de toekomst als basis voor Full Site Editing gebruikt. In het verleden was het altijd nodig om te coderen, zelfs als je een Page Builder gebruikte: sommige wijzigingen en aanpassingen konden alleen met code gedaan worden.

Met elke nieuwe grote update van WordPress wordt het duidelijk dat PHP-kennis en traditionele WordPress website-ontwikkeling niet langer volstaan. Als WordPress ontwikkelaar moet je Gutenberg beheersen.

Deze tutorial belicht: 

• Wat Gutenberg is
• Hoe je met WordPress blokken werkt
• Hoe je deze nieuwe functies en technologieën gebruikt om indrukwekkende WordPress websites te bouwen.

Laten we eens dieper in de WordPress Gutenberg tutorial voor ontwikkelaars duiken!

Wat is Gutenberg?

Gutenberg werd voor het eerst uitgerold in WordPress 5.0 om het gemakkelijker te maken om berichten en pagina's op een puur visuele manier te creëren. Maar dit was slechts fase 1 van het project.

Gutenberg vertrouwt op moderne technologieën zoals JavaScript, React en REST API om een dynamische editor-ervaring te creëren die frontend editing nabootst. In deze eerste fase werd de Block Editor uitgebracht. 

Met verdere updates en fase 2 zou Gutenberg een volwaardige website editor moeten worden. In de toekomst is het mogelijk om hele WordPress websites met blokken te maken.

Dit betekent dat iedereen die WordPress websites ontwikkelt, zijn eigen Developer Workflow moet herdefiniëren. PHP-kennis is niet langer voldoende om een WordPress website vanaf nul op te bouwen. Je moet JavaScript, React en REST API kennen als je individuele blokken en ontwerpelementen wilt maken voor websites die op Gutenberg gebaseerd zijn. 

Introductie van WordPress blokken

Het is spannend om aan deze nieuwe reis te beginnen met de Gutenberg Block Editor. Met deze tutorial leer je alles wat je moet weten voordat je met Gutenberg Development begint en je eigen WordPress blokken maakt.

Wat je moet weten voordat je voor Gutenberg gaat ontwikkelen 

De belangrijkste taal die je moet kennen om deze WordPress Gutenberg tutorial voor ontwikkelaars te volgen is Javascript. Preciezer gezegd moet je de versie ES5 kennen, die door de meeste moderne browsers ondersteund wordt. 

Nieuwere features zijn opgenomen in de versie van 2015, ES6, en de nieuwste versie, ESNext. 

Inzicht in ES6 en ESNext kan waardevol zijn. Als je ze echter wilt gebruiken bij de ontwikkeling van WordPress blokken moet je weten hoe je tools moet configureren die de nieuwere code omzetten naar ES5. 

Je moet ook JSX begrijpen, dat is een syntax-uitbreiding van Javascript en vereist ook een transformatie. Aangezien ES6, ESNext en JSX zoveel gemakkelijker te schrijven zijn dan ES5 is het de moeite waard om transformatietools op te zetten. 

Webpack, in combinatie met Babel, is een populaire transformatietool. Deze combinatie van hulpmiddelen minificeert jouw Javascript. 

Uiteindelijk kan de kennis over React JS je enorm helpen wanneer je je eigen WordPress blokken maakt of verschillende WordPress tutorials voor ontwikkelaars volgt die zich richten op het aanpassen van blokken. 

Inhoud wordt anders opgeslagen in Gutenberg 

In tegenstelling tot de klassieke content editor wordt content anders opgeslagen in Gutenberg. Inhoud wordt niet langer opgeslagen als HTML, maar als HTML-commentaar in een bepaalde structuur met JSON-formaat. Dit maakt het gemakkelijker om inhoud over te zetten naar een andere WordPress installatie of naar een content management systeem (CMS). 

Het opslaan van inhoud in traditionele HTML is prima als het om eenvoudige en op tekst gebaseerde inhoud gaat. Maar als je te maken hebt met dynamisch gegenereerde inhoud wordt je code helaas slordig. 

Je hoeft niet per se de technische details te kennen van hoe WordPress blokken werken. Wat belangrijk is, is dat wanneer je inhoud creëert in Gutenberg, de gegenereerde HTML vrij is van geparseerde onnauwkeurige code. Dit komt omdat alle details worden opgeslagen in HTML-commentaren. 

Wat je met de WordPress Gutenberg blokken kunt doen 

Je kunt verschillende dingen in Gutenberg doen. Als je een WordPress tutorial voor ontwikkelaars volgt, moet je je bewust zijn van je opties. 

Laten we wat mogelijkheden verkennen: 

• Ontwikkel je eigen WordPress blokken: Dit is de meest complexe taak die je kunt uitvoeren. Aangepaste WordPress blokken zijn echter vaak de moeite waard om echt maatwerk te bereiken. 
• Bereid je theme voor op Gutenberg: Daar hoort bij dat je de theme-instructie van WordPress.org volgst om je theme compatibel te maken met Gutenberg. Dit omvat het aanpassen van de blokstyling om de gewenste look van je theme te krijgen en de blokfunctionaliteit te behouden. 
• Aanpassen of uitbreiden van bestaande WordPress inhoudsblokken: Zoals hierboven beschreven, kun je bestaande WordPress blokken in Gutenberg aanpassen. Dit omvat ofwel het toevoegen van aangepaste blokstijlen, het toevoegen van filters via Javascript of het aanpassen van blokcategorieën en bloktypes die voor specifieke aanpasbare post types verschijnen. 

Een ontwikkelomgeving voor de Gutenberg Block Editor opzetten

Voordat je iets kunt bouwen met Gutenberg of WordPress tutorials voor ontwikkelaars kunt volgen, moet je een ontwikkelomgeving opzetten. Je eerste stap is om Node.js te krijgen. WordPress raadt aan om de Node Version Manager (nvm) te gebruiken om Node te installeren en te beheren. 

In de gekloonde repository kun je Gutenberg bouwen door het volgende uit te voeren: 

npm ci
npm run build

Deze codering zorgt ervoor dat Gutenberg als een plugin gebruikt kan worden. Voeg daarna de Gutenberg map die je gemaakt hebt toe aan de ordner wp-content/plugins in je lokale WordPress omgeving. A White Pixel raadt eveneens aan om Webpack en Babel te installeren. 

Doorloop alle installatiestappen om een ontwikkelomgeving te configureren. Je hebt een lokale testsite nodig waarop WordPress staat met de Gutenberg plugin die jij hebt aangemaakt en waarmee je toegang tot Terminal hebt om een reeks commandoregel opdrachtpromts uit te voeren. WordPress.org biedt talrijke bronnen voor ontwikkelingsscripts. 

Nu je je lokale omgeving hebt ingesteld en geconfigureerd, kunnen we verder gaan met het hoofdonderdeel van deze WordPress tutorial voor ontwikkelaars: WordPress blokken.

WordPress blokken begrijpen

WordPress blokken zijn containers waarin inhoud binnen de WordPress Block Editor wordt geplaatst. WordPress blokken kunnen worden verplaatst via een drag & drop interface.

Begrijpen wat WordPress blokken zijn is belangrijk voordat je je eigen blokken maakt. De WordPress blokken zijn ook zeer uitgebreid en omvatten verschillende belangrijke functies, waaronder: 

• Inhoud: Deze vaak gebruikte blokken omvatten paragrafen, koppen, afbeeldingen, lijsten, citaten en multimedia.
• Opmaak: Verbeter de opmaak van je inhoud met blokken die code, aangepaste HTML en tabellen toevoegen.
• Lay-outs: Pas het uiterlijk van je pagina's en berichten aan met blokken voor het toevoegen van pagina-einden, afstandhouders, kolommen, knoppenblokken en scheidingslijnen.
• Widgets: Met deze blokken kun je gemakkelijk overal widgets invoegen met opties zoals shortcode, categorieën, sociale symbolen, RSS en recente commentaren. 

Hoe maak je je eigen WordPress blokken?

Met deze WordPress Gutenberg tutorial voor ontwikkelaars leer je wat je nodig hebt om aangepaste WordPress contentblokken te maken. Dan kun je ze gebruiken op je website of de website van je klanten. 

Hoe registreer ik nieuwe WordPress blokken?

Elk nieuw blok begint met de registratie. Gebruik de functie registerBlockType om een nieuwe bloktype-definitie te registreren.  

De bloknaam is een string die als namespace/block-name geschreven moet worden. Vervang namespace door de naam van het blok dat je wilt maken. 

Van daaruit moet je de eigenschappen van je nieuwe blok definiëren, zoals de titel, beschrijving, categorie, icoon, trefwoorden of stijlen. 

Werkbalken toevoegen voor aanpasbare acties

Als je aangepaste acties aan je blok wilt toevoegen via een interactieve werkbalk kun je de Gutenberg toolbars aanpassen (of helemaal opnieuw maken). Leg aangepaste pictogrammen, opmaak, positionering en toegewezen acties vast, afhankelijk van de behoeften van je plugins of theme. 

Volgens het Block Editor Handbook kan het toevoegen van een aangepaste werkbalk er ongeveer zo uitzien: 

Zo vertaal je WordPress blokken 

Als je internationalisering doorvoert, kun je ervoor zorgen dat de WordPress blokken die je maakt een breder publiek bereiken. 

Sinds WordPress 5.0 kun je het wp-i18n JavaScript pakket gebruiken om vertaalbare strings toe te voegen. Je kunt ook vertaalbestanden maken en deze laten laden wanneer een gebruiker inhoud in die taal opvraagt. 

Inspectorinstellingen toevoegen

Alle blokken hebben een set van inspectorinstellingen die aan de rechterkant van het scherm verschijnen wanneer ze in jouw inhoud worden ingevoegd. En afhankelijk van het WordPress blok zullen de aspecten die gebruikers kunnen aanpassen variëren. Voor elk individueel blok dat je aanmaakt, moeten de instellingen van de inspector worden gedefinieerd. 

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

JavaScript's inspanningen voor WordPress zien er ongeveer zo uit: 

Met deze specificaties kun je dan JSX gebruiken om elke functie te stylen en de volgorde aan te passen. 

Hoe je dynamische inhoud kunt uitvoeren met PHP

Dynamische inhoud is essentieel voor WordPress. Er zijn vele redenen waarom je een dynamisch blok nodig zou kunnen hebben. 

Als je bijvoorbeeld een aangepast Latest Posts Block wilt maken dat de laatste blogberichten in realtime weergeeft, heb je een dynamisch blok nodig. 

Het blok vertrouwt op PHP omdat het telkens nieuwe informatie moet renderen wanneer het wordt weergegeven. De sleutel voor de meeste blokken om het dynamisch te maken is de geheugenfunctie te veranderen in null. Voeg dan code toe om het nieuwe blok aan te wijzen om de juiste inhoud te verkrijgen. 

Je kunt ook een attribuut instellen om het blok te vertellen een bepaald aantal berichten weer te geven.

Individuele instellingen toevoegen aan bestaande Gutenberg blokken

Je kunt ook individueel aanpasbare instellingen toevoegen en wijzigingen aanbrengen in bestaande Gutenberg WordPress blokken. Je kunt bijvoorbeeld aanpasbare control-elementen toevoegen aan het geavanceerde blokpaneel binnen de inspectorinstellingen van een blok. Jeffrey Carandang heeft hier een geweldige tutorial over geschreven op zijn blog.

Custom Block Patterns maken

Laten we een ander aspect van Gutenberg verkennen in deze WordPress tutorial voor ontwikkelaars. Met WordPress Block Patterns kun je voorgedefinieerde blokindelingen maken en delen. Dit is een groepering van WordPress blokken waarmee je complexe lay-outs kunt maken met een paar klikken.

Je kunt de Block Patterns openen vanuit het post/pagina bewerkingsscherm door op het + teken te drukken. Je ziet dan alle beschikbare blokpatronen voor je website. 

Zo maak je je eigen Block Patterns 

Om te beginnen, maak een pagina- of artikelontwerp. Voeg blokken toe in elke gewenste configuratie. Als je bijvoorbeeld een online magazine runt, wil je misschien een pagina-indeling maken voor nieuwe artikelen met prominente titels, kolommen, afbeeldingen en citaten. 

Vervolgens moet je de blokken zo ontwerpen dat ze eruit zien zoals jij dat wilt. 

De volgende stap is het kopiëren van alles wat je tot nu toe hebt gedaan. Klik op al je blokken terwijl je de ALT toets ingedrukt houdt om ze te selecteren. Klik dan op het icoontje met de drie opgestapelde puntjes (meer opties) in de werkbalk. Klik op Kopiëren. 

Vervolgens moet je de HTML uitvoer die je net hebt gekopieerd decoderen. Om dit te doen, kun je de JSON Escape/Unescape tool gebruiken. Kopieer de Result String Code die verschijnt nadat je op Escape hebt geklikt. 

Nu moet je je nieuwe blokpatroon registreren. 

Blokpatronen registreren en de-registreren

Je kunt een Custom Block Pattern registreren door de blokpatronen-API te gebruiken en de code die je hierboven hebt gekopieerd in het bestand functions.php van je WordPress theme te plakken of door het aan een gebruikersgedefinieerde plugin toe te voegen.

Je kunt ook de Block Pattern Builder Plugin gebruiken om de coderingseisen voor het maken van blokpatronen te elimineren.  

Hoe je de Gutenberg Editor als theme ontwikkelaar gebruikt

Gutenberg maakt het gemakkelijk om aangepaste WordPress blokken te ontwikkelen die het publiceren van inhoud een rijke ervaring maken. Je kunt Gutenberg ook gebruiken om af te zien van een aparte Page Builder plugin zoals Elementor of Divi.

Gutenberg kan worden gebruikt om responsieve lay-outs voor startpagina's te maken door blokken over de volle breedte en breedte in te schakelen. Of je kunt een op blokken gebaseerd theme vanaf nul creëren. 

Laten we een paar van jouw opties uitgebreider bespreken. 

Het gebruik van Cover Blocks om paginagedeeltes toe te voegen

Coverblokken zijn een nieuwere toevoeging aan Gutenberg en zijn een geweldige manier om verschillende secties aan een pagina toe te voegen. Bekijk deze video voor meer informatie.

Omslagblokken die je kunt toevoegen zijn:

• Beeldblokken
• Videoachtergronden
• Koptekstblokken
• Alineablokken
• Buttonblokken 

Cover blocks maken je website veelzijdiger. Op deze manier kun je een individuele homepage maken. Je zou zelfs een eenvoudig WordPress theme kunnen maken met een combinatie van Cover Blocks en Block Patterns. 

Nog uitgebreidere mogelijkheden voor het volledig bewerken van websites liggen ook in het verschiet. Het Make WordPress Design team stelt dat template manipulatie, geavanceerde blokpatronen en globale stijlen de belangrijkste aandachtspunten zullen zijn. 

Gebruik van de Advanced Custom Fields Plugin 

Een beperking van blokken is dat je geen Full Width Layout kunt bereiken: het zit altijd in boxen. 

Maar met een paar slimme manipulaties kun je de Advanced Custom Fields plugin gebruiken om aangepaste meta-instellingen toe te voegen en lay-outs over de volle breedte te forceren. Dit is essentieel als je Gutenberg wilt gebruiken om je eigen themes te maken. 

Aangepaste blokstijlen gebruiken 

Een andere manier om Gutenberg te gebruiken als theme ontwikkelaar is het gebruik van Custom Block Styles. Als je eenmaal Block Patterns hebt gemaakt of Cover Blocks hebt gebruikt om paginagedeelten te maken, kun je vervolgens blokstijlen aan elk betrokken blok toevoegen of verwijderen. 

Je moet de naam van het blok weten zodat je er stijlen aan kunt toevoegen of verwijderen. Deze extra stap maakt het mogelijk dat de aangepaste CSS klasse niet elke keer ingevoegd hoeft te worden als het blok gebruikt wordt. 

WordPress blokken voor Landing Pages en Front Pages

We hebben al gezegd hoe effectief coverblokken kunnen zijn voor het maken van startpagina's voor je website of theme. Ze werken ook geweldig voor landingspagina's. 

Een paar andere blokken die het vermelden waard zijn en kunnen helpen bij deze taak zijn: 

• Galerijen
• Kolomblokken
• Beeldblokken
• Tabelblokken
• Tekstblokken

De meeste blokken kunnen in combinatie met de omslagblokken worden gebruikt om een professioneel ogende homepage te maken. 

Als je meer mogelijkheden nodig hebt, kun je een Gutenberg blok plugin toevoegen dat een enkel blok aan Gutenberg toevoegt, of een Gutenberg blok bibliotheek plugin dat meerdere toevoegt. 

Ultimate Addons voor Gutenberg en Atomic Blocks zijn uitstekende bibliotheekopties die het bouwen van sites vergemakkelijken met blokken voor testimonials, call-to-action, paginalay-outopties, contactformulieren, prijstabellen en shortcodes. 

Plugins zijn ideaal voor degenen die Gutenberg willen leren kennen en websites willen ontwikkelen - zonder veel code te gebruiken. 

Laatste gedachten over WordPress blokken

De WordPress Gutenberg Block Editor maakt nu deel uit van de WordPress Core en het ontwikkelingsteam achter WordPress heeft er grote plannen mee. Uiteindelijk zul je Gutenberg kunnen gebruiken om navigatiemenu's te maken. En in de toekomst zal de editor compatibel zijn met nog meer themes.

Met de hulp van deze WordPress tutorial voor ontwikkelaars kun je nu WordPress blokken gebruiken om websites te maken en de inhoud aan te passen aan je behoeften. 

Je kunt nu WordPress blokken maken vanaf het begin en uiteindelijk hele WordPress websites bouwen met behulp van de ingebouwde blok editor.
In de tussentijd moet je ervoor zorgen dat de websites die je ontwikkelt bij Raidboxes worden gehost. Raidboxes biedt uitgebreide WordPress hostingpakketten die geschikt zijn voor zowel individuele website-eigenaren als bureaus.