Come creare blocchi con Bento in WordPress nel 2025?

Progettare siti web moderni in WordPress non è mai stato così efficiente, soprattutto con la possibilità di creare blocchi con Bento . Questa funzionalità ti offre la massima libertà creativa, senza la necessità di dover scrivere codice aggiuntivo o installare plugin ingombranti.

Con Bento puoi creare layout puliti e responsive che si integrano perfettamente nel design del tuo sito web, che tu voglia un look minimale, un layout a griglia audace o una struttura di pagina bilanciata. È progettato per risparmiare tempo, semplificare la progettazione e aiutare anche i principianti a creare sezioni di qualità professionale.

Oltre all'aspetto grafico, Bento garantisce anche prestazioni e reattività . Ogni blocco creato si adatta perfettamente a tutti i dispositivi, rendendo il sito ottimizzato su desktop, tablet e dispositivi mobili.

Per i blogger, i titolari di piccole imprese o gli sviluppatori, la flessibilità di creare blocchi con Bento significa maggiore controllo, flussi di lavoro più rapidi e design che si distinguono.

In questa guida ti guideremo passo dopo passo attraverso il processo per sfruttare al meglio Bento in WordPress , così potrai sfruttare tutto il suo potenziale per i progetti del tuo sito web.

Capire Bento e Gutenberg

Bento è una raccolta di componenti web ad alte prestazioni progettati per semplificare e migliorare lo sviluppo web . Questi componenti sono riutilizzabili, accessibili e compatibili con tutti i browser, il che li rende una scelta affidabile per gli sviluppatori che creano applicazioni web moderne.

Ciò che distingue Bento è la sua versatilità: offre componenti come React, Preact ed elementi personalizzati, garantendo un'integrazione perfetta in vari ambienti, tra cui WordPress.

Con Bento, gli sviluppatori possono:

• Elimina la codifica ridondante sfruttando componenti riutilizzabili.

• Garantire l'accessibilità e un'esperienza utente fluida su tutti i dispositivi.

• Utilizza componenti altamente ottimizzati che contribuiscono a tempi di caricamento delle pagine più rapidi .

Gutenberg è il potente editor a blocchi di WordPress, basato su React, che consente agli utenti di progettare e strutturare i contenuti utilizzando blocchi. Ogni blocco rappresenta una funzionalità specifica, da testo e immagini a complesse funzionalità personalizzate.

La vera magia di Gutenberg risiede nella sua flessibilità: gli sviluppatori possono andare oltre i blocchi nativi di WordPress e crearne di personalizzati, adattati alle esigenze specifiche.

Tuttavia, il metodo tradizionale di creazione di questi blocchi richiede spesso di codificare la funzionalità due volte: una per l'editor React e una per il frontend. Questa duplicazione può portare a inefficienze e incoerenze.

Perché abbinare Bento a Gutenberg?

Bento colma questa lacuna consentendo agli sviluppatori di:

• Scrivi i componenti una sola volta e utilizzali in modo coerente nell'editor a blocchi e nel frontend.

• Ridurre i tempi di sviluppo eliminando il lavoro ridondante.

• Sfrutta componenti collaudati e ricchi di funzionalità, come caroselli, fisarmoniche e altro ancora.

Combinando Bento con Gutenberg, gli sviluppatori hanno a disposizione un modo semplice ed efficiente per creare blocchi WordPress personalizzati, funzionali e visivamente accattivanti. Nella prossima sezione, esploreremo come Bento può semplificare il flusso di lavoro di sviluppo .

Perché utilizzare Bento per lo sviluppo dei blocchi Gutenberg?

Creare blocchi personalizzati per Gutenberg può essere un processo gratificante ma impegnativo. Gli sviluppatori si trovano spesso a dover destreggiarsi tra componenti dell'editor basati su React e l'implementazione del frontend, con il risultato di codice duplicato e problemi di manutenzione. È qui che Bento eccelle, offrendo una soluzione elegante che semplifica il processo e garantisce un'esperienza fluida.

Scopriamo perché Bento è il compagno perfetto per lo sviluppo dei blocchi Gutenberg.

Evita la duplicazione del codice

