[Cosa sono] WordPress Gutenberg Blocks e come usarli bene

L'editor di WordPress Gutenberg è arrivato con WordPress 5.0 nel dicembre 2018. Conosciuto più comunemente come "editor a blocchi", la nuova funzionalità cambia la creazione di pagine e post dal semplice design a scatola delle versioni precedenti a un'esperienza più simile a un generatore di pagine.

Gutenberg blocks ora offrono un approccio modulare alla creazione di contenuti. Invece di utilizzare il codice per aggiungere un elemento diverso a una pagina, puoi invece sostituire un blocco. Ad esempio, puoi sostituire un blocco di testo con un blocco video o una tabella proprio come faresti quando crei una pagina in Beaver Builder o Elementor. È un'evoluzione che doveva arrivare da molto tempo, ma ora è qui che ti chiederai rapidamente come hai mai creato pagine senza di essa!

Gutenberg blocks

Se esegui l'aggiornamento a WordPress 5.0 e versioni successive, e dovresti ormai, avrai notato che l'interfaccia utente si è spostata un po '. Vedrai ancora il menu laterale tradizionale a sinistra e il menu dei contenuti a destra, ma al centro è cambiato tutto.

Prima dell'aggiornamento, vedevi un titolo vuoto e una casella del contenuto in cui hai costruito la tua pagina o il tuo post. Ora vedrai una sezione vuota al centro con un cartiglio e un blocco di testo già popolati. Il menu di destra cambierà dinamicamente a seconda di ciò che stai facendo. In un primo momento, mostra le tradizionali opzioni di categoria, tag e immagine delle caratteristiche come prima, ma ora introduce una scheda Blocco.

La scheda Blocco ti consente di modificare il singolo blocco come quei costruttori di pagine che offrono molta libertà in termini di design. Quello che vedi nella scheda Blocco dipende dal blocco in questione, ma tutti avranno la possibilità di aggiungere CSS personalizzati.

Gutenberg blocks introduce un approccio veramente modulare al design della pagina. Hai la possibilità di continuare a fare le cose nello stesso modo o di approfondire. Puoi modificare ogni blocco per farlo sembrare sottilmente o notevolmente diverso o farli funzionare tutti come un insieme senza soluzione di continuità. È un sistema molto potente e indulgente.

Come si usa Gutenberg blocks

La cosa grandiosa della riprogettazione di WordPress è che è abbastanza simile a come funzionavano le cose prima che l'interfaccia utente è ancora familiare. Anche se non hai familiarizzato con i nuovi blocchi, puoi comunque aggiungere il titolo della pagina, aggiungere i tuoi contenuti, aggiungere codici e widget e pubblicare come prima. Potrebbe sembrare un po 'diverso ma funziona allo stesso modo.

Questo è l'ideale per i blogger occasionali o per coloro che non conoscono WordPress. Poiché un elemento chiave del CMS è la sua facilità d'uso, gli sviluppatori sono riusciti in qualche modo ad aggiungere funzionalità più avanzate senza rendere il sistema complessivo più difficile da usare.

Puoi ancora creare una pagina in pochi minuti utilizzando le opzioni predefinite, ma ora puoi andare molto più in profondità senza dover imparare una riga di codice o persino sapere come appare uno shortcode.

Sono queste cose che fanno Gutenberg blocks così utile.

Puoi usare Gutenberg blocks o non.

L'impostazione predefinita della pagina e del post significa che puoi ancora preformattare il contenuto della tua pagina altrove e semplicemente copiarlo e incollarlo sulla pagina. Incolla il titolo nel cartiglio e il contenuto della pagina nel blocco di testo. Se è tutto ciò di cui hai bisogno, il processo di creazione è semplice come prima. Se vuoi andare oltre, puoi.

Se vuoi approfondire come funziona l'editor dei blocchi, vedrai alcune altre opzioni:

• Seleziona la piccola icona "+" accanto al blocco centrale per aggiungere un nuovo blocco.
• Seleziona la "H" per aggiungere un'intestazione.
• Seleziona l'icona dell'elenco per aggiungere un elenco al tuo blocco.
• Seleziona l'icona dell'immagine per aggiungere un'immagine.

Tutte e quattro queste opzioni sono disponibili dal menu dei contenuti, ma averle disponibili per ogni blocco significa che puoi creare i tuoi contenuti in qualsiasi design tu voglia. I singoli blocchi di spicco possono essere modificati e incorniciati individualmente e ciascuno si rifletterà nella pagina finita.

