Hoe bouw je blokken met Bento in WordPress in 2025?

Het ontwerpen van moderne websites in WordPress is nog nooit zo efficiënt geweest, vooral met de mogelijkheid om met Bento blokken te bouwen. Deze functie geeft je creatieve vrijheid zonder de rompslomp van extra code of omvangrijke plugins.

Met Bento creëer je strakke, responsieve lay-outs die naadloos aansluiten op het ontwerp van je website, of je nu een minimalistische look, een opvallende rasterlay-out of een evenwichtige paginastructuur nastreeft. Het is ontworpen om tijd te besparen, het ontwerpproces te vereenvoudigen en zelfs beginners te helpen bij het creëren van professionele secties.

Bento biedt niet alleen een aantrekkelijke vormgeving, maar zorgt ook voor optimale prestaties en responsiviteit. Elk blok dat je maakt, past zich naadloos aan verschillende apparaten aan, waardoor je website er professioneel uitziet op desktops, tablets en mobiele telefoons.

Voor bloggers, eigenaren van kleine bedrijven of ontwikkelaars betekent de flexibiliteit om met Bento bouwstenen te maken meer controle, snellere workflows en opvallende ontwerpen.

In deze handleiding leiden we je stap voor stap door het proces om Bento optimaal te benutten in WordPress, zodat je het volledige potentieel ervan kunt ontsluiten voor je websiteprojecten.

Bento en Gutenberg begrijpen

Bento is een verzameling hoogwaardige webcomponenten die zijn ontworpen om webontwikkeling. Deze componenten zijn herbruikbaar, toegankelijk en compatibel met verschillende browsers, waardoor ze een betrouwbare keuze zijn voor ontwikkelaars die moderne webapplicaties bouwen.

Wat Bento onderscheidt, is de veelzijdigheid. Het biedt componenten aan in React, Preact en aangepaste elementen, waardoor een naadloze integratie in diverse omgevingen, waaronder WordPress, gegarandeerd is.

Met Bento kunnen ontwikkelaars:

• Elimineer overbodige code door gebruik te maken van herbruikbare componenten.

• Zorg voor toegankelijkheid en een soepele gebruikerservaring op alle apparaten.

• Gebruik sterk geoptimaliseerde componenten die bijdragen aan snellere laadtijden van de pagina.

Gutenberg is de krachtige blokkeneditor van WordPress, gebouwd met React, waarmee gebruikers content kunnen ontwerpen en structureren met behulp van blokken. Elk blok vertegenwoordigt een specifieke functionaliteit, van tekst en afbeeldingen tot complexe, op maat gemaakte functies.

De ware kracht van Gutenberg schuilt in de flexibiliteit: ontwikkelaars kunnen verder gaan dan de standaard WordPress-blokken en aangepaste blokken creëren die zijn afgestemd op specifieke behoeften.

De traditionele methode om deze blokken te bouwen vereist echter vaak dat de functionaliteit twee keer wordt gecodeerd: één keer voor de React-editor en één keer voor de frontend. Deze duplicatie kan leiden tot inefficiëntie en inconsistenties.

Waarom Bento combineren met Gutenberg?

Bento overbrugt deze kloof door ontwikkelaars in staat te stellen:

• Ontwikkel componenten één keer en gebruik ze consistent in zowel de blokeditor als de frontend.

• Verkort de ontwikkeltijd door overbodig werk te elimineren.

• Maak gebruik van beproefde, veelzijdige componenten zoals carrousels, accordions en meer.

Door Bento te combineren met Gutenberg krijgen ontwikkelaars een gestroomlijnde en efficiënte manier om aangepaste WordPress-blokken te creëren die zowel functioneel als visueel aantrekkelijk zijn. In het volgende gedeelte zullen we onderzoeken hoe Bento uw ontwikkelworkflow.

Waarom Bento gebruiken voor het ontwikkelen van Gutenberg-blokken?

