Hur man bygger block med Bento i WordPress år 2025?

Att designa moderna webbplatser i WordPress har aldrig varit effektivare, särskilt med möjligheten att bygga block med Bento. Den här funktionen ger dig kreativ frihet utan besväret med extra kodning eller skrymmande plugins.

Med Bento kan du skapa rena, responsiva layouter som passar sömlöst in i din webbdesign, oavsett om du siktar på en minimalistisk look, en djärv rutnätslayout eller en balanserad sidstruktur. Den är byggd för att spara tid, förenkla designen och hjälpa även nybörjare att skapa professionella sektioner.

Utöver bara grafik säkerställer Bento även prestanda och responsivitet. Varje block du skapar justeras smidigt över olika enheter, vilket gör att din webbplats ser snygg ut på datorer, surfplattor och mobiler.

För bloggare, småföretagare eller utvecklare innebär flexibiliteten att bygga block med Bento mer kontroll, snabbare arbetsflöden och design som sticker ut.

I den här guiden guidar vi dig steg för steg genom processen för att få ut det mesta av Bento i WordPress, så att du kan frigöra dess fulla potential för dina webbplatsprojekt.

Att förstå Bento och Gutenberg

Bento är en samling högpresterande webbkomponenter utformade för att förenkla och förbättra webbutveckling. Dessa komponenter är återanvändbara, tillgängliga och kompatibla med flera webbläsare, vilket gör dem till ett pålitligt val för utvecklare som bygger moderna webbapplikationer.

Det som skiljer Bento från mängden är dess mångsidighet. Den erbjuder komponenter som React, Preact och anpassade element, vilket säkerställer sömlös integration i olika miljöer, inklusive WordPress.

Med Bento kan utvecklare:

• Eliminera redundant kodning genom att utnyttja återanvändbara komponenter.

• Säkerställ tillgänglighet och en smidig användarupplevelse på alla enheter.

• Använd högoptimerade komponenter som bidrar till snabbare sidinläsningstider.

Gutenberg är WordPress kraftfulla blockredigerare, byggd på React, som låter användare designa och strukturera innehåll med hjälp av block. Varje block representerar en specifik funktionalitet, från text och bilder till komplexa anpassade funktioner.

Gutenbergs verkliga magi ligger i dess flexibilitet, utvecklare kan gå bortom de inbyggda WordPress-blocken och skapa anpassade block skräddarsydda efter specifika behov.

Den traditionella metoden för att bygga dessa block kräver dock ofta att funktionaliteten kodas två gånger: en gång för React-editorn och en gång för frontend. Denna duplicering kan leda till ineffektivitet och inkonsekvenser.

Varför kombinera Bento med Gutenberg?

Bento överbryggar detta gap genom att göra det möjligt för utvecklare att:

• Skriv komponenter en gång och använd dem konsekvent i blockredigeraren och frontend.

• Minska utvecklingstiden genom att eliminera överflödigt arbete.

• Utnyttja välbeprövade, funktionsrika komponenter som karuseller, dragspel och mer.

Genom att kombinera Bento med Gutenberg får utvecklare ett smidigt och effektivt sätt att skapa anpassade WordPress-block som är både funktionella och visuellt tilltalande. I nästa avsnitt ska vi utforska hur Bento kan förenkla ditt utvecklingsarbetsflöde.

Varför använda Bento för Gutenberg-blockutveckling?

Att skapa anpassade block för Gutenberg kan vara en givande men utmanande process. Utvecklare jonglerar ofta mellan React-baserade editorkomponenter och frontend-implementering, vilket resulterar i duplicerad kod och underhållsproblem. Det är här Bento lyser upp, och erbjuder en elegant lösning som förenklar processen och säkerställer en sömlös upplevelse.

Låt oss utforska varför Bento är den perfekta följeslagaren för Gutenberg-blockutveckling.

Undvik kodduplicering

Traditionellt sett innebär det att bygga Gutenberg-block att implementera funktionalitet två gånger:

• Redigeringskomponent: Byggd med React för blockredigeraren.

