Blokken bouwen met Bento in WordPress

Het bouwen van aangepaste Gutenberg-blokken in WordPress is altijd een game-changer geweest voor ontwikkelaars. Hiermee kunt u unieke functionaliteit toevoegen en de blokeditor aanpassen aan uw behoeften. Maar laten we eerlijk zijn: traditionele methoden voor het maken van deze blokken vereisen vaak dat ontwikkelaars hun werk dupliceren, waarbij ze dezelfde functionaliteit twee keer opnieuw implementeren: één keer in React voor de editor en opnieuw voor de frontend. Dit verhoogt niet alleen de werklast, maar laat ook ruimte voor inconsistenties en onnodig onderhoudsgedoe.

Maak kennis met Bento : een veelzijdige toolkit met webcomponenten die de manier verandert waarop u Gutenberg-blokken maakt. Met Bento kunt u blokken maken die niet alleen goed presteren en toegankelijk zijn, maar ook eenvoudig te implementeren zijn dankzij de compatibiliteit met React en webcomponenten.

In deze handleiding laten we u zien hoe u de kracht van Bento kunt benutten om een ​​aangepast blok . We begeleiden u bij elke stap, van het opzetten van uw omgeving tot het maken van een interactieve carrousel met behulp van de Bento Carousel-component. Klaar om uw ontwikkelingsproces te stroomlijnen en nieuwe mogelijkheden te ontsluiten? Laten we erin duiken!

Bento en Gutenberg begrijpen

Bento is een verzameling hoogwaardige webcomponenten die zijn ontworpen om de webontwikkeling . Deze componenten zijn herbruikbaar, toegankelijk en compatibel met meerdere browsers, waardoor ze een betrouwbare keuze zijn voor ontwikkelaars die moderne webapplicaties bouwen. Wat Bento onderscheidt is zijn veelzijdigheid: het biedt componenten als React-, Preact- en aangepaste elementen, waardoor een naadloze integratie in verschillende omgevingen, waaronder WordPress, wordt gegarandeerd.

Met Bento kunnen ontwikkelaars:

• Elimineer overtollige codering 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 pagina's .

Gutenberg is de krachtige blokeditor van WordPress, gebouwd op React, waarmee gebruikers inhoud kunnen ontwerpen en structureren met behulp van blokken. Elk blok vertegenwoordigt een specifiek stukje functionaliteit, van tekst en afbeeldingen tot complexe aangepaste functies.

De echte magie van Gutenberg schuilt in de flexibiliteit: ontwikkelaars kunnen verder gaan dan de native WordPress-blokken en aangepaste blokken maken 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:

• Schrijf componenten één keer en gebruik ze consistent in de blokeditor en frontend.
• Verkort de ontwikkeltijd door overtollig werk te elimineren.
• Maak gebruik van goed geteste, veelzijdige componenten zoals carrousels, accordeons en meer.

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

Waarom Bento gebruiken voor de ontwikkeling van Gutenberg-blokken?

Het maken van aangepaste blokken voor Gutenberg kan een lonend maar uitdagend proces zijn. Ontwikkelaars moeten vaak jongleren tussen op React gebaseerde editorcomponenten en frontend-implementatie, wat resulteert in dubbele code en onderhoudsproblemen. Dit is waar Bento uitblinkt en een elegante oplossing biedt die het proces vereenvoudigt en een naadloze ervaring garandeert. Laten we onderzoeken waarom Bento de perfecte metgezel is voor de ontwikkeling van Gutenberg-blokken.

1. Vermijd codeduplicatie

Traditioneel omvat het bouwen van Gutenberg-blokken het tweemaal implementeren van functionaliteit:

• Component bewerken: gebouwd met React voor de blokeditor.
• Frontendcomponent: opnieuw geïmplementeerd zonder React voor weergave op de frontend.

Dit overtollige werk verlengt de ontwikkeltijd en creëert mogelijke discrepanties tussen de editor- en frontend-versies. Met Bento schrijft u de functionaliteit slechts één keer met behulp van de herbruikbare componenten, die naadloos in beide omgevingen werken.