Het ontwikkelen van aangepaste blokken voor Gutenberg kan een lonend, maar ook uitdagend proces zijn. Ontwikkelaars worstelen vaak met de balans tussen React-gebaseerde editorcomponenten en frontend-implementatie, wat leidt tot dubbele code en onderhoudsproblemen. Hier komt Bento van pas: een elegante oplossing die het proces vereenvoudigt en een naadloze gebruikerservaring garandeert.

Laten we eens onderzoeken waarom Bento de perfecte partner is voor het ontwikkelen van blokken met Gutenberg.

Vermijd code duplicatie

Traditioneel gezien houdt het bouwen van Gutenberg-blokken in dat de functionaliteit twee keer wordt geïmplementeerd:

• Bewerkingscomponent: Gebouwd met React voor de blokeditor.

• Frontend-component: Opnieuw geïmplementeerd zonder React voor weergave aan de frontend.

Dit overbodige werk verlengt de ontwikkeltijd en kan leiden tot inconsistenties tussen de editor- en frontendversies. Met Bento schrijf je de functionaliteit slechts één keer dankzij de herbruikbare componenten, die naadloos in beide omgevingen werken.

Platformonafhankelijke compatibiliteit

De componenten van Bento zijn ontworpen om compatibel te zijn met meerdere platformen, waardoor consistent gedrag in verschillende browsers en apparaten wordt gegarandeerd.

Of je nu werkt in een op React gebaseerde Gutenberg-editor of het blok op de frontend weergeeft, de componenten van Bento passen zich moeiteloos aan en zorgen voor een uniforme gebruikerservaring.

Toegankelijkheid direct beschikbaar

Toegankelijkheid is niet langer een optie, maar essentieel voor een optimale gebruikerservaring.

Bento-componenten zijn ontworpen met toegankelijkheid in gedachten en voldoen aan webstandaarden zoals ARIA-rollen en toetsenbordnavigatie. Dit zorgt ervoor dat uw Gutenberg-blokken inclusief en gebruiksvriendelijk zijn voor alle doelgroepen.

Hoge prestaties voor snellere websites

Bento-componenten zijn geoptimaliseerd voor snelheid, wat bijdraagt ​​aan snellere laadtijden van pagina's en betere websiteprestaties.

Dit is met name belangrijk voor WordPress-sites, waar prestaties direct van invloed kunnen zijn op SEO-rankings en gebruikerstevredenheid. Door gebruik te maken van de lichtgewicht en efficiënte componenten van Bento, zorg je ervoor dat je blokken je site niet onnodig zwaar maken.

Je ontwikkelomgeving instellen

Voordat je begint met het maken van een Gutenberg-blok met Bento, is het essentieel om je ontwikkelomgeving correct in te stellen. Een goed voorbereide omgeving zorgt voor een soepel ontwikkelproces en vermindert mogelijke problemen achteraf. Volg de onderstaande stappen om alles gereed te maken.

Voorwaarden

Voordat je begint met het ontwikkelen van Gutenberg-blokken met Bento, zorg ervoor dat je het volgende bij de hand hebt:

Node.js en npm geïnstalleerd:

• Installeer Node.js (inclusief npm) om afhankelijkheden te beheren en je project te bouwen.

• Controleer de installatie door de volgende opdrachten in uw terminal uit te voeren:

node -v npm -v

WordPress lokaal geïnstalleerd:

• Zet een lokale WordPress-omgeving op met behulp van tools zoals Local by Flywheel, XAMPP of Docker.

• Zorg ervoor dat u toegang hebt tot de map wp-content/plugins om uw aangepaste plugin te installeren en te activeren.

Bekendheid met React en Gutenberg:

• Zorg dat je een basiskennis van React hebt, aangezien dit de basis vormt voor de ontwikkeling met Gutenberg-blokken.

• Maak uzelf vertrouwd met de blokstructuur van Gutenberg, met name met de werking van de bewerkings- en opslagfuncties.

@wordpress/create-block installeren

