Als u erover denkt een website te bouwen met WordPress , hebt u waarschijnlijk al gehoord van Gutenberg . Gutenberg is de editor voor WordPress , die werd uitgebracht met versie 5.0. 

Vanaf de eerste release zijn er veel functies toegevoegd aan de WordPress Block Editor - waaronder Block Grouping en Block Patterns. Maar de reden waarom Gutenberg zo populair is, is vooral te danken aan het feit dat berichten en pagina's veel visueler bewerkt kunnen worden dan met de standaard WordPress editor.

Deze gids bevat:

• Wat Gutenberg is
• een volledige handleiding voor ontwikkelaars over Gutenberg
• een korte lijst van de verschillende features in Gutenberg

En ik kan je nu al een ding beloven: na deze handleiding weet je hoe je met behulp van Gutenberg professionele lay-outs voor je websites kunt maken.

Wat is er nieuw aan de Gutenberg Block Editor?

Voordat we in de WordPress Gutenberg tutorial duiken, kijken we eerst eens wat Gutenberg eigenlijk is. 

Gutenberg vervangt de TinyMCE-editor en stelt u in staat inhoudsblokken te gebruiken om tekst, afbeeldingen en andere media aan uw berichten en pagina's toe te voegen. De klassieke TinyMCE editor was tekstgebaseerd - en beperkte nieuwe gebruikers die geen codeervaardigheden hadden. 

Hoewel kennis van HTML niet absoluut noodzakelijk was om de klassieke editor te gebruiken, moest je vaak naar de HTML-weergave gaan om wijzigingen aan te kunnen brengen. Anders moest je een aparte plugin installeren om eenvoudige functies zoals tabellen of fotogalerijen aan je website toe te voegen.

Met Gutenberg kun je je website ontwerpen met afbeeldingen in plaats van tekst. Met WordPress Gutenberg Block Editor kun je eenvoudig contentblokken toevoegen aan je pagina's en berichten. Er zijn blokken voor afbeeldingen, voor alinea's - en voor bijna elk ander element dat je op je website wilt hebben.

Gutenberg is nu de Standard Block Editor van WordPress en wordt met vele blokken out-of-the-box geleverd. Je kunt ook WordPress Plugins toevoegen, waardoor je nog meer blokken ter beschikking krijgt om eenvoudig verschillende functies in je berichten en pagina's te integreren. 

WordPress Gutenberg Handleiding

Als je websites bouwt, kan het nooit kwaad om je workflow te vereenvoudigen. Gutenberg kan je veel tijd besparen. Het is dus hoog tijd dat we de WordPress blok editor eens nader bekijken. Laten we eerst samen de basisbeginselen van Gutenberg doornemen.  

Hoe gebruik je Gutenberg?

1. Maak zoals gebruikelijk een nieuw blogbericht op WordPress aan. 
2. Klik op het blauwe plusteken in de linkerbovenhoek. 
3. Selecteer het blok dat je in je bericht wilt invoegen. 
4. Pas de instellingen van het blok binnen het concept aan. 
5. Rangschik je blokken door middel van drag-and-drop.

Dat is alles! Om te begrijpen hoe de afzonderlijke blokken werken, hoe je ze kunt aanpassen en hoe je ze kunt groeperen, heb je wat meer uitleg nodig. Dat is precies wat we je geven in de rest van deze WordPress Gutenberg tutorial. 

Uitgebreide handleiding voor de Gutenberg Block Editor 

Nu we de basis uit de weg geruimd hebben, duiken we in de speciale functies van de WordPress Block Editor. Wanneer je voor het eerste de Editor Screen van een pagina of een bericht met Gutenberg laadt, ziet de editor er vrij leeg uit - meer nog dan de klassieke editor, omdat de traditionele menu-opties ontbreken. Dat is prima. De eerste stap bestaat uit het toevoegen van enkele blokken. 

1. Voeg blokken aan je bericht toe

Om een blok aan je post toe te voegen, druk je op het plusteken in de linkerbovenhoek van het concept. Een nieuw blok wordt met een kleine set aan menu-opties overlapt. 

We concentreren ons eerst op het hoofdmenu en bespreken later hoe je verdere aanpassingen via het secundaire menu kunt doen.