• Frontend-komponent: Återimplementerad utan React för rendering på frontend.

Detta redundanta arbete ökar utvecklingstiden och skapar potentiella skillnader mellan editorn och frontend-versionerna. Med Bento skriver du bara funktionaliteten en gång med hjälp av dess återanvändbara komponenter, som fungerar sömlöst i båda miljöerna.

Kompatibilitet mellan plattformar

Bento-komponenter är utformade för att vara kompatibla över flera plattformar, vilket säkerställer konsekvent beteende i olika webbläsare och enheter.

Oavsett om du arbetar i en React-baserad Gutenberg-editor eller renderar blocket i frontend, anpassar sig Bentos komponenter enkelt och ger en enhetlig användarupplevelse.

Tillgänglighet direkt från början

Tillgänglighet är inte längre valfritt, det är avgörande för att leverera en bra användarupplevelse.

Bento-komponenter är byggda med tillgänglighet i åtanke och följer webbstandarder som ARIA-roller och tangentbordsnavigering. Detta säkerställer att dina Gutenberg-block är inkluderande och användarvänliga för alla målgrupper.

Hög prestanda för snabbare webbplatser

Bento-komponenter är optimerade för hastighet, vilket bidrar till snabbare sidinläsningar och förbättrad webbplatsprestanda.

Detta är särskilt viktigt för WordPress-webbplatser, där prestanda direkt kan påverka SEO-rankningar och användarnöjdhet. Genom att använda Bentos lätta och effektiva komponenter säkerställer du att dina block inte sväller upp din webbplats.

Konfigurera din utvecklingsmiljö

Innan du börjar skapa ett Bento-drivet Gutenberg-block är det viktigt att din utvecklingsmiljö är korrekt konfigurerad. En väl förberedd miljö säkerställer en smidig utvecklingsprocess och minskar potentiella problem senare. Följ stegen nedan för att förbereda allt.

Förkunskapskrav

Innan du börjar med Bento-driven Gutenberg-blockutveckling, se till att du har följande redo:

Node.js och npm installerade:

• Installera Node.js (som inkluderar npm) för att hantera beroenden och bygga ditt projekt.

• Verifiera installationen genom att köra följande kommandon i din terminal:

nod -v npm -v

WordPress installerat lokalt:

• Konfigurera en lokal WordPress-miljö med verktyg som Local by Flywheel, XAMPP eller Docker.

• Se till att du har åtkomst till katalogen wp-content/plugins för att installera och aktivera ditt anpassade plugin.

Bekantskap med React och Gutenberg:

• Ha en grundläggande förståelse för React eftersom det är grunden för Gutenberg-blockutveckling.

• Bekanta dig med Gutenbergs blockstruktur, särskilt hur redigerings- och sparningsfunktionerna fungerar.

Installerar @wordpress/create-block

Verktyget @wordpress/create-block förenklar processen att skapa anpassade Gutenberg-block. Så här konfigurerar du det:

Kör kommandot Create-Block:
I din terminal, navigera till katalogen för WordPress-plugins och kör följande kommando för att skapa ett nytt block-plugin:

npx @wordpress/create-block fantastisk-karusell

Detta genererar en ny plugin-mapp som heter awesome-carousel, som innehåller alla filer som behövs för att starta utvecklingen.

Navigera till plugin-katalogen:
Flytta till den nyskapade katalogen:

cd fantastisk karusell

Starta utvecklingsmiljön:
Kör följande kommando för att initiera utvecklingsservern:

npm-start

Det här kommandot kompilerar dina blockfiler och övervakar ändringar under utvecklingen.

Aktivera pluginet i WordPress:

Gå till WordPress administratörspanel.

Navigera till Plugins ⟶ Installerade pluginsoch aktivera Awesome Logo Carousel .

Ditt anpassade plugin är nu aktivt och ett grundläggande block finns tillgängligt i Gutenberg-redigeraren.

Skapa ett anpassat bentoblock: Steg-för-steg-guide