De tool @wordpress/create-block vereenvoudigt het proces van het maken van aangepaste Gutenberg-blokken. Zo stel je het in:

Voer de Create-Block-opdracht uit:
Ga in je terminal naar de WordPress-pluginsmap en voer de volgende opdracht uit om een ​​nieuwe blokplugin te maken:

npx @wordpress/create-block awesome-carousel

Hierdoor wordt een nieuwe pluginmap met de naam awesome-carousel, die alle bestanden bevat die nodig zijn om met de ontwikkeling te beginnen.

Navigeer naar de plug-inmap:
Ga naar de zojuist aangemaakte map:

cd awesome-carousel

Start de ontwikkelomgeving:
Voer de volgende opdracht uit om de ontwikkelserver te initialiseren:

npm start

Met dit commando worden je blokbestanden gecompileerd en worden wijzigingen tijdens de ontwikkeling gedetecteerd.

Activeer de plugin in WordPress:

Ga naar het WordPress-beheerpaneel.

Ga naar Plugins ⟶ Geïnstalleerde pluginsen activeer de Awesome Logo Carousel -plugin.

Je aangepaste plugin is nu actief en er is een basisblok beschikbaar in de Gutenberg-editor.

Een gepersonaliseerd bentoblok maken: stapsgewijze handleiding

Het bouwen van een aangepast Gutenberg-blok met Bento begint met een goede voorbereiding. Dit omvat het opzetten van de pluginstructuur, het installeren van de benodigde Bento-componenten en het renderen van je eerste blok in de editor. Volg deze stapsgewijze handleiding om een ​​naadloos en functioneel carrouselblok te creëren.

Eerste installatie

Door te beginnen met de initiële installatie zorgt u ervoor dat uw project de juiste basis heeft om een ​​aangepast Gutenberg-blok te bouwen. Door deze stappen te volgen, creëert u een volledig functionele pluginstructuur die kan worden uitgebreid met Bento-componenten. Deze installatie biedt alle benodigde bestanden en configuraties voor een probleemloze ontwikkeling.

Maak de Block-plugin aan met @wordpress/create-block

Gebruik de tool @wordpress/create-block om een ​​nieuwe blokplugin te maken. Hiermee worden alle benodigde bestanden en mappen gegenereerd, waardoor een direct bruikbare structuur ontstaat.

Voer de volgende opdracht uit:

 npx @wordpress/create-block awesome-carousel

een nieuwe map met de naam awesome-carousel aangemaakt in de pluginsmap van je WordPress-website.

Ga naar de plug-inmap

Ga naar de zojuist aangemaakte blokmap:

cd awesome-carousel

Start de ontwikkelingsserver

Start de ontwikkelomgeving, die compileert en wijzigingen tijdens de ontwikkeling in de gaten houdt: npm start

Activeer de plugin in WordPress

• Log in op je WordPress-beheerpaneel.

• Ga naar Plugins ⟶ Geïnstalleerde plugins, zoek de Awesome Carousel- plugin en activeer deze.

Nu de eerste installatie is voltooid, heb je een basis Gutenberg-blokplugin die je kunt aanpassen.

Ontdek: Stapsgewijze handleiding voor het bouwen van een Web3-website met WordPress

Onderdelen van de bento installeren

Het integreren van Bento-componenten in uw codeblok is een cruciale stap die het volledige potentieel van herbruikbaarheid en prestaties ontsluit.

De Bento Base Carousel-component vormt de basis van uw aangepaste blok en biedt een vooraf gebouwde, maar flexibele carrouselfunctionaliteit. Met slechts een paar commando's kunt u de toegankelijkheid en platformonafhankelijke compatibiliteit van Bento in uw project integreren.

Installeer het Bento Base Carousel-onderdeel

Installeer de Bento Base Carousel-component met npm: npm install –save @bentoproject/base-carousel

Importeer Bento Carousel in het blok

Open het bestand src/edit.js en voeg de volgende importregels toe:

import { BentoBaseCarousel } from '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css';