2. Compatibiliteit tussen platforms

Bento-componenten zijn ontworpen om compatibel te zijn op meerdere platforms, waardoor consistent gedrag in verschillende browsers en apparaten wordt gegarandeerd. Of u nu in een op React gebaseerde Gutenberg-editor werkt of het blok op de frontend weergeeft, de componenten van Bento passen zich moeiteloos aan en zorgen voor een uniforme gebruikerservaring.

3. Toegankelijkheid kant-en-klaar

Toegankelijkheid is niet langer optioneel; het is essentieel voor het leveren van een geweldige gebruikerservaring. Bento-componenten zijn gebouwd met toegankelijkheid in gedachten en houden zich aan webstandaarden zoals ARIA-rollen en toetsenbordnavigatie. Dit zorgt ervoor dat uw Gutenberg-blokken inclusief en gebruiksvriendelijk zijn voor alle doelgroepen.

4. Hoge prestaties voor snellere websites

Bento-componenten zijn geoptimaliseerd voor snelheid en dragen bij aan het sneller laden van pagina's en verbeterde websiteprestaties . Dit is vooral belangrijk voor WordPress-sites , waar de prestaties een directe invloed kunnen hebben op de SEO-ranglijst en de gebruikerstevredenheid. Door de lichtgewicht en efficiënte componenten van Bento te gebruiken, zorgt u ervoor dat uw blokken uw site niet opblazen.

Uw ontwikkelomgeving instellen

Voordat u begint met het maken van een door Bento aangedreven Gutenberg-blok, is het essentieel dat uw ontwikkelomgeving correct is ingesteld. Een goed voorbereide omgeving zorgt voor een soepel ontwikkelingsproces en vermindert mogelijke problemen later. Volg de onderstaande stappen om alles klaar te maken.

Vereisten

Voordat u zich gaat verdiepen in de ontwikkeling van Bento-aangedreven Gutenberg-blokken, moet u ervoor zorgen dat u het volgende gereed heeft:

Node.js en npm geïnstalleerd:

• Installeer Node.js (inclusief npm) om afhankelijkheden te beheren en uw project te bouwen.
• Controleer de installatie door de volgende opdrachten in uw terminal uit te voeren:

knooppunt -v npm -v

WordPress lokaal geïnstalleerd:

• Zet een lokale WordPress-omgeving op met tools als Local by Flywheel, XAMPP of Docker.
• Zorg ervoor dat u toegang heeft tot de map wp-content/plugins om uw aangepaste plug-in te installeren en te activeren.

Bekendheid met React en Gutenberg:

• Zorg dat u een basiskennis heeft van React, aangezien dit de basis vormt voor de ontwikkeling van Gutenberg-blokken.
• Maak uzelf vertrouwd met de Gutenberg-blokstructuur, in het bijzonder hoe de bewerkings- en opslagfuncties werken.

@wordpress/create-block installeren

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

Voer de opdracht Create-Block uit:
Navigeer in uw terminal naar de met WordPress-plug-ins en voer de volgende opdracht uit om een ​​nieuwe blokplug-in te maken:

npx @wordpress/create-block geweldige carrousel

Hierdoor wordt een nieuwe plug-inmap gegenereerd met de naam awesome-carousel , die alle bestanden bevat die nodig zijn om de ontwikkeling te starten.

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

cd awesome-carrousel

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

npm beginnen

Deze opdracht compileert uw blokbestanden en let op wijzigingen tijdens de ontwikkeling.

Activeer de plug-in in WordPress:

Ga naar het WordPress-beheerdersdashboard .

Navigeer naar Plug-ins > Geïnstalleerde plug-ins en activeer de Awesome Logo Carousel .

Uw aangepaste plug-in is nu actief en er is een basisblok beschikbaar in de Gutenberg-editor.

Een aangepast Bento-blok maken: stapsgewijze handleiding