Questo è qualcosa Elementor (e ai page builder come Divi) lo fanno da anni con grande effetto. Ora puoi fare più o meno la stessa cosa all'interno di WordPress.

Puoi trovare maggiori informazioni su Divi nelle nostre recensioni di Elegant Themes.

Creare una pagina utilizzando l'editor dei blocchi è semplice:

1. Seleziona Nuova pagina o Nuovo post dal menu laterale di WordPress.
2. Scrivi o incolla il titolo della pagina nel cartiglio.
3. Scrivi o incolla il tuo contenuto nel blocco di testo.
4. Seleziona l'icona "+" a destra del blocco per aggiungere un nuovo blocco.
5. Seleziona il blocco più appropriato dalla finestra popup.
6. Completa gli elementi del blocco principale nel riquadro centrale.
7. Seleziona l'icona a tre punti nella parte superiore del blocco che hai aggiunto per modificare il design o personalizzare.
8. Per aggiungere CSS personalizzati, seleziona Avanzate dal menu a destra.
9. Seleziona Pubblica due volte per andare in diretta.

Sebbene l'utilizzo dell'editor di blocchi sia molto semplice, puoi immergerti molto più a fondo se necessario. L'icona del menu a tre punti per ogni blocco apre una miriade di opzioni di personalizzazione a seconda del blocco. Puoi duplicare il blocco, inserire altri blocchi prima o dopo, modificare gli attributi HTML, raggruppare i blocchi e altro a seconda delle opzioni disponibili.

Inoltre, oltre ai blocchi standard forniti con WordPress, gli sviluppatori possono anche creare i propri plug-in di blocco. Data l'enorme base di utenti e il talento degli sviluppatori di WordPress, ci sono già molti plugin di blocchi disponibili dopo appena un anno di utilizzo.

Blocchi comunemente usati

WordPress ha incluso una gamma di blocchi che coprono la creazione di pagine principali. Ognuno semplifica l'aggiunta di diversi elementi di pagina consentendo al contempo funzionalità di progettazione personalizzate solo per quel blocco. È una potente opzione di modifica che può essere utilizzata con grande effetto.

Lo standard Gutenberg blocks all'interno di WordPress includono:

• Blocco di testo - Il blocco di contenuto tradizionale in cui puoi lavorare esattamente come prima e modificare utilizzando HTML o codici brevi.
• Intestazione - Blocchi di intestazione con le impostazioni standard H1, H2, H3, H4.
• Elenco - Un blocco separato che puoi utilizzare per creare elenchi straordinari ordinati o non ordinati.
• Galleria - Un blocco galleria che ha abilitato la formattazione personalizzata delle immagini per adattarsi al contenuto della tua pagina.
• Immagine - Un blocco immagine specifico che funziona in modo simile alla galleria ma per immagini singole.
• Citazione - Un blocco straordinario che ti consente di evidenziare citazioni o recensioni all'interno di una pagina.
• Audio - Un blocco specifico su cui fare clic per riprodurre clip audio all'interno del contenuto della pagina.
• Copertina - Un nuovo blocco che ti consente di inserire un'immagine di copertina per la tua pagina o post che può completare l'immagine in primo piano.
• Video - Un blocco video che funziona come l'audio e semplifica la presentazione di video all'interno di una pagina o di un post.

Tutto quello che puoi fare con Gutenberg blocks eri in grado di fare con l'editor originale, ma non era sempre facile da usare o accessibile per i nuovi utenti. Questo design a blocchi rende facile per chiunque costruire le proprie pagine in modo logico e lineare.

I migliori plugin per blocchi di Gutenberg

Il WordPress standard Gutenberg blocks coprire la maggior parte di ciò di cui potresti aver bisogno dal tuo CMS. Tuttavia, abbiamo menzionato in precedenza che gli sviluppatori hanno anche iniziato a produrre i propri plug-in di blocco Gutenberg per aggiungere ancora più funzionalità. Esistono dozzine di plug-in di blocco di diverse qualità e qui abbiamo raccolto alcuni dei nostri preferiti.

Diamo ora un'occhiata ad alcuni di questi.

Vedremo:

1. Blocchi set di strumenti
2. Blocchi Definitivi
3. Ultimate Addons per Gutenberg
4. Tecnologia Gutenberg Blocks
5. Impilabile Gutenberg Blocks
6. Blocchi atomici
7. Blocchi di lontra
8. Blocks di Templatic
9. Blocchi Kadence