Tradizionalmente, la creazione di blocchi Gutenberg implica l'implementazione della funzionalità due volte:

• Modifica componente: realizzato con React per l'editor a blocchi.

• Componente frontend: reimplementato senza React per il rendering sul frontend.

Questo lavoro ridondante aumenta i tempi di sviluppo e crea potenziali discrepanze tra la versione dell'editor e quella del frontend. Con Bento, le funzionalità vengono scritte una sola volta, utilizzando i suoi componenti riutilizzabili, che funzionano perfettamente in entrambi gli ambienti.

Compatibilità multipiattaforma

I componenti Bento sono progettati per essere compatibili su più piattaforme, garantendo un comportamento coerente su diversi browser e dispositivi.

Che tu stia lavorando in un editor Gutenberg basato su React o eseguendo il rendering del blocco sul frontend, i componenti di Bento si adattano senza sforzo, offrendo un'esperienza utente uniforme.

Accessibilità immediata

L'accessibilità non è più un optional, ma è essenziale per offrire un'esperienza utente ottimale.

I componenti Bento sono progettati tenendo conto dell'accessibilità, aderendo a standard web come i ruoli ARIA e la navigazione da tastiera. Questo garantisce che i blocchi Gutenberg siano inclusivi e intuitivi per tutti i tipi di pubblico.

Alte prestazioni per siti web più veloci

I componenti Bento sono ottimizzati per la velocità, contribuendo a caricare le pagine più velocemente e a migliorare le prestazioni del sito web .

Questo è particolarmente importante per i siti WordPress , dove le prestazioni possono avere un impatto diretto sul posizionamento SEO e sulla soddisfazione degli utenti. L'utilizzo dei componenti leggeri ed efficienti di Bento garantisce che i blocchi non appesantiscano il sito.

Configurazione dell'ambiente di sviluppo

Prima di iniziare a creare un blocco Gutenberg basato su Bento, è essenziale configurare correttamente l'ambiente di sviluppo. Un ambiente ben preparato garantisce un processo di sviluppo fluido e riduce potenziali problemi futuri. Segui i passaggi seguenti per preparare tutto.

Prerequisiti

Prima di immergerti nello sviluppo di blocchi Gutenberg basati su Bento, assicurati di avere a disposizione quanto segue:

Node.js e npm installati:

• Installa Node.js (che include npm) per gestire le dipendenze e creare il tuo progetto.

• Verificare l'installazione eseguendo i seguenti comandi nel terminale:

nodo -v npm -v

WordPress installato localmente:

• Configura un ambiente WordPress locale utilizzando strumenti come Local by Flywheel, XAMPP o Docker.

• Assicurati di avere accesso alla directory wp-content/plugins per installare e attivare il tuo plugin personalizzato.

Familiarità con React e Gutenberg:

• È necessario avere una conoscenza di base di React, poiché è la base per lo sviluppo dei blocchi Gutenberg.

• Familiarizza con la struttura a blocchi di Gutenberg, in particolare con il funzionamento delle funzioni di modifica e salvataggio.

Installazione di @wordpress/create-block

Lo strumento @wordpress/create-block semplifica il processo di creazione di blocchi Gutenberg personalizzati. Ecco come configurarlo:

Esegui il comando Create-Block:
nel terminale, vai alla directory dei plugin di WordPress ed esegui il seguente comando per creare un nuovo plugin di blocco:

npx @wordpress/crea-block awesome-carousel

Verrà generata una nuova cartella del plugin denominata awesome-carousel , contenente tutti i file necessari per avviare lo sviluppo.

Passare alla directory dei plugin:
spostarsi nella directory appena creata:

cd fantastico-carosello

Avviare l'ambiente di sviluppo:
eseguire il seguente comando per inizializzare il server di sviluppo:

avvio npm

Questo comando compila i file di blocco e controlla le modifiche durante lo sviluppo.

Attiva il plugin in WordPress:

Vai alla dashboard di amministrazione di WordPress .

Vai su Plugin ⟶ Plugin installati e attiva il Awesome Logo Carousel .

Il tuo plugin personalizzato è ora attivo e un blocco di base è disponibile nell'editor Gutenberg.

Creazione di un blocco Bento personalizzato: guida passo passo