Att bygga ett anpassat Bento-drivet Gutenberg-block börjar med ordentlig förberedelse, vilket inkluderar att konfigurera plugin-strukturen, installera de nödvändiga Bento-komponenterna och rendera ditt första block i redigeraren. Följ den här steg-för-steg-guiden för att skapa ett sömlöst och funktionellt karusellblock.

Initial installation

Att komma igång med den initiala installationen säkerställer att ditt projekt har rätt grund för att bygga ett anpassat Gutenberg-block. Genom att följa dessa steg skapar du en fullt fungerande plugin-struktur som kan utökas med Bento-komponenter. Denna installation tillhandahåller alla nödvändiga filer och konfigurationer för sömlös utveckling.

Skapa Block-pluginet med @wordpress/create-block

Använd verktyget @wordpress/create-block för att skapa ett nytt block-plugin. Detta genererar alla nödvändiga filer och kataloger, vilket ger en färdig struktur.

Kör följande kommando:

 npx @wordpress/create-block fantastisk-karusell

En ny katalog med namnet awesome-carousel kommer att skapas i din WordPress-plugin-mapp.

Navigera till plugin-katalogen

Flytta till den nyskapade blockkatalogen:

cd fantastisk karusell

Starta utvecklingsservern

Starta utvecklingsmiljön, som kompilerar och övervakar ändringar under utvecklingen: npm start

Aktivera pluginet i WordPress

• Logga in på din WordPress-administratörspanel.

• Navigera till Plugins ⟶ Installerade plugins, leta reda på Awesome Carousel och aktivera det.

När den första installationen är klar har du nu ett grundläggande Gutenberg-block-plugin redo för anpassning.

Utforska: Steg-för-steg-guide om hur man bygger en Web3-webbplats med WordPress

Installera Bento-komponenter

Att integrera Bento-komponenter i ditt block är ett avgörande steg som frigör den fulla potentialen för återanvändbarhet och prestanda.

Bento Base Carousel-komponenten fungerar som ryggraden i ditt anpassade block och ger en förbyggd men flexibel karusellfunktionalitet. Med bara några få kommandon kan du integrera Bentos tillgänglighet och plattformsoberoende kompatibilitet i ditt projekt.

Installera Bento Base-karusellkomponenten

Installera Bento Base Carousel-komponenten med npm: npm install –save @bentoproject/base-carousel

Importera Bento-karusellen i blocket

Öppna filen src/edit.js och lägg till följande importfiler:

importera { BentoBaseCarousel } från '@bentoproject/base-carousel/react'; importera '@bentoproject/base-carousel/styles.css';

BentoBaseCarousel React-komponenten tillhandahåller karusellfunktionalitet, medan CSS

säkerställer korrekt styling för både editorn och frontend.

Med Bento installerat och importerat är du redo att rendera ditt första karusellblock i Gutenberg.

Läs också: Hur man bygger en SaaS-webbplats med WordPress

Rendera karusellen i Gutenberg

Genom att rendera karusellen i Gutenberg kan du se Bento i aktion i WordPress blockredigerare. Det här steget fokuserar på att integrera BentoBaseCarousel React-komponenten och säkerställa att den fungerar som förväntat.

Du lär dig också hur du utformar blocket och säkerställer att det ser bra ut både i editorn och i frontend. I slutet av det här steget har du ett fungerande karusellblock som visar upp kraften i Bento.

Uppdatera redigeringskomponenten

Öppna filen src/edit.js och uppdatera redigeringskomponenten för att inkludera BentoBaseCarousel:

importera { useBlockProps } från '@wordpress/block-editor'; importera { BentoBaseCarousel } från '@bentoproject/base-carousel/react'; importera '@bentoproject/base-carousel/styles.css'; exportera standardfunktionen Redigera() { returnera (} } <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Bild 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Bild 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Bild 3" /></BentoBaseCarousel></div></div> ); }

Den här koden integrerar Bento Base Carousel-komponenten med en uppsättning exempelbilder.

Lär dig: Hur du bygger din WordPress-webbplats med Underscores-temat

Lägg till karusellspecifik CSS