Het bouwen van een aangepast, door Bento aangedreven Gutenberg-blok begint met de juiste voorbereiding, waaronder het opzetten van de plug-instructuur, het installeren van de vereiste Bento-componenten en het weergeven van uw eerste blok in de editor. Volg deze stapsgewijze handleiding om een ​​naadloos en functioneel carrouselblok te creëren.

Leer : Hoe u uw WordPress-site kunt bouwen met het Underscores-thema

Initiële installatie

Als u aan de slag gaat met de eerste 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 plug-instructuur die kan worden uitgebreid met Bento-componenten. Deze opstelling biedt alle benodigde bestanden en configuraties voor een naadloze ontwikkeling.

Maak de blokplug-in met @wordpress/create-block

Gebruik de tool @wordpress/create-block om een ​​nieuwe blokplug-in te bouwen. Hierdoor worden alle benodigde bestanden en mappen gegenereerd, waardoor een kant-en-klare structuur ontstaat.

Voer de volgende opdracht uit:

 npx @wordpress/create-block geweldige carrousel

een nieuwe map met de naam awesome-carousel aangemaakt in uw WordPress-plug-insmap.

Navigeer naar de plug-inmap

Ga naar de nieuw gemaakte blokmap:

cd awesome-carrousel

Start de ontwikkelingsserver

Start de ontwikkelomgeving, die tijdens de ontwikkeling compileert en op veranderingen let: npm start

Activeer de plug-in in WordPress

• Log in op uw WordPress-beheerdersdashboard.
• Navigeer naar Plug-ins > Geïnstalleerde plug-ins , zoek de Awesome Carousel- plug-in en activeer deze.

Nu de initiële installatie voltooid is, heb je nu een standaard Gutenberg-blokplug-in klaar voor aanpassing.

Ontdekken : stapsgewijze handleiding voor het bouwen van een Web3-website met WordPress

Bento-componenten installeren

Het integreren van Bento-componenten in uw blok is een cruciale stap die het volledige potentieel van herbruikbaarheid en prestaties ontgrendelt. De Bento Base Carousel-component fungeert als de ruggengraat van uw aangepaste blok en biedt een vooraf gebouwde maar toch flexibele carrouselfunctionaliteit. Met slechts een paar opdrachten kunt u de toegankelijkheid en platformonafhankelijke compatibiliteit van Bento in uw project integreren.

Installeer het Bento-basiscarrouselonderdeel

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

Importeer Bento Carrousel in het blok

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

importeer { BentoBaseCarousel } uit '@bentoproject/base-carousel/react'; importeer '@bentoproject/base-carousel/styles.css';

De BentoBaseCarousel React-component biedt carrouselfunctionaliteit, terwijl de CSS

 zorgt voor de juiste styling voor zowel de editor als de frontend.

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

Weet ook: Hoe u een SaaS-website bouwt met WordPress

 Rendering van de carrousel in Gutenberg

Door de carrousel in Gutenberg weer te geven, kunt u Bento in actie zien in de WordPress-blokeditor. Deze stap is gericht op het integreren van de BentoBaseCarousel React-component en het garanderen dat deze naar verwachting functioneert. Je leert ook hoe je het blok kunt stylen, zodat het er zowel in de editor als in de frontend geweldig uitziet. Aan het einde van deze stap heb je een werkend carrouselblok dat de kracht van Bento laat zien.

Werk de bewerkingscomponent bij

Open het bestand src/edit.js en werk de component Bewerken bij zodat deze de BentoBaseCarousel bevat:

mport { useBlockProps } van '@wordpress/block-editor'; importeer { BentoBaseCarousel } uit '@bentoproject/base-carousel/react'; importeer '@bentoproject/base-carousel/styles.css'; standaardfunctie exporteren 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 reeks voorbeeldafbeeldingen.

Voeg carrouselspecifieke 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 > * { beeldverhouding: 1200 / 800; }

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