La creazione di un blocco Gutenberg personalizzato basato su Bento inizia con un'adeguata preparazione, che include la configurazione della struttura del plugin, l'installazione dei componenti Bento necessari e il rendering del primo blocco nell'editor. Segui questa guida passo passo per creare un blocco carosello fluido e funzionale.

Configurazione iniziale

Iniziare con la configurazione iniziale assicura che il progetto abbia le basi giuste per creare un blocco Gutenberg personalizzato. Seguendo questi passaggi, creerai una struttura di plugin completamente funzionale, espandibile con componenti Bento. Questa configurazione fornisce tutti i file e le configurazioni necessarie per uno sviluppo fluido.

Crea il plugin Block usando @wordpress/create-block

Utilizza lo strumento @wordpress/create-block per creare un nuovo plugin di blocchi. Questo genererà tutti i file e le directory necessari, fornendo una struttura pronta all'uso.

Eseguire il seguente comando:

 npx @wordpress/crea-block awesome-carousel

Verrà creata una nuova directory denominata awesome-carousel

Vai alla directory dei plugin

Spostarsi nella directory dei blocchi appena creata:

cd fantastico-carosello

Avviare il server di sviluppo

Avvia l'ambiente di sviluppo, che compila e controlla le modifiche durante lo sviluppo: npm start

Attiva il plugin in WordPress

• Accedi alla dashboard di amministrazione di WordPress.

• Vai su Plugin ⟶ Plugin installati , individua il Awesome Carousel e attivalo.

Una volta completata la configurazione iniziale, avrai a disposizione un plugin di base per blocchi Gutenberg pronto per la personalizzazione.

Esplora : Guida passo passo su come creare un sito Web3 con WordPress

Installazione dei componenti Bento

L'integrazione dei componenti Bento nel tuo blocco è un passaggio fondamentale che libera tutto il potenziale di riutilizzabilità e prestazioni.

Il componente Bento Base Carousel funge da struttura portante del tuo blocco personalizzato, offrendo una funzionalità carosello predefinita ma flessibile. Con pochi comandi, puoi integrare l'accessibilità e la compatibilità multipiattaforma di Bento nel tuo progetto.

Installa il componente Bento Base Carousel

Installa il componente Bento Base Carousel usando npm: npm install –save @bentoproject/base-carousel

Importa Bento Carousel nel Blocco

Apri il file src/edit.js e aggiungi le seguenti importazioni:

importa { BentoBaseCarousel } da '@bentoproject/base-carousel/react'; importa '@bentoproject/base-carousel/styles.css';

Il componente React BentoBaseCarousel fornisce funzionalità carosello, mentre il CSS

garantisce uno stile appropriato sia per l'editor che per il frontend.

Dopo aver installato e importato Bento, sei pronto per eseguire il rendering del tuo primo blocco carosello in Gutenberg.

Da sapere anche: Come creare un sito web SaaS con WordPress

Rendering della giostra in Gutenberg

Il rendering del carosello in Gutenberg consente di vedere Bento in azione all'interno dell'editor a blocchi di WordPress. Questa fase si concentra sull'integrazione del componente React BentoBaseCarousel e sulla verifica del suo corretto funzionamento.

Imparerai anche come definire lo stile del blocco, assicurandoti che abbia un aspetto impeccabile sia nell'editor che nel frontend. Al termine di questa fase, avrai un blocco carosello funzionante che mette in mostra la potenza di Bento.

Aggiorna il componente Modifica

Aprire il file src/edit.js e aggiornare il componente Edit per includere BentoBaseCarousel:

mport { useBlockProps } da '@wordpress/block-editor'; import { BentoBaseCarousel } da '@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="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></BentoBaseCarousel></div></div> ); }

Questo codice integra il componente Bento Base Carousel con un set di immagini campione.

Scopri : come creare il tuo sito WordPress utilizzando il tema Underscores

Aggiungi CSS specifico per Carousel

Apri il file src/style.scss e aggiungi il seguente CSS per garantire che il carosello abbia dimensioni coerenti:

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

In questo modo si garantisce che il carosello mantenga le sue proporzioni su tutti i dispositivi e abbia un aspetto professionale.

Visualizza in anteprima il blocco Carousel nell'editor

