[Wat zijn] WordPress Gutenberg Blocks & Hoe ze goed te gebruiken

De WordPress Gutenberg-editor arriveerde in december 5.0 met WordPress 2018. Deze nieuwe functie, beter bekend als de 'blokeditor', schakelt tussen het maken van pagina's en berichten van het eenvoudige ontwerp van eerdere versies naar een meer paginabuilder-achtige ervaring.

Gutenberg blocks bieden nu een modulaire benadering voor het maken van inhoud. In plaats van code te gebruiken om een ​​ander element aan een pagina toe te voegen, kun je in plaats daarvan een blok uitschakelen. U kunt bijvoorbeeld een tekstblok voor een videoblok of tabel uitschakelen, net zoals u zou doen wanneer u een pagina inbouwt Beaver Builder of Elementor. Het is een evolutie die lang op zich heeft laten wachten, maar nu het zover is, zul je je snel afvragen hoe je ooit pagina's zonder hebt gemaakt!

Gutenberg blocks

Als je update naar WordPress 5.0 en hoger, en dat zou je nu moeten doen, heb je gemerkt dat de gebruikersinterface een beetje is veranderd. Je ziet nog steeds het traditionele zijmenu aan de linkerkant en het inhoudsmenu aan de rechterkant, maar in het midden is het allemaal veranderd.

Vóór de update zag je een leeg titel- en inhoudsvak waarin je je pagina of bericht hebt gebouwd. Nu ziet u een leeg gedeelte in het midden met een titelblok en een tekstblok dat al is ingevuld. Het rechtermenu verandert dynamisch, afhankelijk van wat u doet. In eerste instantie toont het de traditionele categorie-, tag- en feature-afbeeldingsopties zoals voorheen, maar introduceert nu een Block-tabblad.

Op het tabblad Blok kunt u het individuele blok bewerken, zoals die paginabuilders die veel vrijheid bieden op het gebied van ontwerp. Wat u op het tabblad Blok ziet, hangt af van het betreffende blok, maar iedereen heeft de mogelijkheid om aangepaste CSS toe te voegen.

Gutenberg blocks een echt modulaire benadering van paginaontwerp introduceren. Je hebt de mogelijkheid om dingen op dezelfde manier te blijven doen of dieper te duiken. Je kunt elk blok aanpassen om er subtiel of duidelijk anders uit te zien of ze allemaal als een naad te laten werkenless geheel. Het is een zeer krachtig en vergevingsgezind systeem.

Gebruiksaanwijzing Gutenberg blocks

Het mooie van het herontwerp van WordPress is dat het vergelijkbaar genoeg is met hoe dingen voorheen werkten, dat de gebruikersinterface nog steeds bekend is. Zelfs als je niet bekend was met de nieuwe blokken, kun je nog steeds je paginatitel toevoegen, je inhoud toevoegen, codes en widgets toevoegen en publiceren zoals voorheen. Het ziet er misschien een beetje anders uit, maar het werkt ongeveer hetzelfde.

Dit is ideaal voor incidentele bloggers of mensen die nieuw zijn bij WordPress. Omdat een belangrijk element van het CMS het gebruiksgemak is, zijn de ontwikkelaars er op de een of andere manier in geslaagd om meer geavanceerde functies toe te voegen zonder het algehele systeem moeilijker te gebruiken te maken.

Je kunt nog steeds binnen enkele minuten een pagina maken met behulp van standaardopties, maar nu kun je veel dieper gaan zonder een regel code te hoeven leren of zelfs maar te weten hoe een shortcode eruitziet.

Het zijn deze dingen die maken Gutenberg blocks zo handig.

U kunt beide gebruiken Gutenberg blocks of niet.

De standaardinstelling voor pagina's en berichten betekent dat u uw pagina-inhoud nog steeds elders kunt opmaken en deze eenvoudig op de pagina kunt kopiëren en plakken. Plak de titel in het titelblok en de pagina-inhoud in het tekstblok. Als dat alles is wat je nodig hebt, is het creatieproces net zo eenvoudig als voorheen. Als je verder wilt, kan dat.

Als je toch wilt duiken in hoe de blokeditor werkt, zie je nog een paar opties:

• Selecteer het kleine '+'-pictogram naast het middelste blok om een ​​nieuw blok toe te voegen.
• Selecteer de 'H' om een ​​kop toe te voegen.
• Selecteer het lijstpictogram om een ​​lijst aan uw blok toe te voegen.
• Selecteer het afbeeldingspictogram om een ​​afbeelding toe te voegen.

