Una guida ai blocchi Gutenberg personalizzati
Pubblicato: 2022-11-08Nel caso in cui arrivi in ritardo alla festa di WordPress, i blocchi sono in .
WordPress continua ad evolversi e migliorare l'esperienza di Gutenberg, il che porta molti sviluppatori a chiedere se dovrebbero creare blocchi Gutenberg personalizzati.
In questo post, esaminiamo come funzionano i blocchi personalizzati, quando utilizzarli, opzioni alternative per creare il tuo sito Web e come creare blocchi Gutenberg.
Cosa sono i blocchi Gutenberg personalizzati?
I blocchi sono l'unità di base per la creazione di pagine e post in WordPress. WordPress ha introdotto blocchi con l'esperienza di modifica di Gutenberg nel 2018. WordPress include molti blocchi di tipi di contenuto predefiniti, inclusi titoli di post, immagini e gallerie. Inoltre, i plugin aggiungono anche i propri blocchi alla tua esperienza di editing. Ad esempio, alcune delle versioni più recenti di WooCommerce hanno introdotto nuovi blocchi per semplificare l'aggiunta di prodotti e funzionalità di eCommerce a qualsiasi pagina o post in WordPress.
La creazione di un blocco Gutenberg personalizzato ti consente di utilizzare quel blocco su qualsiasi pagina o post sul tuo sito. Ad esempio, puoi creare un blocco che estrae e visualizza le testimonianze dei clienti.
Se sei stato riluttante ad abbracciare completamente i blocchi, ti stai perdendo. Tutte le ultime funzionalità di WordPress si concentrano sul miglioramento dell'esperienza dell'editor di blocchi. Dovrai utilizzare i blocchi per sfruttare molte delle funzionalità WordPress recenti e imminenti .
Scarica il nostro e-book su come iniziare con la modifica completa del sito per saperne di più su come utilizzare i blocchi per creare e modificare l'intero sito.
Quando utilizzare i blocchi Gutenberg personalizzati
Puoi creare un blocco Gutenberg personalizzato quando le opzioni di blocco esistenti non soddisfano le tue esigenze e non riesci a trovare un'alternativa praticabile con i tuoi plugin o temi.
La creazione di un blocco Gutenberg personalizzato di solito non è un progetto adatto ai principianti. I due motivi più comuni per codificare i tuoi blocchi Gutenberg personalizzati sono quando stai sviluppando un plug-in o creando il tuo tema.
Costruire un blocco non è un progetto che la maggior parte delle persone intraprende per un singolo sito Web, a meno che non si tratti di un progetto a livello aziendale con uno sviluppatore o un team di sviluppo dedicato. Stiamo condividendo alcuni metodi alternativi che potrebbero funzionare meglio se hai bisogno di un blocco personalizzato per un solo sito.
Alternative all'utilizzo di blocchi Gutenberg personalizzati
Prima di passare attraverso tutto il lavoro per capire i blocchi personalizzati, considera se una di queste alternative potrebbe funzionare per te.
Modelli di blocchi o blocchi riutilizzabili
Se non hai bisogno di inserire contenuti dinamici e vuoi davvero solo che un blocco replichi un layout, usa invece la nuova funzione Modelli di blocco o Blocchi riutilizzabili. Questa opzione è adatta ai principianti e può essere eseguita con poca o nessuna scrittura di codice.
I modelli sono come un mini modello che puoi utilizzare ovunque sul tuo sito. Puoi inserirlo in una pagina e poi modificarlo. I blocchi riutilizzabili funzionano in modo simile. La grande differenza è come vengono trattati dopo che li usi su una pagina o un post.
Un modello è un punto di partenza. Una volta che è su una pagina, tutte le modifiche apportate sono uniche per quella pagina. Se modifichi il modello in un secondo momento, non cambierà dove era già in uso.
I blocchi riutilizzabili rimangono collegati tra loro. Se aggiorni il blocco, le modifiche verranno applicate a ogni luogo in cui hai utilizzato quel blocco.
Blocco di codice
Utilizzare il blocco di codice per inserire il codice personalizzato nella pagina. Gli sviluppatori di temi e plugin creano blocchi personalizzati da utilizzare su più siti. Se stai lavorando su un singolo sito, probabilmente puoi raggiungere lo stesso obiettivo in meno tempo aggiungendo uno snippet di codice personalizzato. Entrambe le opzioni richiedono lo stesso livello di competenza tecnica.
L'unico caso in cui potrebbe valere la pena considerare la creazione del tuo blocco personalizzato è se sei uno sviluppatore che desidera consegnare il sito a un cliente. Il client potrebbe essere in grado di lavorare con il tuo blocco personalizzato utilizzando l'editor Gutenberg, ma sarebbe completamente perso nel tentativo di modificare il tuo codice.
Come creare un blocco Gutenberg personalizzato
Hai due opzioni per creare un blocco Gutenberg personalizzato. Puoi codificarlo tu stesso o utilizzare un plug-in per la creazione di blocchi. Entrambe le opzioni richiedono una codifica. Ti consigliamo di rispolverare le basi dello sviluppo web prima di provarlo.
Codificalo tu stesso
La creazione di blocchi personalizzati richiede esperienza di sviluppo. Se ti piace attenerti agli editor WYSIWIG e il tuo cuore batte ogni volta che fai clic accidentalmente sull'opzione del codice mostra, questo non fa per te.
La creazione di blocchi personalizzati richiede una conoscenza intermedia di HTML, CSS, JavaScript e React.
Inizia configurando il tuo ambiente di sviluppo e gli strumenti. Avrai bisogno di un ambiente WordPress, Node, NPM e un editor di codice. Successivamente, segui questo tutorial sulla creazione del tuo primo blocco dal manuale ufficiale dell'editor di blocchi di WordPress.
Utilizzo di un plug-in
Se sei a tuo agio con HTML, CSS e JavaScript ma non sei pronto per codificare tutto da zero, considera l'approccio del plug-in. L'utilizzo di un plug-in per creare blocchi personalizzati è un'ottima opzione quando è necessario un blocco personalizzato da utilizzare su un singolo sito Web.
Il plug-in Genesis Custom Blocks è il plug -in più popolare per la creazione di blocchi personalizzati. Creerai i campi del blocco utilizzando la familiare interfaccia di WordPress. Dopo aver impostato i campi, dovrai fornire il modello di HTML, CSS, JavaScript e PHP per far funzionare il blocco.
Anche se è più semplice, richiede comunque un po' di codifica. La differenza è che puoi fare tutto dal tuo amministratore di WordPress senza configurare un ambiente di sviluppo locale. Il plug-in semplifica anche il test e l'anteprima del blocco per assicurarsi che funzioni correttamente.
Qualunque cosa tu stia costruendo, possiamo aiutarti
Indipendentemente da come costruisci il tuo sito, con blocchi personalizzati o se sei un ostacolo che utilizza ancora l'editor classico, hai bisogno di un host affidabile. Pressable è orgoglioso di essere il luogo in cui WordPress funziona meglio per tutti, dall'imprenditore solista al team di sviluppatori avanzati.
Pressable offre un'interfaccia facile da usare, sicurezza al top e velocità incredibili. Con l'hosting di Pressable, il tuo sito sarà facile da aggiornare e semplice da trovare e utilizzare per i tuoi clienti.
Iscriviti oggi e inizia a costruire il tuo sito o scopri di più sul trasferimento di un sito esistente. Siamo felici di aiutarti a migrare i tuoi siti!