Je kunt door de bloktypen bladeren of de zoekbalk gebruiken om het gewenste bloktype te vinden. Voeg dan een blok toe door "/" en het bloktype in te voeren. Als je bijvoorbeeld een afbeelding wilt toevoegen, voer je "/image" in.

Er zijn veel blokken beschikbaar, waaronder

• Alinea's
• Foto's
• Kopteksten
• Luister
• Tabellen
• Afbrekingstekens
• Galerijen
• Buttons
• Video's
• Audiobestanden 

Als je plugins met gebruikersgedefineerde blokken hebt geïnstalleerd, zullen ze ook in deze lijst verschijnen. 

Je kunt ook een blok toevoegen door op het zwarte plusteken te klikken: Dit verschijnt als je in het klad klikt waar staat: "Schrijf iets of tik om een blok te selecteren". 

Of je kunt de instructies in de tekst volgen en "/" typen om te kiezen uit een keuzelijst met opties.  

2. Orden de blokken opnieuw

Je kunt de blokken verschuiven met de pijlen op het blok zelf oder door te drukken op de puntjes tussen de pijlen en de blokken via drag-and-drop op de gewenste plek te zetten.

Met de WordPress Block Editor is het veel eenvoudiger om je inhoud te reorganiseren dan met de klassieke editor. Je hoeft je geen zorgen te maken dat je de code breekt, want alle informatie over de inhoud van het blok (inclusief lettertype, kleur en grootte) beweegt met het blok mee. 

Het gemak waarmee je je blokken kunt indelen is een van de beste eigenschappen van de Gutenberg Block Editor. Je bespaart tijd bij het repareren van gebroken code en je hoeft niet te vertrouwen op copy-and-past om de klus te klaren.

3. Pas de Style Settings van je blok aan

De volgende stap in onze WordPress Gutenberg tutorial is het leren kennen van het Style Settings menu. In sommige gevallen verschijnen enkele opties in de buurt van het blok waneer je erop klikt. Als je bijvoorbeeld een paragraafblok bewerkt, verschijnen enkele bekende opties net boven het blok. 

Aan de rechterkant van het scherm verschijnt echter ook een secundair menu. Klik op het tabblad"Instellingen".  

De opties voor de Style Settings die je kunt aanpassen, zijn afhankelijk van het blok. Zo zien de instellingen van het paragraafblok er bijvoorbeeld anders uit dan de instellingen van het afbeeldingsblok.

Met het menu Style Settings kun je de blokken in je berichten eenvoudig aanpassen. Ook hier geldt dat je je, in tegenstelling tot de klassieke editor, geen zorgen hoeft te maken over het wijzigen van het onderschrift van een afbeelding en het verknoeien van de opmaak van de onderliggende tekst. 

Maak herbruikbare Gutenberg Editor Blocks aan

Nu komen we bij de gevorderde tips van de WordPress Gutenberg tutorial. Je spaart veel tijd en moeite door blokken op te slaan die je kunt hergebruiken bij toekomstige berichten, pagina's en andere WordPress websites.

Herbruikbare blokken zijn nuttig als je elementen hebt die regelmatig aan een bepaalde pagina of posttype moeten worden toegevoegd. 

Stel, je schrijft filmrecensies, en je hebt een spreadsheet die je rangorde voor elke film weergeeft. U wilt dat het er altijd hetzelfde uitziet, met een specifieke styling en hetzelfde aantal kolommen en rijen. Als u een herbruikbaar blok maakt, kunt u veel tijd besparen door het voor elk bericht opnieuw te maken. 

Het opslaan van styling en verschillende elementattributen kan ook een echte tijdsbesparing zijn voor buttons. 

Stel dat je dezelfde CTA (Call to Action) nodig hebt in elk artikel dat je schrijft. Om een herbruikbare button te maken, begin je met het typische proces van het toevoegen van een Button Block. Pas de styling en de tekst aan tot het eruit ziet zoals je dat wilt.  

Klik dan op de drie puntjes in het blokmenu en kies Toevoegen aan herbruikbare blokken. 

Hier kun je je nieuwe blok een naam geven. 

Als je dit blok wilt hergebruiken, ga dan naar het menu"Gewone blokken", schakel naar het tabblad"Herbruikbaar"en selecteer je opgeslagen blok. 

Je kunt ook herbruikbare blokken exporteren voor gebruik op andere websites. Klik gewoon op de drie puntjes naast het blok, selecteer Exporteren als JSON en download het bestand. 