Alle vier deze opties zijn beschikbaar in het inhoudsmenu, maar als ze voor elk blok beschikbaar zijn, kunt u uw inhoud in elk ontwerp maken dat u maar wilt. De afzonderlijke opvallende blokken kunnen afzonderlijk worden bewerkt en ingelijst en elk wordt weergegeven op de voltooide pagina.

Dit is iets Elementor (en pagebuilders vinden het leuk zoals Divi) al jaren met veel succes doen. U kunt nu vrijwel hetzelfde doen binnen WordPress.

U vindt onze meer over Divi in ​​onze Elegant Themes beoordelingen.

Een pagina maken met de blokeditor is eenvoudig:

1. Selecteer Nieuwe pagina of Nieuwe post in het zijmenu van WordPress.
2. Schrijf of plak uw paginatitel in het titelblok.
3. Schrijf of plak uw inhoud in het tekstblok.
4. Selecteer het '+' icoon rechts van het blok om een ​​nieuw blok toe te voegen.
5. Selecteer het meest geschikte blok in het pop-upvenster.
6. Voltooi de hoofdblokelementen in het middelste deelvenster.
7. Selecteer het pictogram met de drie stippen boven aan het blok dat u hebt toegevoegd om het ontwerp te wijzigen of aan te passen.
8. Om aangepaste CSS toe te voegen, selecteert u Geavanceerd in het rechtermenu.
9. Selecteer Twee keer publiceren om live te gaan.

Hoewel het gebruik van de blokeditor heel eenvoudig is, kun je veel dieper duiken als dat nodig is. Dat menupictogram met drie stippen bij elk blok opent een overvloed aan aanpassingsopties, afhankelijk van het blok. Jij kan duplicaat het blok, voeg andere blokken voor of na in, wijzig de HTML-attributen, groepeer blokken samen en meer, afhankelijk van de beschikbare opties.

Bovendien kunnen ontwikkelaars, naast de standaardblokken die bij WordPress worden geleverd, ook hun eigen blokplug-ins maken. Gezien de enorme gebruikersbasis en het ontwikkelaarstalent van WordPress, zijn er na slechts een jaar gebruik al veel block-plug-ins beschikbaar.

Veelgebruikte blokken

WordPress heeft een reeks blokken opgenomen die betrekking hebben op het maken van kernpagina's. Elk maakt het gemakkelijk om verschillende pagina-elementen toe te voegen, terwijl aangepaste ontwerpfuncties alleen voor dat blok mogelijk zijn. Het is een krachtige bewerkingsoptie die met groot effect kan worden gebruikt.

De standaard Gutenberg blocks binnen WordPress zijn onder meer:

• Tekstblok – Het traditionele contentblok waar je precies zoals voorheen kunt werken en wijzigen met HTML of shortcodes.
• rubriek – Koersblokken met de standaard H1, H2, H3, H4 instellingen.
• Lijst - Een apart blok dat u kunt gebruiken om opvallende lijsten te maken, geordend of ongeordend.
• Galerij - Een galerijblok dat de aangepaste opmaak van afbeeldingen mogelijk maakte om bij uw pagina-inhoud te passen.
• Afbeelding - Een specifiek afbeeldingsblok dat op dezelfde manier werkt als de galerij, maar voor afzonderlijke afbeeldingen.
• Citaat - Een opvallend blok waarmee u citaten of recensies op een pagina kunt markeren.
• Audio - Een specifiek blok om te klikken om audioclips af te spelen binnen pagina-inhoud.
• Hoes - Een nieuw blok waarmee je een omslagafbeelding voor je pagina of bericht kunt plaatsen die de uitgelichte afbeelding kan aanvullen.
• Video - Een videoblok dat werkt als audio en het eenvoudig maakt om video in een pagina of bericht te plaatsen.

Alles wat je ermee kunt doen Gutenberg blocks je kon vroeger wel met de originele editor, maar die was niet altijd gebruiksvriendelijk of toegankelijk voor nieuwe gebruikers. Dit blokontwerp maakt het voor iedereen gemakkelijk om hun pagina's op een logische en lineaire manier op te bouwen.

De beste Gutenberg-blokplug-ins

De standaard WordPress Gutenberg blocks dekt het meeste van wat u waarschijnlijk nodig heeft van uw CMS. We hebben echter eerder vermeld dat ontwikkelaars ook zijn begonnen met het produceren van hun eigen Gutenberg-blokplug-ins om nog meer functies toe te voegen. Er zijn tientallen blokplug-ins van verschillende kwaliteiten en we hebben hier enkele van onze favorieten verzameld.

Laten we er nu een paar bekijken.

We zullen kijken naar:

1. Toolset-blokken
2. Ultieme blokken
3. Ultieme add-ons voor Gutenberg
4. Geavanceerd Gutenberg Blocks
5. Stapelbaar Gutenberg Blocks
6. Atoomblokken
7. Otterblokken
8. Blokken door Templatic
9. Kadansblokken

Veel van deze Gutenberg-blokplug-ins zijn volledig gratis, terwijl andere gratis blokken bieden met de optie om te upgraden naar geavanceerdere premium-blokken. We noemden in elke beschrijving degenen die gratis zijn en waar er premium-opties zijn.

Elk wordt op dezelfde manier geïnstalleerd als elke andere WordPress-plug-in. Selecteer het van WordPress.org en installeer en activeer of download de bestanden naar uw computer en upload ze naar uw WordPress-installatie. Eenmaal geïnstalleerd, zou u uw nieuwe blokkeringsopties moeten zien verschijnen met de standaard geblokkeerd wanneer u '+' op een pagina selecteert.

1. Toolset-blokken

Toolset-blokken is een van onze favoriete blokeditor-plug-ins voor WordPress. Het is een premium plug-in die bewijst dat hoewel je goede dingen gratis kunt krijgen, het soms de moeite waard is om wat extra te betalen voor kracht en gemak. De plug-in wordt op dezelfde manier geïnstalleerd als andere plug-ins en voegt de nieuwe blokken toe aan het bestaande menu.

De blokken omvatten aangepaste berichttypen, aangepaste taxonomie, aangepaste velden, sjablonen, weergaven, paginering, oneindig scrollen, Ajax-blokken, WooCommerce, Google Maps, formulieren, betalingen en zelfs toegangscontrole. Sommige van deze blokken zul je in geen enkele gratis plug-in vinden, daarom hebben we Toolset Blocks gemarkeerd.

Een van de beste eigenschappen van Toolset is de mogelijkheid om dynamisch gegenereerde inhoud te maken ZONDER dat u aangepaste PHP-code hoeft te gebruiken. Toolset integreert rechtstreeks met de WordPress Block Editor en stelt u in staat om overal dynamische inhoud op te halen.

Als een paar voorbeelden van wat u kunt doen: 

• Maak koppen op basis van titels
• Knopteksten en CTA's instellen vanuit aangepaste velden
• Afbeeldingsbronnen instellen voor velden of aangepaste velden
• enz.

De volgende video is een geweldige uitleg van de mogelijkheden van Toolset Blocks:

De meesten van ons weten hoe krachtig aangepaste velden en berichttypes kunnen zijn en om dat binnen een pagina te kunnen implementeren is fantastisch. Naast formulieren, lay-outs, weergaven, toegangscontroles en de andere krachtige functies, is het ongelooflijk eenvoudig om deze plug-in aan te bevelen, ook al is het een premium product.

Af en toe is gratis niet de beste prijs en dit is een van die tijden.

2. Ultieme blokken

Ultieme blokken is gericht op bloggers, maar zou even goed werken op elke WordPress-website. De plug-in is gratis en bevat een selectie van promotionele en zeer nuttige bewerkingsblokken die ideaal zijn voor bloggers, maar ook nuttig kunnen zijn voor marketeers, e-commercesites, kleine bedrijven en iedereen die wil dat hun inhoud opvalt.

Blokken omvatten recensies, inhoudsopgave, calls-to-action, content-toggles, afbeeldingsschuifregelaar, content-filers, getuigenissen, sociaal delen, countdown-timers, voortgangsbalken, postrasters en sterbeoordelingen. De ontwikkelaar zegt dat ze ook meer onderweg zijn.

Ultimate Blocks heeft nog een truc in petto in zijn block manager. Een eenvoudige interface die u helpt bij het in- of uitschakelen van blokken om het maken van pagina's eenvoudig te houden. Het betekent dat je de collectie kunt downloaden en alleen de blokken kunt inschakelen die je waarschijnlijk zult gebruiken, zodat de pagina vrij blijft tijdens het maken.

3. Gutenberg Blocks – Ultieme add-ons voor Gutenberg

Gutenberg Blocks – Ultieme add-ons voor Gutenberg is van dezelfde ontwikkelaars als de superb Astra WordPress-thema. De gratis plug-in voegt een reeks blokken toe voor dagelijks gebruik die eenvoudig te gebruiken zijn en een breed scala aan aanpassingsopties bieden. Ze werken ook allemaal met Astra, wat geweldig is als je dat thema gebruikt.

Blokken omvatten infoboxen, knoppen, geavanceerde koppen, teamblokken, prijzen, sociale aandelen, getuigenissen, pictogramlijsten, Gravity Form-blokken, marketingblokken, citaten, calls-to-action, Contact Form 7-blokken, Google Maps en meer.