Molti di questi plug-in di blocco Gutenberg sono completamente gratuiti, mentre altri offriranno blocchi gratuiti con la possibilità di eseguire l'aggiornamento a blocchi premium più avanzati. Abbiamo menzionato in ogni descrizione quelli che sono gratuiti e dove ci sono opzioni premium.

Ciascuno verrà installato nello stesso modo in cui installi qualsiasi altro plug-in di WordPress. Selezionalo da WordPress.org e installa e attiva o scarica i file sul tuo computer e caricali nella tua installazione di WordPress. Una volta installato, dovresti vedere le tue nuove opzioni di blocco apparire con lo standard bloccato quando selezioni "+" all'interno di una pagina.

1. Blocchi set di strumenti

Blocchi set di strumenti è uno dei nostri plugin preferiti per l'editor di blocchi per WordPress. È un plugin premium che dimostra che mentre puoi ottenere cose buone gratuitamente, a volte vale la pena pagare un piccolo extra per potenza e convenienza. Il plugin si installa allo stesso modo degli altri plugin e aggiungerà i nuovi blocchi al menu esistente.

I blocchi includono tipi di post personalizzati, tassonomia personalizzata, campi personalizzati, modelli, visualizzazioni, impaginazione, scorrimento infinito, blocchi Ajax, WooCommerce, Google Maps, moduli, pagamenti e persino controllo degli accessi. Alcuni di questi blocchi non li troverai in nessun plugin gratuito, motivo per cui abbiamo evidenziato Blocchi set di strumenti.

Una delle migliori caratteristiche di Toolset è la possibilità di creare contenuti generati dinamicamente SENZA dover eseguire alcun codice PHP personalizzato. Il set di strumenti si integra direttamente con l'editor a blocchi di WordPress e ti consente di estrarre contenuti dinamici da qualsiasi luogo.

A titolo di esempio, cosa puoi fare: 

• Crea intestazioni in base ai titoli
• Imposta i testi dei pulsanti e gli inviti all'azione dai campi personalizzati
• Imposta le origini delle immagini per i campi o i campi personalizzati
• ecc.

Il video seguente è un'ottima spiegazione delle capacità di Toolset Blocks:

La maggior parte di noi sa quanto possono essere potenti i campi personalizzati e i tipi di post ed essere in grado di implementarli all'interno di una pagina è superbo. Oltre a moduli, layout, visualizzazioni, controlli di accesso e altre potenti funzionalità, è incredibilmente facile consigliare questo plugin anche se è un prodotto premium.

Di tanto in tanto gratis non è il prezzo migliore e questa è una di quelle volte.

2. Blocchi Definitivi

Blocchi Definitivi è presentato ai blogger ma funzionerebbe altrettanto bene su qualsiasi sito Web WordPress. Il plug-in è gratuito e contiene una selezione di blocchi di editing promozionali e molto utili che sono ideali per i blogger ma potrebbero anche rivelarsi utili per gli operatori di marketing, i siti di e-commerce, le piccole imprese e chiunque desideri che i loro contenuti si distinguano.

I blocchi includono recensioni, sommario, inviti all'azione, commutatori di contenuti, dispositivo di scorrimento delle immagini, filtri di contenuti, testimonianze, condivisione sui social, timer per il conto alla rovescia, barre di avanzamento, griglie di post e valutazioni a stelle. Lo sviluppatore dice che ne hanno anche altri in arrivo.

Ultimate Blocks ha un altro asso nella manica nel suo gestore di blocchi. Una semplice interfaccia che ti aiuta ad abilitare o disabilitare i blocchi per mantenere semplice la creazione della pagina. Significa che puoi scaricare la raccolta e abilitare solo i blocchi che probabilmente utilizzerai, mantenendo la pagina libera da disordine durante la creazione.

3. Gutenberg Blocks – Ultimate Addons per Gutenberg

Gutenberg Blocks – Ultimate Addons per Gutenberg proviene dagli stessi sviluppatori del superbo Tema Astra WordPress. Il plugin gratuito aggiunge una gamma di blocchi per l'uso quotidiano che sono semplici da usare e offrono una vasta gamma di opzioni di personalizzazione. Funzioneranno tutti anche con Astra, il che è fantastico se usi quel tema.

