Zonder aanvullende blocks voor Gutenberg kan je natuurlijk al veel meer doen dan met de klassieke bewerker van WordPress.
Toch zal je snel een aantal dingen missen. Maar gelukkig hoef je deze uitbreidingen niet ver te zoeken, want bijna alles is er al voor Gutenberg!
Inhoudsopgave
Het mooie is namelijk dat met de introductie van Gutenberg ook een heel nieuw systeem is meegekomen waardoor alle denkbare blokken mogelijk zijn.
Daarom deze speciale verzameling van de beste plug-ins om extra blokken aan Gutenberg toe te voegen. Een mooie aanvulling op onze handleiding WordPress Gutenberg.
Wat is mogelijk met standaard blokken?
Als eerste een hele interessante plug-in die het werken met Gutenberg een stuk makkelijker maakt. Je kan hiermee kant & klare layouts toevoegen:
Gutenberg Block Templates
- Geen extra blokken om uit te kiezen
- Visueel een passend sjabloon kiezen
- Geen aanpassingen aan Gutenberg
- Enigszins beperkt qua vormgeving en mogelijkheden
- Bij uitschakelen plug-in blijft de blokkenverdeling niet altijd behouden
- Sommige sjablonen gebruiken CSS, waardoor deel vormgeving dan verloren gaat bij uitschakelen plug-in
De beste blokkenverzamelingen voor Gutenberg
Wanneer de standaard blokken niet voldoende zijn en je bent al gewend aan Gutenberg, dan zijn er inmiddels ook vele uitbreidingen:
Atomic Blocks
- De makers zijn bekend van het befaamde Genesis thema
- Meer dan 15 nieuwe blocks
- Nieuwsbrief inschrijving blok(o.a. Mailchimp)
- Container blok is handig om blokken te bundelen
- Uitzetten blokken niet mogelijk
Deze plug-in bevat op dit moment de volgende blokken:
- Share Icons
- Call-to-action
- Aanpasbare knop
- Vulling & scheiding
- Auteur Profiel
- Post Grid
- Container
- Beoordelingen (reviews)
- Inline kennisgeving
- Accordion (Faq)
- Drop Cap
Kadence Blocks
- Meer dan 12 aanvullende blokken
- Mogelijkheid om blokken te deactiveren
- Inclusief e-mail formulier
- Kant & klare layouts
- Tabs mogelijk
- Geen nadelen kunnen vinden
Deze plug-in bevat op dit moment de volgende blokken:
- Rij Layout
- Geavanceerde koptekst
- Geavanceerde knop
- Tabjes
- Icoontjes
- Vulling & scheiding
- Geavanceerde galerij en slider
- Contactformulier
Gutenberg Blocks
- Mogelijkheid om blokken uit te zetten
- Meer dan 20 blokken, waaronder
- Google maps kaartje dat meteen werkt
- Geavanceerde kolommen met veel instellingen
- Erg veel instellingen waardoor misschien wat lastiger voor beginners
Deze plug-in bevat op dit moment de volgende blokken:
- Sectie
- Multi Buttons
- Geavanceerde heading
- Post Grid
- Post Masonry
- Infobox
- Google Map
- Smoelenboek
- Tijdslijn
- Sociale deelknoppen
- Beoordelingen
- Restaurant menu
- Call To Action
- Advanced Columns
- Icoontjes
- Prijslijst
Gutenberg Blocks by Otter
- Gemaakt door ervaren ontwikkelaars
- Section blok voor verschillende layout mogelijkheden
- Inclusief aantal kant en klare layout templates
- Met animatie mogelijkheden en CSS per blok
- Meer dan 12 extra blokken voor Gutenberg
- Sommige blokken zijn misschien niet voor iedereen handig, bijvoorbeeld prijstabellen, beoordelingen en het auteur info blok
Deze plug-in bevat op dit moment de volgende blokken:
- Google Maps
- Over de schrijver
- Post Grid
- Font awesome iconen
- Deelknoppen
- WP Plugin blok
- Sectie geavanceerd
- Advanced header
- Button groep
- Diensten
- Prijs blokken
- Testimonial
CoBlocks
- 22+ extra blokken!
- Galerie en carousel
- Google maps
- Lettertypen in te stellen
- Eigen kolomvoorziening is wat lastig aan te passen na plaatsen
Deze plug-in bevat op dit moment de volgende blokken:
- Aanpasbare rijen en kolommen
- Accordion
- Waarschuwing
- Schrijver profiel
- Prijs tabel
- Sociaal delen knoppen
- Klik om te tweeten
- Dynamische verdeler
- Gif
- Github Gist
- Op laten vallen
Caxton
- Veel instellingen voor layout
- Meer geavanceerde layouts mogelijk
- Achtergrond afbeeldingen en shape divider (scheidingslijn)
- Super tekst blok met veel typography instellingen
- “Slechts” 8 extra blokken
- Voelt niet heel stabiel
- Blokken niet uit te zetten
Deze plug-in bevat op dit moment de volgende blokken:
- Aanpasbare rijen en kolommen
- Super tekst
- Vorm scheider (shape divider)
- Slider
- Icons
- Knop (button)
Stackable
- Uitgebreide blokken collectie (23+)
- O.a. accordion en verberg/lees meer
- Veel mogelijkheden voor achtergronden, zoals video
- Veel visueel aantrekkelijke mogelijkheden, zoals scheidingslijn
- Blokken uit te zetten
- Geen nadelen kunnen vinden
Deze plug-in bevat op dit moment de volgende blokken:
- Container
- Blogberichten
- Matrix van eigenschappen
- Accordion (Veel gestelde vragen)
- Afbeelding box
- Eigenschappen
- Iconen lijst
- Call To Action
- Kaart
- Advanced header
- Vorm scheider (shape divider)
- Count Up
- Video Popup
- Prijsblokken
- Testimonial
- Teamleden
- Waarschuwing
- Nummer box
- Expand/Show More
- Knoppen
- Blockquote
- Spacer (Afstandhouder)
Advanced Gutenberg
- Ruime sortering van 18+ extra blokken
- Blokken uit te zetten
- Met e-mail formulier
- Geavanceerde tabel functies
- Blokken groeperen met container blok
- Google maps blok heeft API nodig
Deze plug-in bevat op dit moment de volgende blokken:
- Slider met laatste berichten
- WooCommerce Producten slider
- Geavanceerde knop (button)
- Contact formulier
- Geavanceerde opsommingslijst
- Kaart
- Geavanceerde tabellen
- Accordion (faq)
- Tabjes
- Reviews (beoordelingen)
- Teller
- Geavanceerde afbeeldingen
- Geavanceerde video
- Scheidingselement
- Sociale links
- Lightbox effect
- Afbeelding informatie tonen
- Samenvatting blog post
Ultimate Blocks
- 19+ extra blokken voor Gutenberg
- Blokken zijn te deactiveren
- Handige detail velden(feature boxes)
- Inhoudsopgave en vooruitgangsbalkje kunnen handig zijn
- Tabs mogelijk
- Alle instellingen zijn vrij beperkt (kan ook een voordeel zijn)
Deze plug-in bevat op dit moment de volgende blokken:
- Notificatie box
- Nummer box
- Reviews (beoordeling)
- Klik om te Tweeten
- Aftellen
- Voortgangsbalk
- Ster beoordelingen
- Advanced knop (button)
- Scheider
- Inhoudsopgave
- Inhoud filter
- Inhoud schakelaar (toggle)
- Tabjes
- Sociaal delen
- Review (met Schema Markup)
- Call To Action
- Feature Box
Editor Blocks
- 12+ extra blokken
- Een aantal meer specialistische blokken, zoals brand logo´s
- Team member(smoelenboek) kan ook handig zijn
- Blokken kan je niet deactiveren
- Veel van de blokken kan je ook gewoon samenstellen met standaard Gutenberg
Deze plug-in bevat op dit moment de volgende blokken:
- Wrapper
- Hero afbeelding
- Prijstabel
- Auteurs profiel
- Teamleden
- Horizontale en verticale eigenschappen
- Reviews
- Callout
- Merken
- Eigenschappen box
Advanced Gutenberg Blocks
- 8+ aanvullende blokken
- Optionele extra tekst gereedschappen
- Tabs mogelijk
- Blokken uit te zetten,zelfs die van Gutenberg!
- API sleutels nodig voor Google maps, Giphy en Unsplash
- Sommige blokken zijn een beetje vergezocht, zoals het “plugin zoeker blok”
Deze plug-in bevat op dit moment de volgende blokken:
- WordPress Plugin box
- Website voorbeeld
- Beoordelingen (reviews)
- Google maps
- Klik om te tweeten
- Inhoudsopgave
- Intro scherm
- Giphy en Unsplash foto’s toevoegen
- Code toevoegen
- Mededeling
- WooCommerce Product
- WooCommerce koop knop
- Banner advertentie
- Tekst en rechthoek advertentie
Easy Blocks
- 20+ handige blokken
- Diverse rij- en kolom instellingen mogelijk
- Instagram afbeeldingen te plaatsen als blok
- Geen kunnen vinden
Deze plug-in bevat op dit moment de volgende blokken:
- Review slider
- Klik om te tweeten
- Hero afbeelding
- Instagram box
- Eigenschappen box
- Eigenschappen matrix
- Prijstabel
- Auteur omschrijving
- Advertentie box
- Beoordelingen
- Waarschuwing / mededeling
- Call To Action
- Image box met tekst
- Kopjes en sub kopjes
- Blokquotes
Ghost kit
- Meer dan 20 aanvullende blokken
- O.a. typografie en animaties
- Handige template blokken
- Instagram afbeeldingen te plaatsen als blok
- Geen kunnen vinden
Deze plug-in bevat op dit moment de volgende blokken:
- Matrix (grid)
- Voortgang
- Waarschuwing / mededeling
- Prijstabel
- Inhoudsopgave
- Buttons
- Reviews
- Instagram en twitter feed
- Video
- Countdown
- Tabs
- Accordion
- Nummer / icon box
- Carousel
- Google maps
- Scheidingselement
Gutentor
- Bijna 30 aanvullende blokken
- O.a. typografie en animaties
- Kant & klare templates
- Tabs, accordions en veel meer
- De CSS mogelijkheden zijn voor beginners misschien een wat hoge drempel
Deze plug-in bevat op dit moment de volgende blokken:
- Over box
- Accordion
- Geavanceerde kolommen
- Geavanceerde lijst
- Profiel schrijver
- Blog berichten
- Call to Action
- Inhoud box
- Count Down
- Teller
- Scheidingselement
- Uitgelicht box
- Gallery
- Google Map
- Iconen Box
- Afbeelding box
- Afbeelding Slider
- Notificatie
- Openingstijden
- Prijsblokken
- Voortgangsbalk
- Restaurant menu
- Social
- Show More
- Tabjes
- Team
- Reviews
- Tijdslijn
- Video popup
Generateblocks
- Veel doen met slechts een paar blokken
- Ook instelbaar voor mobiele apparaten
- Tekst op afbeeldingen mogelijk
- Voor meer specifieke dingen zoals een slider, Google maps, etc. zal je mogelijk toch nog een andere plug-in nodig hebben.
De volgorde van genoemde plug-ins is willekeurig, dus geeft geen specifieke voorkeur aan. Let dus vooral op de sterren.
De keuze van de plugin hangt natuurlijk ook af van welke blokken je nodig hebt voor jouw website.
Plugins met één Gutenberg blok
Google Maps Block
- Om Google maps kaartje te plaatsen
- Adres, hoogte en zoomlevel instelbaar
- Slechts 1 functie
- Er moet een API sleutel aangevraagd worden
- Een aantal van de andere genoemde plug-ins hebben dit ook
Gutenslider
- Beeldwisselaar met veel mogelijkheden
- Parallax diashow mogelijk
- Tekst op afbeeldingen mogelijk
- Een aantal van de andere genoemde plug-ins hebben ook een eenvoudige slider, dus niet altijd nodig
Grids: layout builder
- Maak indelingen volledig op maat
- Unieke layouts mogelijk
- Ook lagen met overlappingen
- Geen nadelen gevonden
- Misschien niet voor iedereen handig
Post layouts
- Verschillende layouts voor je blog
- Grid en lijst
- Lees verder optie
- Volgorde en afbeelding aanpassen
- Een aantal van de andere genoemde plug-ins hebben ook een eenvoudige post grid, dus deze plug-in zal niet altijd nodig zijn
Buttons for Gutenberg
- Extra stijlen voor Gutenberg buttons
- Op moment van schrijven maar een paar extra stijlen, dus voegt niet veel extra toe aan de standaard button van Gutenberg
Timeline blocks
- Tijdslijn met 2 stijlen
- Typography aan te passen
- Meta informatie aan te passen
- Lees verder opties
- Geen nadelen gevonden
Plugins met Gutenberg tools
Extra block design
Een plug-in waarmee je alle Gutenberg blokken kan vormgeven(stijlen) direct vanuit de pagina inhoud bewerker. Hiervoor is wel kennis van CSS vereist.
Disable Gutenberg blocks
Plug-in om alle Gutenberg blokken te managen. Dit kan voor minder afleiding zorgen en mogelijk ook snelheidswinst.
Gemakkelijk zoeken naar een bepaald blok
Kijk dus goed welke blokken je nodig hebt en combineer waar nodig meerdere plug-ins.
Inmiddels is er zelfs een database waarin je een specifiek blok kan zoeken op de naam van een functie die je zoekt, Je kan dan direct zien welke plug-in je daarvoor moet installeren:
Editorsblock library of Gutenberg Hub
Hopelijk heb je veel plezier van deze lijst met uitbreidingen voor Gutenberg.
Laat hieronder maar een reactie achter wanneer je nog andere plug-ins tegenkomt of iets hierover wilt delen.
Geef een reactie