De ontwikkelaars zeggen dat deze blokken zijn geoptimaliseerd voor paginasnelheid terwijl ze naad biedenless integratie met het Astra-thema en binnen elk ander thema. Je hebt vergelijkbare aanpassingsopties als deze andere plug-ins om blokken in bestaande pagina's te schuiven. Dit alleen al maakt deze plug-in de moeite van het bekijken waard.

4. Geavanceerd Gutenberg

Geavanceerde Gutenberg van Joom United voegt meer dan twintig editorblokken toe als gratis WordPress-plug-in. Er is hier een behoorlijk aantal opties, van de gebruikelijke kolom en kop tot meer geavanceerde blokken. Ze zijn goed ontworpen met een minimale interface die op de een of andere manier nog steeds alle aanpassingsopties biedt die je waarschijnlijk nodig hebt.

Blokken omvatten auteursprofielen, aangepaste CCS-blokken, WooCommerce, geavanceerde knoppen, contactformulieren, geavanceerde lijsten, kaarten, getuigenissen, tellers, inlog- en registratieblokken, video- en afbeeldingsblokken, sociaal delen en linken, samenvattingen van berichten, Lightbox-blok en nog veel meer .

Elke integreert naadlessly in een pagina en wordt compleet geleverd met de geavanceerde aanpassingsoptie met behulp van het menu met drie stippen. De exacte opties verschillen afhankelijk van het blok in kwestie, maar dekken de meest voorkomende situaties, kleur, grootte, inspringing, uitlijning enzovoort.

5. Stapelbaar Gutenberg Blocks

Stapelbaar Gutenberg Blocks was een andere vroege aankomst in de update en bracht een aantal zeer nuttige aangepaste blokken uit voor de WordPress-editor. De meeste stapelbare blokken zijn gratis, maar de ontwikkelaar biedt ook enkele premium-blokken aan voor specifieke toepassingen, mocht je ze nodig hebben.

Gratis blokken zijn onder meer postblokken, functieraster, accordeon, oproep tot actie, kaart, koptekst, video-pop-up, prijsblok, meldingsblok, afstandhouder, scheidingslijn, functielijst en andere. Er zijn in totaal 23 gratis blokken.

Een bijkomend voordeel is dat Stackable een modulair systeem is, zodat u de blokken kunt toevoegen die u waarschijnlijk nodig hebt, terwijl u de andere weglaat. Dit kan een klein voordeel hebben op het gebied van opslag en paginasnelheid, afhankelijk van hoe uw website is ingesteld. Hoe dan ook, het is een leuke toegevoegde functie die de zaken aan de achterkant slank kan houden.

6. Atoomblokken

Atoomblokken was een van de eerste plug-ins ter plaatse en biedt nu 15 gratis blokken en enkele WordPress-thema's om deze nieuwe ontwerpvrijheid aan te vullen. Blokken omvatten getuigenissen, prijzen, nieuwsbrief, postraster, geavanceerde kolommen, pictogrammen voor delen, oproep tot actie, auteursprofiel en andere nuttige blokken.

De plug-in is gratis, net als de meeste thema's. Eenmaal geïnstalleerd, ziet u een nieuwe reeks blokken in het blokgedeelte van een nieuwe pagina of nieuw bericht. Zoek naar AB Post Grid enz. om de Atomic Block-functies te identificeren.

Net als deze andere plug-ins voor editorblokken, kunt u het uiterlijk ervan aanpassen in het geavanceerde menu. Je hebt vergelijkbare opties in termen van dekking, kleur, positionering enzovoort, met het extra voordeel van extra keuzes als je een Atomic Block-thema gebruikt. Het is een kleine extra functie, maar het is er!

7. Gutenberg Blocks en sjabloonbibliotheek door Otter

Gutenberg Blocks en sjabloonbibliotheek door Otter is een mondvol van een naam die qua eigenschappen veel beter verteerbaar is. Het is een gratis, lichtgewicht plug-in die een aantal goed ontworpen blokken bevat die voortbouwen op die van WordPress, alleen met meer ontwerpopties.

Blokken omvatten secties, geavanceerde koppen, knoppen, prijzen, getuigenissen, Google Maps, bio-blokken voor auteurs, postraster, Font Awesome, delen en een kaartblok. Ze zijn allemaal geoptimaliseerd voor paginasnelheid en functies en hoewel deze functies licht zijn, vormen ze een uitstekende aanvulling op de standaardblokken.