I blocchi includono infobox, pulsanti, titoli avanzati, blocchi team, prezzi, condivisioni social, testimonianze, elenchi di icone, blocchi Gravity Form, blocchi marketing, citazioni, inviti all'azione, blocchi Contact Form 7, Google Maps e altro.

Gli sviluppatori affermano che questi blocchi sono stati ottimizzati per la velocità della pagina, offrendo al contempo un'integrazione fluida con il tema Astra e all'interno di qualsiasi altro tema. Hai opzioni di personalizzazione simili a questi altri plugin per far scorrere i blocchi nelle pagine esistenti. Questo da solo rende questo plugin degno di essere verificato.

4. Gutenberg avanzato

Gutenberg avanzato di Joom United aggiunge oltre venti blocchi di editor come plugin gratuito per WordPress. C'è una discreta gamma di opzioni qui dalla solita colonna e titolo a blocchi più avanzati. Sono ben progettati con un'interfaccia minima che in qualche modo offre ancora tutte le opzioni di personalizzazione di cui potresti aver bisogno.

I blocchi includono profili dell'autore, blocchi CCS personalizzati, WooCommerce, pulsanti avanzati, moduli di contatto, elenchi avanzati, mappe, testimonianze, contatori, blocchi di accesso e registrazione, blocchi di video e immagini, condivisione e collegamento social, riepiloghi di post, blocco Lightbox e molto altro .

Ognuno si integra perfettamente in una pagina e viene fornito completo di opzione di personalizzazione avanzata tramite il menu a tre punti. Le opzioni esatte variano a seconda del blocco in questione, ma coprono le situazioni più comuni, colore, dimensione, rientro, allineamento e così via.

5. Impilabile Gutenberg Blocks

Impilabile Gutenberg Blocks è stato un altro arrivo anticipato all'aggiornamento e ha rilasciato alcuni blocchi personalizzati molto utili per l'editor di WordPress. La maggior parte dei blocchi impilabili sono gratuiti, ma lo sviluppatore offre anche alcuni blocchi premium che affrontano usi specifici se ne hai bisogno.

I blocchi gratuiti includono blocchi post, griglia delle funzionalità, fisarmonica, invito all'azione, scheda, intestazione, popup video, blocco prezzi, blocco notifiche, spaziatore, divisore, elenco funzionalità e altri. Ci sono 23 blocchi liberi in tutto.

Come ulteriore vantaggio, Stackable è un sistema modulare in modo da poter aggiungere i blocchi di cui probabilmente avrai bisogno lasciando fuori gli altri. Ciò potrebbe avere un piccolo vantaggio di archiviazione e velocità della pagina a seconda di come è impostato il tuo sito web. Ad ogni modo, è una bella funzionalità aggiunta che può mantenere le cose snelle nel back-end.

6. Blocchi atomici

Blocchi atomici è stato un altro dei primi plugin sulla scena e ora offre 15 blocchi gratuiti e alcuni temi WordPress per completare questa nuova libertà di progettazione. I blocchi includono testimonianze, prezzi, newsletter, griglia dei post, colonne avanzate, icone di condivisione, invito all'azione, profilo dell'autore e altri blocchi utili.

Il plugin è gratuito, così come la maggior parte dei temi. Una volta installato, vedrai una nuova serie di blocchi all'interno della sezione dei blocchi di una nuova pagina o post. Cerca AB Post Grid ecc. Per identificare le funzionalità del blocco atomico.

Come questi altri plug-in di blocco dell'editor, puoi personalizzarne l'aspetto nel menu avanzato. Hai opzioni simili in termini di opacità, colore, posizionamento e così via con l'ulteriore vantaggio di scelte aggiuntive se usi un tema Atomic Block. È una caratteristica extra minore ma è lì!

7. Gutenberg Blocks e libreria di modelli di Otter

Gutenberg Blocks e libreria di modelli di Otter è il boccone di un nome molto più digeribile in termini di caratteristiche. È un plug-in gratuito e leggero che include alcuni blocchi ben progettati che si basano su quelli forniti da WordPress solo con più opzioni di progettazione.

I blocchi includono sezioni, titoli avanzati, pulsanti, prezzi, testimonianze, Google Maps, blocchi bio dell'autore, griglia dei post, Font Awesome, condivisione e un blocco di carte. Tutti sono ottimizzati per la velocità della pagina e per le funzionalità e, sebbene leggeri su queste funzionalità, sono un eccellente supplemento ai blocchi predefiniti.