Bekijk een voorbeeld van het carrouselblok in de editor

Sla uw wijzigingen op en bouw het blok opnieuw op met behulp van de ontwikkelingsserver (npm start als dit 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 uw door Bento aangedreven Gutenberg-blok functioneel in de editor. In de volgende stappen kunt u de interactiviteit verbeteren en optimaliseren voor frontend-prestaties.

Lezen : Hoe maak je een WordPress-afbeeldingscarrousel?

Interactiviteit toevoegen aan Bento-blokken

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

Gebruikersinteractie in de Editor

Om de carrousel interactief te maken binnen de Gutenberg-editor, kunnen aangepaste knoppen voor navigatie (bijvoorbeeld Volgende en Vorige) worden toegevoegd. Door de API van Bento te gebruiken, kunt u de carrouselfunctionaliteit rechtstreeks in React beheren.

Werk eerst uw src/edit.js-bestand bij met navigatiebesturingselementen. Gebruik de createRef-functie om toegang te krijgen tot de API van de carrousel. Bijvoorbeeld:

importeer { createRef } uit '@wordpress/element'; importeer { Knop } uit '@wordpress/components'; standaardfunctie exporteren Edit() { const ref = createRef(); const goToNextSlide = () => ref.current.next(); const goToPreviousSlide = () => ref.current.prev(); opbrengst ( <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={goToNextSlide}>Vorige</button> <Button isSecondary onClick={goToPreviousSlide}>Volgende</button></div> ); }

Controleer : de beste WordPress-blokthema's verkennen

Met deze knoppen kan de gebruiker rechtstreeks in de blokeditor door de carrousel navigeren, waardoor deze interactief en gebruiksvriendelijk wordt.

Gebruikersinteractie op de frontend

De interactiviteit op de frontend 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 met de carrousel- en navigatieknoppen:

standaardfunctie exporteren 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-next">Vorige</button> <button className="awesome-carousel-prev">Volgende</button></div></div> ); }

Om de navigatieknoppen op de frontend in te schakelen, maakt u een src/view.js-bestand. Dit bestand werkt samen met de Bento-API om gebruikersacties af te handelen:

standaardfunctie exporteren 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-next">Vorige</button> <button className="awesome-carousel-prev">Volgende</button></div></div> ); }

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

Lezen : Wat zijn WordPress-blokpatronen?

Styling en frontend-optimalisatie

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

Om de prestaties te optimaliseren, laadt u stijlen dynamisch met behulp van PHP. Update uw plugin.php-bestand om stijlen alleen te registreren en in de wachtrij te plaatsen 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');

Activa registreren en render-callbacks beheren

Door middelen efficiënt te laden, blijft uw blok licht van gewicht. Gebruik PHP's render_callback om scripts en stijlen alleen te laden als het blok op de pagina aanwezig is. Wijzig het plugin.php-bestand als volgt:

functie 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-basis-carrousel'); } retourneer $inhoud; } add_action('init', 'create_block_awesome_carousel_block_init');

Dit zorgt ervoor dat scripts en stijlen alleen worden geladen op pagina's waarop het blok wordt weergegeven, waardoor de algehele prestaties van de site worden verbeterd.

Laatste gedachten

 Het gebruik van Bento met Gutenberg transformeert de blokontwikkeling door workflows te vereenvoudigen, duplicatie van code te verminderen en de interactiviteit te verbeteren. Met herbruikbare componenten, platformonafhankelijke compatibiliteit en ingebouwde toegankelijkheid stelt Bento ontwikkelaars in staat moeiteloos goed presterende, toekomstbestendige WordPress-blokken te creëren. Door geavanceerde aanpassingen te integreren en de prestaties te optimaliseren, kunt u zowel redacteuren als gebruikers een naadloze ervaring bieden. Of u nu bouwt voor persoonlijke projecten of opschaalt voor klanten, Bento biedt de tools om uw Gutenberg-blokken met gemak en efficiëntie naar een hoger niveau te tillen.