De BentoBaseCarousel React-component biedt carrouselfunctionaliteit, terwijl de CSS

Zorgt voor een correcte vormgeving voor zowel de editor als de frontend.

Nadat Bento is geïnstalleerd en geïmporteerd, bent u klaar om uw eerste carrouselblok in Gutenberg te renderen.

Lees ook: Hoe bouw je een SaaS-website met WordPress

Het weergeven van de carrousel in Gutenberg

Door de carrousel in Gutenberg weer te geven, kun je Bento in actie zien binnen de WordPress-blokeditor. Deze stap richt zich op het integreren van de BentoBaseCarousel React-component en het controleren of deze naar behoren functioneert.

Je leert ook hoe je het blok kunt stylen, zodat het er zowel in de editor als op de frontend goed uitziet. Aan het einde van deze stap heb je een werkend carrouselblok dat de kracht van Bento laat zien.

Update het bewerkingscomponent

Open het bestand src/edit.js en werk de Edit-component bij om de BentoBaseCarousel toe te voegen:

import { useBlockProps } from '@wordpress/block-editor'; import { BentoBaseCarousel } from '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css'; export default function Edit() { return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Dia 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Dia 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Dia 3" /></BentoBaseCarousel></div></div> ); }

Deze code integreert de Bento Base Carousel-component met een set voorbeeldafbeeldingen.

Leer. hoe je je WordPress-website bouwt met het Underscores-thema

Voeg carrousel-specifieke CSS toe

Open het bestand src/style.scss en voeg de volgende CSS toe om ervoor te zorgen dat de carrousel consistente afmetingen heeft:

wp-block-create-block-awesome-carousel .awesome-carousel-wrapper, .wp-block-create-block-awesome-carousel .awesome-carousel-wrapper > * { aspect-ratio: 1200 / 800; }

Dit zorgt ervoor dat de carrousel op alle apparaten dezelfde beeldverhouding behoudt en er professioneel uitziet.

Bekijk een voorbeeld van het carrouselblok in de editor

Sla je wijzigingen op en compileer het blok opnieuw met behulp van de ontwikkelingsserver (start met `npm start` als deze nog niet actief is).

Ga naar de WordPress-blokeditor, voeg het Awesome Carousel -blok toe en zie de carrousel in actie.

In dit stadium is je Bento-gebaseerde Gutenberg-blok functioneel in de editor. In de volgende stappen kun je de interactiviteit ervan verbeteren en optimaliseren voor front-endprestaties.

Lees: Hoe maak je een afbeeldingscarrousel in WordPress

Interactiviteit toevoegen aan bento-blokken

Interactiviteit is de sleutel tot het creëren van aantrekkelijke blokken in WordPress. Met de krachtige API van Bento kunt u dynamische functies toevoegen, zoals navigatieknoppen, waarmee gebruikers naadloos met uw carrouselblok kunnen interageren, zowel in de editor als op de frontend.

Gebruikersinteractie in de editor

Om de carrousel interactief te maken binnen de Gutenberg-editor, kunnen aangepaste navigatieknoppen (bijvoorbeeld Volgende en Vorige) worden toegevoegd. Door gebruik te maken van de API van Bento kunt u de functionaliteit van de carrousel rechtstreeks in React aansturen.

Werk eerst je src/edit.js-bestand bij om navigatieknoppen toe te voegen. Gebruik de createRef-functie om toegang te krijgen tot de API van de carrousel. Bijvoorbeeld:

import { createRef } from '@wordpress/element'; import { Button } from '@wordpress/components'; export default function Edit() { const ref = createRef(); const goToNextSlide = () => ref.current.next(); const goToPreviousSlide = () => ref.current.prev(); return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel ref={ref} autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Dia 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Dia 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Dia 3" /></BentoBaseCarousel></div> <Button isSecondary onClick={goToPreviousSlide}>Vorige</button> <Button isSecondary onClick={goToNextSlide}>Volgende</button></div> ); }

Bekijk ook: De beste WordPress-blokthema's ontdekken

door de carrousel navigeren blokeditor, waardoor deze interactief en gebruiksvriendelijk wordt.

Gebruikersinteractie op de frontend

De interactiviteit aan de voorkant weerspiegelt de functionaliteit van de editor. In plaats van React-componenten worden echter de eigen aangepaste elementen van Bento gebruikt. Werk het bestand src/save.js bij om de carrousel en navigatieknoppen toe te voegen:

export default function save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Dia 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Dia 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Dia 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Vorige</button> <button className="awesome-carousel-next">Volgende</button></div></div> ); }