Om vervolgens een geëxporteerd herbruikbaar blok aan een andere WordPress site toe te voegen, gaat u naar het tabblad Herbruikbaar in het menu Blokken en selecteert u Alle herbruikbare blokken beheren. 

Dit opent een meer traditioneel uitziend gedeelte in de WordPress Dashboard waar je alle herbruikbare blokken die je hebt gemaakt kunt beheren. 

Als u herbruikbare blokken van andere websites hebt opgeslagen, kunt u deze uploaden door te klikken op Importeren uit JSON. Als je dit gedaan hebt, zou je ze zoals gewoonlijk moeten kunnen openen via het tabblad Herbruikbare blokken in het menu Blokken. 

Groepeer je blokken

De volgende Pro Tip van onze WordPress Gutenberg tutorial gaat over het groeperen van blokken. Als je twee of meer blokken in een groep zet, kun je ze aanpassen en manipuleren alsof het een enkel blok is. 

Je kunt bijvoorbeeld een social media call-to-action blok groeperen met een blok dat social sharing iconen bevat. Je kunt ook een paragraafblok groeperen met een knopblok om een standaard CTA te maken die je aan het eind van je berichten kunt invoegen. 

Om een blokkengroep te maken met behulp van de Gutenberg blokkeneditor, selecteert u alle blokken die u wilt groeperen. Klik dan op het gelaagde icoon aan de linkerkant van het kleine menu overlay:

Er verschijnt een nieuw menu met het opschrift"Transformeer naar", klik op Groep. Dat is het. Nu kun je deze blokken verplaatsen en aanpassen alsof ze één zijn. 

Je kunt nog steeds wijzigingen aanbrengen in de instellingen voor elk afzonderlijk blok. Je kunt bijvoorbeeld tekst toevoegen aan een alineablok en het uiterlijk ervan wijzigen. 

Als je blokken wilt degroeperen, selecteer dan de groep en klik dan op de drie puntjes in het overlappende menu. Scroll naar beneden en klik op Ungroup.

Deze functie werkt ook met herbruikbare blokken. Na het groeperen van de blokken kun je deze opslaan als herbruikbare blokken door dezelfde procedure te volgen als hierboven beschreven. 

Gebruik van Block Patterns in WordPress Block Editor

Met WordPress Block Patterns kunt u voorgedefinieerde blokindelingen maken en delen. Met Block Patterns kunt u complexe lay-outs maken met een paar muisklikken.

Om Blokpatronen te openen klik je op hetzelfde plusteken waarmee je het menu Blok hebt geopend. Selecteer het tabblad Patronen. 

Op het eerste gezicht lijken blokpatronen op herbruikbare blokken. Blokpatronen komen echter het dichtst in de buurt van de mogelijkheid om hele pagina's te maken in Gutenberg de dichtstbijzijnde. 

Met Block Patterns kun je met één klik complete opmaaksecties aan je berichten of pagina's toevoegen. Deze zijn ideaal als je een lay-out voor het gebruik in meerdere berichten wilt maken en opslaan. 

De WordPress Block Editor wordt geleverd met diverse kant-en-klare patronen, waaronder

• meerdere tekstkolommen
• aangrenzende buttons
• gebruikersgedefinieerde headers
• citaten met foto's

Een ander voordeel van blokpatronen is dat je er gemakkelijker mee kunt schakelen tussen de Themes tussen hen te wisselen. Aangezien uw opmaak gebonden is in de blokken zelf, wordt ze niet beïnvloed door een andere Theme . 

Als u uw eigen blokpatronen handmatig wilt maken, vereist dit enige programmeervaardigheden. In de ontwikkelingshandleiding worden ze voorgedefinieerde blokindelingen genoemd. 

Het creëren van Block Patterns vanuit het niets vereist het gebruik van de Block Application Programming Interface (API). Maar de Plugin Block Pattern Builder kan helpen. 

Extra blokken aan Gutenberg toevoegen

Voordat we verder gaan met deze WordPress Gutenberg tutorial, moet je weten dat er verschillende plugins zijn waarmee je nog meer soorten blokken aan de editor kunt toevoegen, waaronder ook

• Inhoudsopgave
• Prijslijsten
• Google Maps
• Contactformulieren

Er is een officiële blokkengids WordPress waar u extra blokken voor Gutenberg kunt vinden en toevoegen. 