Öppna filen src/style.scss och lägg till följande CSS för att säkerställa att karusellen har konsekventa dimensioner:

wp-block-create-block-awesome-carousel.awesome-carousel-wrapper, .wp-block-create-block-awesome-carousel.awesome-carousel-wrapper > * { bildförhållande: 1200 / 800; }

Detta säkerställer att karusellen bibehåller sitt bildförhållande på alla enheter och ser professionell ut.

Förhandsgranska karusellblocket i redigeraren

Spara dina ändringar och bygg om blocket med hjälp av utvecklingsservern (npm start om den inte redan körs).

Gå till WordPress blockredigerare, lägg till Awesome Carousel och se karusellen i aktion.

I det här skedet är ditt Bento-drivna Gutenberg-block funktionellt i redigeraren. I nästa steg kan du förbättra dess interaktivitet och optimera det för frontend-prestanda.

Läs: Hur man skapar en WordPress-bildkarusell

Lägga till interaktivitet i Bento-block

Interaktivitet är nyckeln till att skapa engagerande block i WordPress. Med Bentos robusta API kan du lägga till dynamiska funktioner som navigeringskontroller som gör att användare kan interagera med ditt karusellblock sömlöst, både i redigeraren och på frontend.

Användarinteraktion i redigeraren

För att göra karusellen interaktiv i Gutenberg-redigeraren kan anpassade knappar för navigering (t.ex. Nästa och Föregående) läggas till. Genom att använda Bentos API kan du styra karusellens funktionalitet direkt i React.

Uppdatera först din src/edit.js-fil så att den inkluderar navigeringskontroller. Använd funktionen createRef för att komma åt karusellens API. Till exempel:

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 () ;    Behöver du en specifik funktion? } <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="Bild 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Bild 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Bild 3" /></BentoBaseCarousel></div> <Button isSecondary onClick={goToPreviousSlide}>Föregående</button> <Button isSecondary onClick={goToNextSlide}>Nästa</button></div> ); }

Kolla: Utforska de bästa WordPress-blockteman

Dessa knappar låter användaren navigera karusellen direkt i blockredigeraren ,vilket gör den interaktiv och användarvänlig.

Användarinteraktion på frontend

Interaktiviteten i frontend speglar redigerarens funktionalitet. Istället för React-komponenter används dock Bentos inbyggda anpassade element. Uppdatera src/save.js-filen för att inkludera karusellen och navigeringsknapparna:

exportera standardfunktionen spara() { returnera ( <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="Bild 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Bild 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Bild 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Föregående</button> <button className="awesome-carousel-next">Nästa</button></div></div> ); }

För att aktivera navigeringsknapparna på gränssnittet, skapa en src/view.js-fil. Den här filen interagerar med Bentos API för att hantera användaråtgärder:

exportera standardfunktionen spara() { returnera ( <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="Bild 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Bild 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Bild 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Föregående</button> <button className="awesome-carousel-next">Nästa</button></div></div> ); }

Det här skriptet säkerställer att navigeringsknapparna interagerar sömlöst med karusellen på gränssnittet.

Läs: Vad är WordPress-blockmönster

Styling och frontend-optimering

Korrekt styling och optimering är avgörande för att blocket ska se bra ut och fungera bra i både editorn och frontend. Använd filen src/style.scss för att definiera stilar specifika för din karusell och se till att den är visuellt konsekvent över olika enheter. Undvik att använda generiska klassnamn för att förhindra konflikter med andra teman eller plugins.

För att optimera prestandan, ladda stilar dynamiskt med PHP. Uppdatera din plugin.php-fil för att registrera och köa stilar endast när blocket renderas:

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'); }   * ..

Registrera resurser och hantera renderingsanrop

Att effektivt ladda resurser säkerställer att ditt block förblir lättviktigt. Använd PHP:s render_callback för att endast ladda skript och stilar när blocket finns på sidan. Ändra plugin.php-filen enligt följande:

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');


Detta säkerställer att skript och stilar bara laddas på sidor där blocket renderas, vilket förbättrar webbplatsens övergripande prestanda.

Bästa praxis för utveckling av bentoblock

När du arbetar med Bento-block i WordPress, säkerställer du att blocken förblir effektiva, återanvändbara och användarvänliga genom att följa bästa praxis.

Håll blocken lätta och återanvändbara

Precis som en Bento-matlåda är indelad i prydliga fack för måltider, snacks, frukt och till och med barnmat, bör dina block också vara modulära och återanvändbara.

Fokusera på rena materialval i din kod och se till att varje block är robust, hållbart och inte överbelastat med onödiga funktioner.

Detta gör dem mer portabla, enklare att förvara och praktiska för daglig användning, ungefär som en miljövänlig, läckagesäker, diskmaskinssäker lunchbehållare som du kan ta med dig överallt, från picknick till resor.

Säkerställ tillgänglighet (semantisk HTML och ARIA-attribut)

Tillgänglighet är grunden för att bygga säkra och trevliga upplevelser. Genom att använda semantisk HTML och ARIA-roller på rätt sätt blir dina Bento-block mer inkluderande.

Tänk på det som att se till att en behållare är mikrovågssäker, diskmaskinssäker och handdiskbar, alla borde kunna använda den, oavsett preferens.

Korrekt märkning förhindrar också problem som att innehållet "spills" eller läcker vid navigering med hjälpmedel, vilket säkerställer att användarna kan njuta av ditt innehåll precis som de skulle njuta av mat som förvaras i en väldesignad produkt som undviker oönskade lukter.

Optimera för mobilresponsivitet

I dagens värld interagerar användare med webbplatser på flera enheter, vilket gör mobilresponsivitet avgörande.

Dina Bento-block bör matcha olika skärmstorlekar, ungefär som att välja rätt kapacitet eller antal behållare baserat på hur mycket mat du behöver packa. Oavsett om det gäller små mellanmål eller hela måltider, bör designen vara skalbar.

En responsiv blocklayout är lika bekväm som en Bentobox som får plats i vilken väska som helst, robust, säker och utformad för att förhindra spill under daglig användning eller resor.

Använd Bento för prestanda framför reaktionstunga block

Bentos fördel ligger i dess prestanda. Istället för att förlita sig på tunga React-baserade metoder, håller Bento saker och ting strömlinjeformade och effektiva.

Det är som att välja en miljövänlig, mikrovågssäker, hållbar och läckagesäker behållare framför en skrymmande som lägger till extra vikt.

Med Bento fokuserar du på hastighet, färre beroenden och en renare utvecklarupplevelse, perfekt för projekt som behöver vara roliga, säkra, portabla och optimerade för prestanda.

Följ WordPress kodningsstandarder

Slutligen, anpassa dig alltid till WordPress kodningsstandarder för att säkerställa kompatibilitet, underhållbarhet och säkerhet.

Precis som produkter från Nederländerna eller globalt betrodda varumärken ofta sätter kvalitetsriktmärken för pris, material, kapacitet och ren design, säkerställer kodningsstandarder att dina block förblir högkvalitativa, pålitliga och enkla att handtvätta eller "underhålla" i längden.

Genom att följa bästa praxis skapar du Bento-block som utvecklare kommer att älska och som förblir idealiska för daglig och långvarig användning.

Läs mer: Guide för att skapa anpassade block i WordPress

Slutliga tankar

 Att använda Bento med Gutenberg förvandlar blockutveckling genom att förenkla arbetsflöden, minska koddubblering och förbättra interaktiviteten.

Med återanvändbara komponenter, plattformsoberoende kompatibilitet och inbyggd tillgänglighet ger Bento utvecklare möjlighet att enkelt skapa högpresterande, framtidssäkra WordPress-block.

Genom att integrera avancerade anpassningar och optimera prestanda kan du leverera en sömlös upplevelse för både redaktörer och användare.

Oavsett om du bygger för personliga projekt eller skalar upp för kunder, tillhandahåller Bento verktygen för att enkelt och effektivt ta dina Gutenberg-block till nästa nivå.