Om de navigatieknoppen op de frontend in te schakelen, maak je een bestand src/view.js aan. Dit bestand communiceert met de API van Bento om gebruikersacties af te handelen:

export default function save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Dia 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Dia 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Dia 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Vorige</button> <button className="awesome-carousel-next">Volgende</button></div></div> ); }

Dit script zorgt ervoor dat de navigatieknoppen naadloos samenwerken met de carrousel op de frontend.

Lees: Wat zijn WordPress-blokpatronen?

Vormgeving en frontend-optimalisatie

De juiste styling en optimalisatie zijn essentieel om ervoor te zorgen dat het blok er goed uitziet en goed presteert, zowel in de editor als op de frontend. Gebruik het bestand src/style.scss om stijlen te definiëren die specifiek zijn voor uw carrousel, zodat deze er op alle apparaten visueel consistent uitziet. Vermijd het gebruik van generieke klassenamen om conflicten met andere thema's of plug-ins te voorkomen.

Om de prestaties te optimaliseren, laad je stijlen dynamisch met PHP. Werk je plugin.php-bestand bij zodat stijlen alleen worden geregistreerd en in de wachtrij worden geplaatst wanneer het blok wordt weergegeven:

function create_block_awesome_carousel_register_assets() { wp_register_script('bento-runtime', 'https://cdn.ampproject.org/bento.js', [], false, true); wp_register_script('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js', ['bento-runtime'], false, true); wp_register_style('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css', []); } add_action('init', 'create_block_awesome_carousel_register_assets');

Assets registreren en render-callbacks beheren

Door assets efficiënt te laden, blijft je block lichtgewicht. Gebruik PHP's `render_callback` om scripts en stijlen alleen te laden wanneer het block op de pagina aanwezig is. Pas het bestand `plugin.php` als volgt aan:

function create_block_awesome_carousel_block_init() {
    register_block_type(__DIR__, [
        'render_callback' => 'create_block_awesome_carousel_render_block',
    ]);
}

function create_block_awesome_carousel_render_block($attributes, $content) {
    if (!is_admin()) {
        wp_enqueue_script('awesome-carousel-view');
        wp_enqueue_style('bento-base-carousel');
    }
    return $content;
}
add_action('init', 'create_block_awesome_carousel_block_init');


Dit zorgt ervoor dat scripts en stijlen alleen worden geladen op pagina's waar het blok wordt weergegeven, wat de algehele siteprestaties verbetert.

Beste werkwijzen voor de ontwikkeling van bento-blokken

Bij het werken met Bento-blokken in WordPress zorgt het volgen van best practices ervoor dat uw blokken efficiënt, herbruikbaar en gebruiksvriendelijk blijven.

Houd de blokken licht en herbruikbaar

Net zoals een bento-lunchbox is verdeeld in handige vakjes voor maaltijden, snacks, fruit en zelfs eten voor kinderen, zouden jouw blokken ook modulair en herbruikbaar moeten zijn.

Besteed aandacht aan schone materiaalkeuzes in je code en zorg ervoor dat elk blok robuust, duurzaam en niet overladen is met onnodige functies.

Hierdoor zijn ze draagbaarder, makkelijker op te bergen en handig voor dagelijks gebruik, net als een milieuvriendelijke, lekvrije, vaatwasbestendige lunchbox die je overal mee naartoe kunt nemen, van picknicks tot reizen.