Salva le modifiche e ricostruisci il blocco utilizzando il server di sviluppo (npm start se non è già in esecuzione).

Vai all'editor a blocchi di WordPress, aggiungi il Awesome Carousel e guarda il carosello in azione.

A questo punto, il blocco Gutenberg basato su Bento è operativo nell'editor. Nei passaggi successivi, puoi migliorarne l'interattività e ottimizzarlo per le prestazioni del frontend.

Leggi : Come creare un carosello di immagini WordPress

Aggiungere interattività ai blocchi Bento

L'interattività è la chiave per creare blocchi accattivanti in WordPress. Grazie alla solida API di Bento, puoi aggiungere funzionalità dinamiche come i controlli di navigazione che consentono agli utenti di interagire con il tuo blocco carosello in modo fluido, sia nell'editor che nel frontend.

Interazione dell'utente nell'editor

Per rendere il carosello interattivo all'interno dell'editor Gutenberg, è possibile aggiungere pulsanti di navigazione personalizzati (ad esempio, Avanti e Indietro). Utilizzando l'API di Bento, è possibile controllare la funzionalità del carosello direttamente in React.

Per prima cosa, aggiorna il file src/edit.js per includere i controlli di navigazione. Utilizza la funzione createRef per accedere all'API del carosello. Ad esempio:

importa { createRef } da '@wordpress/element'; importa { Button } da '@wordpress/components'; esporta la funzione predefinita 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="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></BentoBaseCarousel></div> <Button isSecondary onClick={goToPreviousSlide}>Precedente</button> <Button isSecondary onClick={goToNextSlide}>Successivo</button></div> ); }

Controlla : Esplorazione dei migliori temi a blocchi di WordPress

Questi pulsanti consentono all'utente di navigare nel carosello direttamente nell'editor a blocchi , rendendolo interattivo e intuitivo.

Interazione dell'utente sul frontend

L'interattività sul frontend rispecchia le funzionalità dell'editor. Tuttavia, al posto dei componenti React, vengono utilizzati gli elementi personalizzati nativi di Bento. Aggiorna il file src/save.js per includere i pulsanti carosello e navigazione:

esporta la funzione predefinita salva() { ritorna ( <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="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Precedente</button> <button className="awesome-carousel-next">Successivo</button></div></div> ); }

Per abilitare i pulsanti di navigazione sul frontend, crea un file src/view.js. Questo file interagisce con l'API di Bento per gestire le azioni dell'utente:

esporta la funzione predefinita salva() { ritorna ( <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="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Precedente</button> <button className="awesome-carousel-next">Successivo</button></div></div> ); }

Questo script garantisce che i pulsanti di navigazione interagiscano perfettamente con il carosello sul frontend.

Leggi : Cosa sono i modelli di blocchi di WordPress

Ottimizzazione dello stile e del frontend

Uno stile e un'ottimizzazione adeguati sono essenziali per garantire che il blocco abbia un aspetto e funzioni correttamente sia nell'editor che nel frontend. Utilizza il file src/style.scss per definire stili specifici per il tuo carosello, assicurandoti che sia visivamente coerente su tutti i dispositivi. Evita di utilizzare nomi di classe generici per evitare conflitti con altri temi o plugin.

Per ottimizzare le prestazioni, carica gli stili dinamicamente tramite PHP. Aggiorna il file plugin.php per registrare e accodare gli stili solo quando il blocco viene renderizzato:

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

Registrazione delle risorse e gestione dei callback di rendering

Caricare le risorse in modo efficiente garantisce che il blocco rimanga leggero. Utilizza la funzione render_callback di PHP per caricare script e stili solo quando il blocco è presente sulla pagina. Modifica il file plugin.php come segue:

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


 In questo modo gli script e gli stili vengono caricati solo sulle pagine in cui viene eseguito il rendering del blocco, migliorando le prestazioni generali del sito.

Buone pratiche per lo sviluppo di Bento Block

Quando si lavora con i blocchi Bento in WordPress, seguire le best practice garantisce che i blocchi rimangano efficienti, riutilizzabili e intuitivi.

Mantieni i blocchi leggeri e riutilizzabili

Proprio come una scatola per il pranzo Bento è suddivisa in scomparti ordinati per pasti, spuntini, frutta e persino cibo per bambini, anche i tuoi blocchi dovrebbero essere modulari e riutilizzabili.

Concentratevi sulla scelta di materiali puliti nel vostro codice, assicurandovi che ogni blocco sia robusto, durevole e non sovraccarico di funzionalità non necessarie.

Ciò li rende più portatili, più facili da riporre e comodi per l'uso quotidiano, proprio come un contenitore per il pranzo ecologico, a prova di perdite e lavabile in lavastoviglie che puoi portare ovunque, dai picnic ai viaggi.

Garantire l'accessibilità (HTML semantico e attributi ARIA)

L'accessibilità è il fondamento per creare esperienze sicure e piacevoli. Utilizzando HTML e ruoli ARIA, i blocchi Bento diventano più inclusivi.

Immagina di dover garantire che un contenitore sia adatto al microonde, alla lavastoviglie e al lavaggio a mano: tutti dovrebbero poterlo utilizzare, indipendentemente dalle preferenze.

Un'etichettatura corretta previene inoltre problemi quali fuoriuscite o perdite di contenuto durante la navigazione con tecnologie assistive, garantendo agli utenti di poter usufruire dei contenuti proprio come farebbero con il cibo conservato in un prodotto ben progettato che evita odori indesiderati.

Ottimizzazione per la reattività mobile

Nel mondo odierno, gli utenti interagiscono con i siti web su più dispositivi, rendendo la reattività ai dispositivi mobili .

I blocchi Bento dovrebbero adattarsi a schermi di diverse dimensioni, proprio come la scelta della giusta capacità o quantità di contenitori in base alla quantità di cibo da confezionare. Che si tratti di piccoli spuntini o pasti completi, il design dovrebbe adattarsi in modo fluido.

Un layout a blocchi reattivo è comodo come una scatola Bento che si adatta a qualsiasi borsa, è robusto, sicuro e progettato per evitare fuoriuscite durante l'uso quotidiano o in viaggio.

Utilizzare Bento per le prestazioni sui blocchi React-Heavy

Il vantaggio di Bento risiede nelle sue prestazioni. Invece di affidarsi a pesanti approcci basati su React, Bento mantiene il tutto snello ed efficiente.

È come scegliere un contenitore ecologico, adatto al microonde, durevole e a prova di perdite invece di uno ingombrante che aggiunge peso extra.

Con Bento puoi concentrarti sulla velocità, ridurre le dipendenze e offrire un'esperienza di sviluppo più pulita, ideale per progetti che devono essere divertenti, sicuri, portatili e ottimizzati per le prestazioni.

Segui gli standard di codifica di WordPress

Infine, allineatevi sempre agli standard di codifica di WordPress per garantire compatibilità, manutenibilità e sicurezza.

Proprio come i prodotti provenienti dai Paesi Bassi o i marchi di fama mondiale spesso stabiliscono parametri di qualità per prezzo, materiale, capacità e design pulito, gli standard di codifica garantiscono che i tuoi blocchi rimangano di alta qualità, affidabili e facili da lavare a mano o da "manutenere" nel lungo periodo.

Seguendo le best practice, puoi creare blocchi Bento che gli sviluppatori adoreranno e che rimarranno ideali per l'uso quotidiano e a lungo termine.

Scopri di più : Guida per creare blocchi personalizzati in WordPress

Considerazioni finali

 L'utilizzo di Bento con Gutenberg trasforma lo sviluppo a blocchi semplificando i flussi di lavoro, riducendo la duplicazione del codice e migliorando l'interattività.

Grazie ai componenti riutilizzabili, alla compatibilità multipiattaforma e all'accessibilità integrata, Bento consente agli sviluppatori di creare senza sforzo blocchi WordPress ad alte prestazioni e a prova di futuro.

Integrando personalizzazioni avanzate e ottimizzando le prestazioni, puoi offrire un'esperienza fluida sia agli editor che agli utenti.

Che si tratti di progetti personali o di progetti su larga scala per i clienti, Bento fornisce gli strumenti per portare i tuoi blocchi Gutenberg a un livello superiore con facilità ed efficienza.