Er zijn extra aanpassingen en enkele bibliotheekopties voor elk blok. Je kunt elk blok aanpassen aan je specifieke behoeften of een bibliotheekoptie gebruiken om een ​​kant-en-klaar ontwerp te nemen en het binnen het blok te gebruiken. Het is snel en heel eenvoudig.

8. Blokken door Templatic

Blokken door ontwikkelaar Templatic is een andere solide vermelding in onze lijst met uitstekende Gutenberg-blokplug-ins. We hebben veel respect voor Templatic-thema's en deze blokken werken met of zonder een van hun thema's. Als je een Templatic-thema gebruikt, glippen deze blokken er meteen in en zijn ze klaar voor gebruik. Als je geen Templatic-thema gebruikt, zullen deze blokken nog steeds naad integrerenlesspassen in uw ontwerp.

De blokken zijn gratis en bevatten een auteursbiografie, waarschuwingen, delen op sociale media, scheidingstekens, omslagafbeelding, kopopties, kaart, prijzen, knoppen en een Tweet-blok. Elk heeft de basisfuncties vooraan en in het midden met aanpassingen die beschikbaar zijn via het menu. Ze zijn heel eenvoudig te gebruiken en verschijnen naast alle standaardblokken op de nieuwe pagina of het nieuwe berichtscherm.

Er zijn hier enkele goede blokken, maar de plug-in is al bijna een jaar niet bijgewerkt. Ze werken wel met de huidige versie van WordPress omdat we ze op tijd hebben getest voor dit artikel, maar we weten niet wanneer nieuwe blokken zullen aankomen.

9. Kadansblokken

Kadansblokken heeft zowel gratis als premium-opties die de standaardblokken binnen WordPress versterken. De gratis versie heeft twaalf blokken en een ingebouwde editor, terwijl de premiumversie van $ 59 per jaar zeven premiumblokken, unieke animatie-opties en ondersteuning toevoegt. Er is ook een derde optie, voor $ 99 per jaar heb je toegang tot alle premium bewerkingsblokken plus alle Kadence-thema's en -producten.

Blokken omvatten paginalay-outblokken, infoboxen, geavanceerde galerijen, getuigenissen, videoblokken, accordeon, knoppen, tabbladen, pictogrammen, geavanceerde koppen en afbeeldingen. De premium-versie voegt raster- en carrouselblokken, productcarrousels, modelblokken, afbeeldingsoverlays, gesplitste inhoud en videopop-ups toe.

Elk blok heeft een aangepast bewerkingsgedeelte waar u positie, omtrek, kleur, afbeeldingsgrootte, dekking en een reeks andere factoren kunt wijzigen. Als u binnen een specifiek ontwerp of raamwerk werkt, kunt u eenvoudig blokken in dat ontwerp implementeren met behulp van de editor.

Samenvatting Gutenberg blocks en hun plug-ins

Gutenberg blocks zijn een uitstekende evolutie van WordPress. Ze nemen alles wat we weten en waarderen over het snel maken van pagina's of berichten en duwen het vooruit. WordPress biedt nog steeds zijn kenmerkende gebruiksgemak en lage toetredingsdrempel voor beginners, terwijl het meer ervaren of ontwerpgerichte gebruikers de mogelijkheid biedt om op te vallen. Deze balans tussen vorm en functie is het vieren waard.

Net als de Gutenberg-blokplug-ins die we in deze lijst hebben. De gratis plug-ins bieden zo ongeveer alles wat je nodig hebt, van het maken van pagina's. De mogelijkheid om een ​​pagina of post op te splitsen in afzonderlijke componenten en elk afzonderlijk te stylen totdat het gewoon perfect is.

Zelfs die premium plug-ins zijn de kosten waard. Ze hebben de neiging om hogere normen te bieden op het gebied van ontwerp en bruikbaarheid en ook sommige blokken die nergens anders verkrijgbaar zijn. Hoewel premium, onderscheidt Toolset Blocks zich door het aanbieden van een reeks blokken die u in geen enkele gratis plug-in zult vinden, zoals zoeken, toegangscontrole, WooCommerce en aangepaste berichten en aangepaste velden.

Heb je een favoriete Gutenberg-blokplug-in? Liefde die we hier niet hebben genoemd? Vertel het ons hieronder als je dat doet!

Over de auteur

Auteur: Jamie KavanaghWebsite: https://www.coastalcontent.co.ukE-mail: jamie@collectiveray.com

Jamie, een ingenieur van opleiding, is onze belangrijkste technische schrijver en onderzoeker. Jamie runt ook Coastal Content, een contentmarketing-, copywriting- en webdesignbedrijf gevestigd in Cornwall in het Verenigd Koninkrijk.