Het oorspronkelijke plan was om een subdirectory te maken voor enkelvoudige blokken Plugins. In plaats daarvan is de huidige directory een subsectie van de standaarddirectory Plugin van WordPress met een doorzoekbare lijst van op blokken gebaseerde Plugins. 

Full Website Editing in Gutenberg

Op dit moment is het met Gutenberg nog niet mogelijk om websites volledig te bewerken. Het WordPress -ontwikkelingsteam boekt echter grote vooruitgang in die richting, onder meer door de toevoeging van blokpatronen. 

Er is momenteel een experimentele versie van Twenty Twenty Themes, die volledige website-editing gebruikt en het idee van een blok-gebaseerde Themes omarmt. 

Met de WordPress Block Editor kun je nu volledig aangepaste blokgebaseerde lay-outs maken - maar alleen voor berichten en pagina's. Zodra de volledige website bewerking op Gutenberg is gekomen, zullen de widgets overbodig worden. Dit geeft de gebruikers de volledige controle over elk lay-outelement, inclusief kop-, pagina- en voetteksten. 

Hoewel de Gutenberg Block Editor nog geen volwaardige WordPress paginabouwer is, is het goed op weg om er een te worden. In de tussentijd bieden Blokpatronen, zoals hierboven uitgelegd in de WordPress Gutenberg Blok Handleiding, een functieset die heel dicht bij die van een volledige website editor komt. 

Nadelen van de Gutenberg editor 

Hoewel Gutenberg een nuttig instrument is dat de manier veranderd heeft waarop veel gebruikers omgaan met WordPress en hun inhoud creëren, heeft de editor natuurlijk ook nadelen. 

Toen bijvoorbeeld Gutenberg voor het eerst werd geïntroduceerd, was het vrij foutgevoelig. Het meeste daarvan is inmiddels grotendeels opgelost. 

Een ding dat geen bug is, is dat Gutenberg nog steeds niet compatibel is met veel themes. Dus als je een bepaald theme wilt gebruiken en je vind het design mooi, is het waarschijnlijk dat je het niet kunt aanpassen of  Gutenberg erin kunt gebruiken. Als je het probeert, is het resultaat vaak gewoon een puinhoop. 

Enfin, Gutenberg is compatibel met sommige themes, maar niet genoeg om met een wijdverspreide compatibiliteit te pronken. 

Een ander probleem dat Gutenberg met zich meebrengt is het feit dat het niet dezelfde flexibiliteit biedt als de klassieke editor. Zeker, Gutenberg elimineert enkele van de idiosyncratische opmaakproblemen die zich voordoen met de klassieke editor - maar helaas ben je beperkt in het soort pagina's dat je kunt maken. 

Aangezien bredere opties voor de theme-aanpassing nog niet beschikbaar zijn bij Gutenberg, moet je je erbij neerleggen dat je vastzit aan de themes die met Gutenberg compatibel zijn en welke blokken en Block plugins beschikbaar zijn. 

De middelen die beschikbaar zijn voor het gebruik van Gutenberg groeien gestaag - maar Gutenberg is geen themebouwer. Nog niet. 

Uiteindelijk is Gutenberg de ideale keuze voor degenen die al aan Page Builder of puur visuele editors gewend zijn en deze ervaring willen behouden, of die zich alleen op de inhoud willen richten en het ontwerp met behulp van drag-and-drop willen doen. 

Slotgedachten: WordPress Gutenberg Gids 

De Gutenberg Editor behoort nu tot de WordPress Core. Het ontwikkelingsteam achter WordPress heeft er grote plannen mee. Uiteindelijk zul je in staat zijn om navigatiemenu's te maken met Gutenberg, complete website lay-outs te maken en Gutenberg zal met nog meer themes compatibel zijn. 

Tot die tijd kun je het beste gebruik maken van de mogelijkheden die de WordPress Block Editor momenteel biedt en visueel aantrekkelijke berichten en pagina's maken - zonder ook maar één regel code te kennen. Een vrij goede deal, als je het ons vraagt. 

Dus ga je gang: gebruik de tips in onze WordPress Gutenberg tutorial en begin met het aanpassen van de inhoud van je website. En zorg ervoor dat je website op optimale snelheid draait met een WordPress website hosting plan van Raidboxes met optimale snelheid.