Zorg voor toegankelijkheid (semantische HTML en ARIA-attributen)

Toegankelijkheid vormt de basis voor het creëren van veilige en prettige gebruikerservaringen. Door semantische HTML en ARIA-rollen correct te gebruiken, worden uw Bento-blokken inclusiever.

Zie het als ervoor zorgen dat een verpakking geschikt is voor de magnetron, de vaatwasser en dat je hem met de hand kunt afwassen; iedereen moet hem kunnen gebruiken, ongeacht zijn of haar voorkeur.

Een goede etikettering voorkomt ook problemen zoals het morsen of lekken van inhoud bij het gebruik van ondersteunende technologieën. Zo kunnen gebruikers net zo van uw content genieten als van voedsel dat bewaard wordt in een goed ontworpen product dat ongewenste geuren voorkomt.

Optimaliseer voor mobiele responsiviteit

In de huidige wereld gebruiken gebruikers meerdere apparaten om websites te bezoeken, waardoor mobiele responsiviteit essentieel is.

Je bento-boxen moeten passen bij verschillende schermformaten, net zoals je de juiste hoeveelheid bakjes kiest op basis van de hoeveelheid eten die je wilt meenemen. Of het nu gaat om kleine snacks of complete maaltijden, het ontwerp moet soepel meeschalen.

Een flexibele blokkenindeling is net zo handig als een bentobox die in elke tas past, stevig, veilig en ontworpen om morsen te voorkomen tijdens dagelijks gebruik of op reis.

Gebruik Bento voor betere prestaties in plaats van blokken die veel React gebruiken

Het voordeel van Bento zit hem in de prestaties. In plaats van te vertrouwen op zware, op React gebaseerde benaderingen, houdt Bento alles gestroomlijnd en efficiënt.

Het is alsof je kiest voor een milieuvriendelijke, magnetronbestendige, duurzame en lekvrije container in plaats van een grote, onhandige container die extra gewicht met zich meebrengt.

Met Bento ligt de focus op snelheid, minder afhankelijkheden en een overzichtelijkere ontwikkelomgeving. Dit is ideaal voor projecten die leuk, veilig, draagbaar en geoptimaliseerd voor prestaties moeten zijn.

Volg de WordPress-coderingsstandaarden

Zorg er tot slot altijd voor dat u zich aan de codeerstandaarden van WordPress houdt om compatibiliteit, onderhoudbaarheid en beveiliging te garanderen.

Net zoals producten uit Nederland of wereldwijd vertrouwde merken vaak kwaliteitsnormen stellen op het gebied van prijs, materiaal, capaciteit en strak design, zorgen coderingsnormen ervoor dat uw blokken van hoge kwaliteit, betrouwbaar en gemakkelijk met de hand te wassen of te onderhouden blijven, ook op de lange termijn.

Door de beste werkwijzen te volgen, creëer je Bento-blokken waar ontwikkelaars dol op zullen zijn en die ideaal blijven voor dagelijks en langdurig gebruik.

Meer informatie: Handleiding voor het maken van aangepaste blokken in WordPress

Slotgedachten

 Het gebruik van Bento met Gutenberg transformeert de ontwikkeling van codeblokken door workflows te vereenvoudigen, code-duplicatie te verminderen en de interactiviteit te verbeteren.

Met herbruikbare componenten, platformonafhankelijke compatibiliteit en ingebouwde toegankelijkheid stelt Bento ontwikkelaars in staat om moeiteloos krachtige, toekomstbestendige WordPress-blokken te creëren.

Door geavanceerde aanpassingsmogelijkheden te integreren en de prestaties te optimaliseren, kunt u naadloze ervaring zowel redacteuren als gebruikers

Of je nu bouwt voor persoonlijke projecten of opschaalt voor klanten, Bento biedt de tools om je Gutenberg-blokken eenvoudig en efficiënt naar een hoger niveau te tillen.