Ci sono personalizzazioni extra e alcune opzioni di libreria per ogni blocco. Puoi modificare ogni blocco in base alle tue esigenze specifiche o utilizzare un'opzione di libreria per prendere un design già pronto e usarlo all'interno del blocco. È veloce e molto semplice.

8. Blocks di Templatic

Blocchi dello sviluppatore Templatic è un altro solido ingresso nella nostra lista di superbi plugin di blocchi Gutenberg. Abbiamo molto rispetto per i temi Templatic e questi blocchi funzioneranno con o senza uno dei loro temi. Se usi un tema Templatic, questi blocchi si inseriscono perfettamente e sono pronti all'uso. Se non usi un tema Templatic, questi blocchi si integreranno comunque perfettamente nel tuo design.

I blocchi sono gratuiti e includono una biografia dell'autore, avvisi, condivisione sui social media, separatori, immagine di copertina, opzioni di intestazione, mappa, prezzi, pulsanti e un blocco Tweet. Ognuno ha le caratteristiche di base anteriori e centrali con personalizzazioni disponibili attraverso il menu. Sono molto semplici da usare e appariranno accanto a tutti i blocchi predefiniti nella nuova pagina o nella schermata del post.

Ci sono alcuni buoni blocchi qui, ma il plugin non è stato aggiornato per quasi un anno. Funzionano con la versione corrente di WordPress poiché li abbiamo testati in tempo per questo articolo, ma non sappiamo quando arriveranno nuovi blocchi.

9. Blocchi Kadence

Blocchi Kadence ha opzioni sia gratuite che premium che rafforzano i blocchi predefiniti all'interno di WordPress. La versione gratuita ha dodici blocchi e un editor integrato, mentre la versione premium da $ 59 all'anno aggiunge sette blocchi premium, opzioni di animazione uniche e supporto. C'è anche una terza opzione, per $ 99 all'anno puoi accedere a tutti i blocchi di editing premium più tutti i temi e prodotti Kadence.

I blocchi includono blocchi di layout di pagina, riquadri informazioni, gallerie avanzate, testimonianze, blocchi video, fisarmonica, pulsanti, schede, icone, titoli avanzati e immagini. La versione premium aggiunge blocchi griglia e carosello, caroselli di prodotti, blocchi modello, sovrapposizioni di immagini, contenuto diviso e popup video.

Ogni blocco ha una sezione di modifica personalizzata in cui è possibile modificare posizione, contorno, colore, dimensione dell'immagine, opacità e una serie di altri fattori. Se stai lavorando all'interno di un design o framework specifico, puoi implementare i blocchi in quel design con facilità utilizzando l'editor.

Riepilogo delle Gutenberg blocks e i loro plugin

Gutenberg blocks sono un'eccellente evoluzione di WordPress. Prendono tutto ciò che sappiamo e amiamo della creazione rapida di pagine o post e lo spingono avanti. WordPress offre ancora la sua caratteristica facilità d'uso e la sua bassa barriera all'ingresso per i principianti, offrendo agli utenti più esperti o orientati al design l'opportunità di distinguersi. Vale la pena celebrare questo equilibrio tra forma e funzione.

Così come i plugin di blocco di Gutenberg che presentiamo in questo elenco. I plugin gratuiti offrono praticamente tutto ciò di cui hai bisogno dalla creazione della pagina. L'opportunità di suddividere una pagina o un post in singoli componenti e modellarli individualmente fino a quando non è semplicemente perfetto.

Anche quei plugin premium valgono il costo. Tendono a offrire standard più elevati in termini di design e usabilità e anche alcuni blocchi non disponibili altrove. Sebbene premium, Toolset Blocks si distingue per offrire una gamma di blocchi che non troverai in nessun plugin gratuito come ricerca, controllo degli accessi, WooCommerce e post personalizzati e campi personalizzati.

Hai un plug-in di blocco Gutenberg preferito? Ti piace quello che non abbiamo menzionato qui? Parlaci di loro di seguito se lo fai!

L'autore

Autore: Jamie KavanaghSito web: https://www.coastalcontent.co.ukE-mail: Jamie@collectiveray.com

Jamie, un ingegnere di formazione è il nostro principale scrittore e ricercatore tecnico. Jamie gestisce anche Coastal Content, una società di content marketing, copywriting e web design con sede in Cornovaglia, nel Regno Unito.