Blocchi WordPress: la guida definitiva ai blocchi di Gutenberg

I blocchi di WordPress sono la più grande novità di WordPress. Con i blocchi di WordPress, noti anche come blocchi di Gutenberg, gli utenti possono sperimentare un modo più semplice per creare contenuti ricchi in articoli e pagine in modo veramente visivo.

In questo articolo, approfondiremo i blocchi di WordPress, coprendo la storia del nuovo editor di blocchi di WordPress introdotto per la prima volta in WordPress 5.0. Daremo anche un'occhiata a come i blocchi di WordPress influiscono sul modo in cui componi e modifichi articoli e pagine sul tuo sito Web WordPress. Infine, tratteremo un numero crescente di plugin per la raccolta di blocchi di WordPress che potrebbero cambiare drasticamente il modo in cui progetti e lavori con i contenuti.

Iniziamo.

La storia dei blocchi di WordPress

Il nome del progetto per il nuovo editor predefinito all'interno di WordPress si chiama Gutenberg. L'editor di Gutenberg ha introdotto quello che ora viene comunemente chiamato editor di blocchi di WordPress .

Essendo le versioni più attese e dibattute nella storia di WordPress di sempre, l'editor Gutenberg ha rappresentato un drammatico allontanamento dal precedente editor classico che è stato in circolazione sin dall'inizio di WordPress.

L'obiettivo principale di Gutenberg era quello di creare un'esperienza di modifica dei contenuti migliore e ricca relativa a come i post e le pagine sono composti e modificati all'interno di WordPress. Oltre a ciò, la visione di Gutenberg si estende oltre l'editor di post/pagina in widget e barre laterali e persino l'intestazione e il piè di pagina di un sito web.

In sostanza, Gutenberg ti consente di prendere un post o una pagina e suddividere il contenuto in vari "blocchi". Ad esempio, i blocchi di WordPress includono un blocco di immagini, un blocco di paragrafi, un blocco di citazioni, un blocco di titoli e persino un blocco di pulsanti.

L'acceso dibattito intorno a Gutenberg

Introdotto per la prima volta in WordPress 5.0, WordPress Gutenberg è stato oggetto di controversie all'interno della community di WordPress. Tuttavia, molto è cambiato con l'editor di blocchi e, mentre continuiamo a vedere l'editor di WordPress migliorato, possiamo vedere quanto velocemente vengono aggiunte funzionalità aggiuntive. Molte delle paure discusse quando è stato rilasciato per la prima volta stanno rapidamente scomparendo, poiché assistiamo a un rilascio costante di correzioni di bug e aggiornamenti delle funzionalità.

Se dai un'occhiata alla sequenza temporale in cui Gutenberg è stato aggiunto al core di WordPress, avresti visto che molte persone erano piuttosto arrabbiate e sconvolte dal fatto che il nuovo editor di blocchi sarebbe stato incluso nel core di WordPress. Molte persone hanno espresso disappunto per il fatto che Gutenberg non sarebbe mai dovuto accadere o almeno non sarebbe mai stato integrato nel core di WordPress come esperienza di editor predefinita.

Sfortunatamente, alcune persone pensavano che il loro sostentamento sarebbe stato messo a repentaglio dal nuovo editor del blocco WordPress, che avrebbe richiesto più aggiornamenti ai siti esistenti e che avrebbe anche contribuito all'estinzione dei page builder, che negli ultimi anni sono stati su un salita e utilizzo.

Tuttavia, se guardiamo a Guttenberg ora, non possiamo più trattenere la rabbia che avremmo potuto provare. Inoltre, non possiamo continuare a licenziare Gutenberg. È nel core di WordPress. Ciò significa che quando installi WordPress per avviare il tuo nuovo sito, otterrai l'editor di blocchi Gutenberg per impostazione predefinita.

Gli sviluppatori devono iniziare a esaminare come possiamo utilizzare l'editor di blocchi a loro vantaggio. Per fortuna, la community di WordPress è abbastanza grande da consentire a un certo numero di sviluppatori che si sono impegnati a imparare come integrare e adattare i propri plug-in per funzionare all'interno dell'editor di blocchi come blocchi di WordPress.

Il nuovo nome di Gutenberg: l'editor di blocchi di WordPress

Quando l'editor Gutenberg è stato aggiunto per la prima volta al core di WordPress in WordPress 5.0, c'era una certa confusione su come chiamarlo. Quando Gutenberg è stato inserito nel core di WordPress, il nome del progetto è stato eliminato. Sebbene sia ancora chiamato Gutenberg, il nuovo editor predefinito di WordPress è chiamato editor di blocchi .

L'editor di blocchi di WordPress è radicalmente diverso dall'editor classico di WordPress, il vecchio modo di modificare post e pagine in WordPress. Con l'editor di blocchi di WordPress, gli utenti possono sperimentare un modo più semplice per creare contenuti ricchi in articoli e pagine in modo veramente visivo.

L'editor di blocchi ti consente di concentrarti sul contenuto, che è probabilmente la risorsa più preziosa del tuo sito web. Il nuovo editor di WordPress consente inoltre agli sviluppatori o alle agenzie di creare modelli personalizzati che consentono ai propri clienti di creare facilmente nuovi contenuti.

L'editor dei blocchi esamina il livello più elementare della tua pagina, suddividendo tutto in righe. Inoltre, puoi utilizzare le colonne in ogni riga per suddividere i tuoi contenuti per un migliore controllo della posizione di ciascun elemento che stai aggiungendo.

Il sistema di editing basato su blocchi in WordPress è davvero notevole e potrebbe esserti familiare se hai mai utilizzato un plug-in per la creazione di pagine di WordPress. Il risultato è che l'esperienza di creazione di contenuti di WordPress diventa molto più visiva.

Il plugin Gutenberg

Sebbene Gutenberg sia ora completamente integrato in WordPress come nuovo editor di blocchi, è ancora attivamente sviluppato come plug-in Gutenberg disponibile gratuitamente nella directory dei plug-in di WordPress.

Con il plugin Gutenberg, puoi sfruttare le ultime funzionalità aggiunte all'editor di blocchi prima che vengano aggiunte al core di WordPress. L'installazione e l'utilizzo del plug-in Gutenberg su un sito di sviluppo è un ottimo modo per sapere in anticipo quali modifiche all'editor di blocchi verranno apportate nella prossima versione principale di WordPress.

Ad esempio, WordPress 5.5 ha inserito le ultime 10 versioni della funzionalità del plug-in Gutenberg nel core di WordPress.

Cosa sono i blocchi WordPress?

Per ottenere il massimo dall'editor di blocchi di WordPress, dovrai familiarizzare con tutti gli elementi predefiniti che include, noti anche come blocchi di WordPress . Hai un sacco di opzioni familiari qui, tra cui elenco, paragrafi, citazioni e altro.

L'editor di blocchi funziona nella forma di base che ogni pezzo di contenuto è un blocco. Ciò significa che i tuoi post, le tue pagine, qualsiasi tipo di post personalizzato che hai, sono tutte raccolte di blocchi WordPress. Una raccolta di blocchi potrebbe essere qualcosa come una combinazione di blocchi di intestazione, blocchi di paragrafo, blocchi di immagini, blocchi di video e altro.

Tabella dei blocchi WordPress disponibili

Questa tabella include alcuni dei blocchi WordPress predefiniti inclusi con WordPress nel nuovo editor di blocchi.

Perché utilizzare l'editor dei blocchi e i blocchi di WordPress?

Il salto all'editing basato su blocchi in WordPress è grande. Se hai utilizzato l'editor classico per molto tempo, il cambiamento all'inizio sarà disorientante. Nella nostra esperienza, la curva di apprendimento è ripida, ma se impari a utilizzare i blocchi di WordPress, potresti persino accelerare il modo in cui scrivi un post.

Se sei uno sviluppatore freelance o un'agenzia o anche qualcuno che crea siti Web con WordPress, vuoi utilizzare l'editor di blocchi perché è qui che avviene tutta l'innovazione all'interno di WordPress.

Come abbiamo visto con le versioni successive di WordPress, Gutenberg fa continuamente passi da gigante per migliorare l'interfaccia e il set di funzionalità del nuovo editor di blocchi. In effetti, il progetto Gutenberg sta plasmando il futuro dei temi di WordPress. Ciò significa che mentre cerchiamo di continuare a creare siti e WordPress, dobbiamo essere consapevoli di tutti i cambiamenti che Gutenberg intende affrontare, incluso dare un'occhiata alla sua road map.

L'obiettivo finale del progetto Gutenberg è davvero quello di rendere WordPress più facile da usare. E sta già iniziando a farlo. Pensala in questo modo quando finalmente avremo l'editing a livello di sito, non avremo più bisogno di insegnare alle persone come usare i widget. L'intera idea dei widget scomparirà.

A parte tutti questi grandi sviluppi, dovresti davvero pensare di costruire il tuo prossimo progetto con l'editor di blocchi. E se continui a leggere questo post, il nostro obiettivo è che sarai entusiasta di creare un sito con l'editor di blocchi.

L'editor dei blocchi e te: modificare i contenuti in WordPress

Quando inizi a pensare all'aggiornamento di siti con contenuti esistenti, una delle maggiori preoccupazioni potrebbe essere l'effetto del nuovo editor sui contenuti esistenti. L'ultima cosa che vuoi fare è iniziare a utilizzare una funzionalità di base come questa e avere migliaia di post (dall'avere un sito per più di 10 anni) all'improvviso perdere lo stile o, peggio, il contenuto stesso.

Per fortuna, gli sviluppatori del progetto Gutenberg hanno considerato questa situazione esatta. I tuoi contenuti esistenti verranno conservati e continueranno a essere visualizzati come prima. Se ti capita di utilizzare un generatore di pagine o qualche altra forma di editor di contenuti e layout, anche questo continuerà a essere visualizzato correttamente.

Fondamentalmente, non accadrà nulla ai tuoi contenuti esistenti se esegui l'aggiornamento all'editor di blocchi.

Come mai? WordPress viene fornito con dozzine di blocchi, incluso un blocco classico. In questo modo, il tuo contenuto esistente sarà contenuto all'interno di un singolo blocco classico fino a quando non lo convertirai manualmente in singoli blocchi.

Il processo di conversione dei post di WordPress esistenti in blocchi di Gutenberg è simile a questo: i singoli blocchi esamineranno il contenuto e cercheranno di individuare il blocco migliore per tutto il contenuto all'interno del blocco classico. Puoi convertire il tuo blocco classico in singoli blocchi separati scegliendo l'opzione dal menu del blocco classico.

Come tornare all'editor classico

Potrebbero esserci momenti in cui scopri che il nuovo editor di blocchi non è esattamente compatibile con il tuo tema esistente o i plug-in che eseguono il tuo sito. In questo caso, puoi disabilitare il nuovo editor di blocchi installando il plug-in Editor classico.

Il plug-in Editor classico è stato creato dal team di sviluppo di WordPress per risolvere i problemi di compatibilità con il nuovo editor. Esiste anche per coloro che hanno bisogno di aggiornare la propria versione del core di WordPress ma non erano pronti a modificare il contenuto nel nuovo editor di blocchi. Il plugin Editor classico disabilita l'editor dei blocchi per tutti i tipi di post. È davvero un'impostazione tutto o niente.

Tuttavia, se vuoi davvero provare l'editor di blocchi, puoi installare un plugin chiamato Gutenberg Manager. Gutenberg Manager è un plugin molto utile che ti consente di disabilitare l'editor dei blocchi da tipi di post specifici. In questo modo, se stai utilizzando un generatore di pagine o hai tipi di post personalizzati che non desideri ancora utilizzare l'editor di blocchi, puoi disabilitarlo per quei tipi di contenuto. Ti consentirà di continuare a utilizzare l'editor di blocchi sui tipi di post che scegli.

Per installare questo plugin, vai alla directory dei plugin dal tuo wp-admin messo su install o aggiungi nuovo quando fai una ricerca per Guttenberg Manager.

Conoscere l'editor dei blocchi e i blocchi di WordPress

Se sei come me e ti senti frustrato abbastanza facilmente mentre stai cercando di aggiornare un sito esistente, è probabile che vorrai gettare la spugna. Tuttavia, prendiamo in considerazione diverse opzioni prima di installare semplicemente l'editor classico e dimentichiamoci di utilizzare l'editor di blocchi.

Aggiorna e aggiorna plugin e temi

Il primo consiglio è assicurarti di aggiornare o aggiornare tutti i tuoi plugin e, naturalmente, il tuo tema. Il nuovo editor di blocchi è stato sviluppato solo negli ultimi 2 anni, quindi ci sono buone probabilità che uno qualsiasi dei plug-in che stai utilizzando sia stato aggiornato di recente e sia stato corretto per funzionare con i blocchi di WordPress. Lo stesso vale per i temi.

Potresti anche notare che ho anche indicato la potenziale necessità di aggiornare i tuoi plugin e il tuo tema. Non posso dirti quante volte mi sono imbattuto in un sito cliente che per un motivo o per l'altro ha deciso di non continuare a pagare la quota di abbonamento annuale o di rinnovo annuale ai propri plug-in o temi. Ciò significa che probabilmente stanno eseguendo una versione precedente di quel plug-in o che hanno visto e quindi devi davvero pagare per ottenere di nuovo gli aggiornamenti.

Tasti rapidi

Un modo interessante in cui il nuovo editor di blocchi migliora la capacità di digitazione nei tuoi contenuti consiste nell'utilizzare le scorciatoie da tastiera. Ciò riduce la quantità di cambio di contesto tra la tastiera e il mouse durante la scrittura del contenuto.

Se stai digitando sul tuo laptop, è probabile che non ti accorgi nemmeno di spostare il pollice dalla barra spaziatrice verso il basso al trackpad spostando il mouse e poi indietro.

Una scorciatoia da tastiera che ti sarà più utile è quando devi attivare l'inseritore di blocchi. Ho incluso uno screenshot di come appare l'inseritore di blocchi. se stai digitando / su una nuova riga, verrà visualizzato il collegamento al blocco.

Il blocco classico

Il blocco classico è lì per aiutarti a colmare il divario del tuo vecchio flusso di lavoro nel nuovo flusso di lavoro con il nuovo editor. Se per qualche motivo c'è qualcosa che non ti senti di poter fare all'interno del nuovo editor di blocchi, tutto ciò che devi fare è aggiungere un blocco classico alla pagina. Puoi accedere alla vecchia barra degli strumenti e a tutti quei codici brevi che erano disponibili nelle versioni precedenti di WordPress.

Salvare e riutilizzare i blocchi in Gutenberg

Una delle mie funzionalità principali preferite del nuovo editor di blocchi è la possibilità di salvare e riutilizzare i blocchi per utilizzarli su altri contenuti, noti anche come blocchi riutilizzabili .

I blocchi riutilizzabili sono particolarmente utili per i blogger o i proprietari di siti che hanno spesso bisogno di aggiungere frammenti di contenuto specifici ai loro articoli o anche a più pagine del loro sito.

Per salvare il tuo blocco come blocco riutilizzabile, fai semplicemente clic sul pulsante del menu situato nell'angolo destro della barra degli strumenti dei blocchi. Quindi dal menu Seleziona Preventivo aggiungi due blocchi riutilizzabili e le opzioni di preventivo.

Ti verrà chiesto di fornire un nome per il blocco. Assegna un nome al tuo blocco, quindi fai clic sul pulsante Salva. L'editor dei blocchi ora salva il blocco del blocco riutilizzabile.

Per utilizzare quel blocco salvato in altri post o pagine del tuo sito, tutto ciò che devi fare è visualizzare il collegamento al blocco scorrere verso il basso fino a dove dice riutilizzabile e quindi trovare il blocco salvato.

Se desideri gestire tutti i tuoi blocchi riutilizzabili nella stessa finestra, puoi fare clic sul collegamento "gestisci tutti i blocchi riutilizzabili" . Questo ti porterà alla pagina del gestore dei blocchi. Qui puoi modificare o eliminare qualsiasi blocco riutilizzabile. Puoi anche esportare blocchi riutilizzabili e usarli su qualsiasi altro sito WordPress che desideri.

Suggerimenti bonus per l'utilizzo dei blocchi di WordPress come un professionista

Stai diventando sempre più a tuo agio con il nuovo editor nero, potresti chiederti se impiegherai più tempo ad aggiungere e regolare i blocchi piuttosto che a creare contenuti effettivi.

La buona notizia è che l'editor di blocchi è incredibilmente veloce. Anche dell'utilizzo più elementare, in pochi minuti aggiungerai istantaneamente blocchi WordPress senza nemmeno pensarci.

Presto ti renderai conto di quanto sia diventato veloce il tuo flusso di lavoro con il suo nuovo approccio. E se sei un utente esperto, parliamo di alcuni suggerimenti bonus per aiutarti a lavorare ancora più velocemente con il nuovo editor.

1. Sposta la barra degli strumenti del blocco in alto

Attualmente, c'è una barra degli strumenti che appare nella parte superiore di ogni blocco di WordPress. Puoi spostare questa barra degli strumenti sopra l'altra. Tutto quello che devi fare è fare clic sul pulsante nell'angolo in alto a destra dello schermo e quindi selezionare l'opzione della barra degli strumenti in alto.

2. Trascina e rilascia i media per creare automaticamente blocchi multimediali

Questa è una funzione davvero utile e se hai intenzione di creare un post evidenzierai più immagini come una galleria. Puoi trascinarli facilmente dalla finestra del Finder se sei su un Mac direttamente nell'editor dei blocchi. Questo creerà automaticamente un blocco galleria per te.

Puoi fare la stessa cosa con una singola immagine o un file video e l'editor di WordPress creerà il blocco per te.

Come aggiungere YouTube, Twitter, Facebook, Vimeo, altri incorporamenti

Gutenberg ha introdotto nuovi blocchi di incorporamento nell'editor dei blocchi. C'è un blocco WordPress per tutti i tipi di incorporamento supportati, inclusi YouTube, Twitter, Facebook, Vimeo, Instagram e altro.

Tuttavia, tutto ciò che devi fare è copiare e incollare l'URL di incorporamento in qualsiasi punto nell'editor dei blocchi e creerà automaticamente un nuovo blocco per te. Ad esempio, se dovessi aggiungere un URL Vimeo, creerebbe automaticamente un blocco di incorporamento Vimeo e visualizzerà il video.

Plugin di blocco WordPress che vale la pena dare un'occhiata

Nella parte successiva di questa guida, esploreremo l'ampia varietà di plugin per blocchi di WordPress. Va detto che i termini plug -in di blocco e plug -in di raccolta di blocchi sono usati in modo intercambiabile in questo post. Questo perché molti dei plugin qui elencati contengono un numero di blocchi che puoi usare all'interno dell'editor dei blocchi.

Poiché sempre più persone iniziano a utilizzare l'editor di blocchi di WordPress, questi plug-in di raccolta di blocchi forniscono una sensazione di tipo più WYSIWYG all'editor di blocchi, consentendo di creare siti Web dall'aspetto accattivante con pochi clic. Sono progettati per consentirti di apportare modifiche alle impostazioni, aggiungere/rimuovere blocchi e caricare i tuoi contenuti, per dare alla tua pagina un aspetto più personale.

La cosa sorprendente di questa comunità è il numero di sviluppatori che hanno rapidamente visto un modo per entrare al piano terra dei plugin per blocchi di costruzione. Daremo un'occhiata a quali sono alcuni di questi plug-in di blocco e quali sono alcuni dei vantaggi nell'usare questi plug-in di blocco invece dei soli blocchi predefiniti forniti con WordPress.

Blocchi impilabili

Se stai cercando una nuova piattaforma per migliorare l'editor di blocchi di WordPress, devi dare un'occhiata a Stackable. Stackable è uno dei migliori plugin per la raccolta di blocchi che ho trovato per WordPress. È dotato di 24 blocchi, che vanno da elementi semplici a funzionalità complesse come intestazioni e caselle dei prezzi.

Tutti i blocchi di plug-in sono progettati per essere completamente reattivi nel plug-in disponibile sia in un pacchetto gratuito che premium. Se stai cercando un plug-in di blocco completo che ti dia uno strumento potente per tutti gli usi e ti fornisca funzionalità che non siano utili solo per blogger, proprietari di siti di e-commerce e piccole imprese, devi dare un'occhiata a impilabile.

CoBlock

Un plug-in potente ma leggero, CoBlocks offre funzionalità aggiuntive all'editor del blog di WordPress senza gonfiare. CoBlocks ti offre blocchi aggiuntivi nella vera costruzione di righe e colonne, offrendoti una vera esperienza di creazione di pagine per Guttenberg. Grazie al suo innovativo sistema a blocchi, ti consente di creare splendide pagine Web e persino interi siti Web con il nuovo editor di WordPress.

Al centro ci sono gli eccezionali blocchi di righe e colonne per aiutare a generare dinamicamente aree di contenuto con margini reattivi specifici e impostazioni di riempimento fornite dall'unico CoBlocks.

Ciascuno dei blocchi WordPress all'interno di Coblocks è stato messo a punto con precisione per offrire un'esperienza di personalizzazione familiare ma potente. Personalizza ogni blocco secondo i tuoi gusti utilizzando i nostri controlli e impostazioni personalizzati. Cambia i caratteri, imposta il riempimento e il margine, adatta i colori e altro ancora.

CoBlocks ti offre un sacco di blocchi speciali. Ad esempio, dai blocchi sociali ai menu dei ristoranti o dei servizi, i CoBlock sono creati da alcuni blocchi davvero intuitivi che forniscono un'interfaccia facile da usare con i blocchi di riga.

Il blocco che mi piace principalmente è il blocco della tabella dei prezzi che facilita la creazione rapida di tabelle dei prezzi semplici ma reattive, adatte a un'azienda di servizi. Questi blocchi speciali completano anche i temi reattivi per dispositivi mobili e aiutano nella creazione di oggetti di layout che sembrano essere stati creati prima per dispositivi mobili.

Blocchi atomici

Atomic Blocks è stato originariamente sviluppato da Mike McAllister, ma da allora è stato acquisito da Studio Press e WP Engine. Anche gli sviluppatori di WordPress Marcos Schratzenstaller e John Parris si sono uniti e hanno iniziato a contribuire al plugin. È disponibile nella directory dei plugin di wordpress.org e può essere installato direttamente nel tuo pannello di amministrazione di WordPress.

Quali sono i primi giocatori sul mercato, Atomic Blocks ha offerto una raccolta di blocchi WordPress per il nuovo editor di blog WordPress. hanno visto la necessità di costruire rapidamente più blocchi per migliorare l'aspetto dei tuoi contenuti e fornirti una maggiore capacità di utilizzare i contenuti interattivi.

Bonus: tema del blocco atomico

Il tema Atomic Blocks è progettato per aiutarti a iniziare con il plug-in Atomic Blocks e il nuovo editor di blocchi di WordPress. Si integrano perfettamente insieme in modo da conoscere una combinazione di opzioni di temi e opzioni di blocco che si integrano davvero bene insieme.

Ha stili eleganti per tutti i blocchi editor predefiniti come foto, gallerie, citazioni, colonne e altro. Il tema supporta gli ampi stili di allineamento del nuovo editor per i contenuti che coprono l'intera larghezza della pagina.

Ovviamente è ovvio che il tema Atomic Blocks si integra facilmente anche con il plug-in Atomic Blocks che aggiunge blocchi di pagine per il nuovo editor di WordPress. Atomic Blocks aggiunge anche blocchi di contenuti personalizzabili come testimonianze, avvisi, profili, pulsanti personalizzabili, fisarmonica e altro. Ha anche diverse utili opzioni di temi come larghezza del contenuto, selezione dei caratteri, dimensioni dei caratteri, caricamento del logo e altro, per aiutarti a modificare il tuo sito per tuo gradimento.

Blocchi KadenceWP

Se hai mai trascorso del tempo nell'editor di blocchi, capirai quanto può essere limitante quando si tratta di progettare layout. Soprattutto quando provieni dalla costruzione di siti in cui hai utilizzato i page builder. Questa è una delle cose che amo davvero del Kadence WP. I blocchi Kadence offrono una serie di elementi aggiuntivi che ti consentono di espandere le tue opzioni per la creazione di pagine dinamiche e flessibili.

La versione gratuita è già potente e ti dà la possibilità di creare pagine con layout complessi, ti dà il controllo su colonne, Rose, spaziatura e altro. Tuttavia Cadence ha anche una versione pro del suo plugin di blocco. E la versione pro è davvero quella che vorrai ottenere. Cadence WP ti offre una serie di layout pre-progettati, ma non solo hanno un bell'aspetto con alcune delle migliori pratiche di progettazione in mente, ma ti consentono anche di modificare praticamente ogni singola cosa di ciascuno di quei layout pre-progettati.

Il potere della cadenza è nel loro blocco di layout di riga. Il blocco del layout di riga ti offre un migliore controllo delle colonne per le diverse dimensioni dello schermo, inoltre ti offre strumenti di modifica delle righe complete come riempimento, sfondi, ingredienti per l'aggiornamento delle sovrapposizioni, allineamento verticale e molto altro

Poiché ho creato siti con Gutenberg, Kadence WP è probabilmente uno dei pochi plugin di blocco che installo e ogni singolo sito. I blocchi pro in Kadence WP sono il blocco di sovrapposizione delle immagini, il blocco post griglia/carosello, il blocco del contenuto diviso, il blocco del carousel del prodotto, il blocco modale, il blocco pop-up video e l'animazione a scorrimento.

Blocchi di lontra

I ragazzi di Theme Isle hanno creato Otter Blocks, che mira a essere uno dei plugin di blocchi più leggeri in circolazione. Ti fornisce 12 blocchi con cui puoi giocare e personalizzare mantenendo un impatto minimo sulle prestazioni del tuo sito.

Se sei un blogger questo pacchetto fa proprio per te. Tuttavia, se sei un imprenditore che ha bisogno di un set di funzionalità leggero, ad esempio blocchi di prezzi e servizi, potresti anche utilizzare questo plug-in. Attualmente non esiste una versione pro di OtterBox.

Quando ho provato a creare una pagina semplice con Otter Blocks, ho scoperto che richiedeva alcuni passaggi in più rispetto ad alcuni degli altri plug-in di raccolta di blocchi che abbiamo recensito. Detto questo, l'ho trovato più simile a quello che sperimenterei con i page builder come Beaver Builder. Prima aggiungi le tue colonne e poi aggiungi i blocchi che vuoi in esse.

In altri plugin per la raccolta di blocchi avevi impostazioni su quante colonne/funzioni/servizi erano presenti. Hai quindi alcune impostazioni all'interno di ciascuno dei blocchi. Alcuni dei plug-in per la raccolta di blocchi cercano di aiutare a risparmiare tempo, ma questo spesso mi ha portato alla frustrazione perché non riuscivo a ottenere il design che volevo.

Gutenberg avanzato

Advanced Gutenberg ha 16 blocchi ed è uno dei migliori plugin di blocchi per WordPress perché migliora il modo in cui funziona l'editor di blocchi.

Advanced Gutenberg ti consente di filtrare i blocchi disponibili in base al ruolo dell'utente e include nuove opzioni di personalizzazione per alcuni dei blocchi WordPress esistenti. Ciò significa che non devi installare un mucchio di nuovi blocchi e non utilizzare i blocchi esistenti.

Questo plugin inizia davvero a spingere i confini del design dei contenuti. Fornisce versioni avanzate di molti dei blocchi WordPress più fondamentali, offrendoti opzioni di configurazione e stile aggiuntive. Inoltre, aggiunge nuove impostazioni ad alcune delle funzionalità esistenti degli editor di blocchi.

La cosa migliore che mi piace di questo è che hanno la loro pagina delle impostazioni che ti permette di disattivare (spegnere) i blocchi che non vuoi usare. Nelle stesse pagine delle impostazioni hai anche la possibilità di modificare le impostazioni predefinite di ciascun blocco. Questo è incredibilmente utile per i costruttori di siti e i liberi professionisti che stanno costruendo siti per i clienti.

Qubely

Qubely si autodefinisce non solo un normale plugin per blocchi di Gutenberg. Invece, si parla di assumere davvero il controllo dell'editor Gutenberg di WordPress e di poter godere di tonnellate di opzioni di stile di prim'ordine.

È dotato di un generatore di layout insieme a tipografia e stile e persino a controlli reattivi che rendono davvero l'editor di blocchi di Gutenberg un gioco da ragazzi.

Quebly offre molte sezioni personalizzabili già pronte che puoi importare e utilizzare con l'editor di blocchi di Gutenberg. Ciò ti consente di risparmiare tempo durante lo sviluppo dei tuoi siti Web belli e facili da convertire. Ti dà davvero l'idea che l'editor di blocchi di Gutenberg sia in realtà solo un generatore di pagine.

Inoltre, ci sono una serie di blocchi esclusivi che migliorano le capacità dell'editor Gutenberg. Con la loro vasta collezione di blocchi esclusivi facili da personalizzare e utilizzare come principianti, non c'è da meravigliarsi se uno dei plugin di blocchi in più rapida crescita è Quebly.

Viene fornito rapidamente con 32 potenti blocchi Gutenberg personalizzati che ti consentono di progettare qualsiasi pagina da qualcosa di semplice come una pagina di destinazione della pagina di destinazione con poche immagini e del testo, forse un pulsante o due, a qualcosa di più complesso come un menu o un prodotto completo di un ristorante pagina.

Ultimi add-on per Gutenberg

Se provieni da un costruttore di pagine, in particolare Elementor o Beaver Builder, un nome con cui probabilmente avrai familiarità è Brain Force o Astra. Ultimate Add-ons per Gutenberg ti offre la libreria di add-on definitiva disponibile per i blocchi.

Attualmente ci sono 20 dei migliori componenti aggiuntivi che sono stati convertiti in blocchi WordPress e sono attualmente gratuiti dove non richiedono il pagamento per loro, quindi è incredibilmente utile utilizzare alcuni dei loro blocchi come costruzione il tuo sito.

Se usi Astra come tema WordPress, che è uno dei miei team preferiti e di cui abbiamo parlato su iThemes Training, avrai una certa familiarità con i migliori componenti aggiuntivi per Guttenberg.

Come utente di lunga data di Gravity Forms, uno dei miei migliori componenti aggiuntivi preferiti è la possibilità di modellare le tue forme di gravità. Quindi i componenti aggiuntivi definitivi ti danno uno stile o un blocco Gravity Forms. Ti consente di modellare i campi, altre opzioni di colore, include anche un layout e uno stile dei pulsanti e infine la gestione dei messaggi. Se non sei un utente Gravity Forms ma forse un utente Contact Forms 7, puoi anche avere la possibilità di utilizzare Contact Form 7 con il blocco Ultimate Add-on.

GhostKit

GhostKit è una raccolta ed estensione di blocchi Gutenberg. Ci sono attualmente 21 blocchi a tua disposizione con questo plugin. Per la maggior parte, vedrai blocchi WordPress molto simili a quelli che troverai in altri plugin.

Tuttavia, GhostKit sta adottando un approccio per aggiungere ciò che chiamano estensioni di blocco . Le estensioni dei blocchi sono essenzialmente funzionalità aggiuntive rese disponibili ai blocchi di Gutenberg registrati con l'editor dei blocchi. In molti casi, questo è vero per i blocchi Gost Kit e per i blocchi core. Potresti riscontrare problemi quando provi a vedere se queste estensioni sono disponibili con altri plugin di blocco.

Ultimate Blocks – Plugin Gutenberg Blocks

Pubblicizzato come il plugin Gutenberg Blocks per blogger e marketer, il plugin Ultimate Blocks – Gutenberg Blocks ha l'obiettivo di rendere incredibilmente facile la creazione di contenuti migliori e più coinvolgenti con Gutenberg.

Ultimate Blocks ha attualmente 19 blocchi nella sua collezione. Uno dei miei blocchi preferiti di questa raccolta è il blocco del filtro dei contenuti. Consente agli utenti di filtrare i contenuti in base a una serie di selezioni. Sono ancora piuttosto nuovi, essendo solo alla versione 2.x.

Page Builder Blocchi Gutenberg – Blocchi Kioken

Con Kioken Blocks per Gutenberg, la tua esperienza di creazione di pagine con il nuovo editor è massimizzata. Kioken Blocks ha blocchi unici e creativi che ti aiuteranno a creare e progettare pagine e post in modo rapido, bello, come un professionista.

Collezione di blocchi Gutenberg – qodeblock

Qodeblocks è una raccolta di blocchi per la creazione di pagine per il nuovo editor di blocchi Gutenberg. La versione attuale arriva al set di 14 blocchi con un diverso grado di opzioni di stile per blocco. Questi blocchi sono bellissimi.

Qodeblocks è ancora in fase di sviluppo poiché ha pubblicato solo di recente una versione 1.0. Sono entusiasta di vedere cosa hanno in serbo e li controllerò mentre continuano a svilupparsi.

Blocchi facili – Gutenberg Blocks Page Builder

Indipendentemente dal tipo di sito Web o pagina di destinazione che desideri creare, Easy Blocks è la soluzione perfetta. I loro blocchi WordPress per il marketing come call the action, pulsanti, testimonianze, counter up, loghi. I loro blocchi per servizi come una casella di funzionalità, griglia di funzionalità, tabella dei prezzi o social come condivisione social, griglia di Instagram. C'è anche un'intestazione personalizzabile, un layout del contenuto e altro ancora.

It also features the ability to have multiple columns with multiple styles to help you design any kind of landing page or product or service page from scratch. Easy Blocks comes with 20 blocks that will enhance your Gutenberg editor experience. There are a number of additional blocks they are developing and will be released in time.

Blocks Kit – Gutenberg Blocks for Freelancers

Blocks Kit is another set of Gutenberg blocks with the idea that they're aimed at editors content writers and Freelancers. It currently has 10 blocks available but they're looking at continuing to add more as they continue to develop the plugin.

One thing I found interesting about this set of plugins is that they did a ton of research to determine what type of blocks would actually be needed for any type of website development. It then created a list of options based on those selected blocks that they were thinking about to design and provide for free to anyone that wanted to use the plugin. This made it possible for any beginner to a freelancer to really use this plugin.

While Blocks Kit is simple in nature, I found that it was easy to use all of their blocks and it didn't seem to put a lot of additional page weight or have any performance issues on my test site. A paragraph if you're looking for a small set of additional blocks that you want to have available to you on your site you should definitely check this one out.

Final Thoughts on Block Plugins

There's a number of unknowns we're seeing in the WordPress theme space as we enter the world of the new WordPress editor. When we think about the changes that will likely come through in the coming months, it's hard to know where to spend your time as a block developer.

If you are still wanting to play it safe with your site, I think Otter Blocks is a good choice for those that want to live in the CSS world.

WordPress Block Extras

There are a number of additional WordPress block plugins that work to provide you with overall functionality changes to the block editor, so it's fitting to include them in this section. It's all about adding value to everything Gutenberg or block editor.

Gutenberg (The Project) Plugin

As mentioned earlier in the post, the Gutenberg plugin is still a very active project and thus still has a separate plugin that you can install to take advantage of releases prior to them being included in WordPress core. If you'd like to check out some of those new features ahead of WordPress being updated to include the newest version of Gutenberg, you can install this plugin and have those features be available to you immediately.

Blocks Animation: CSS Animations for Gutenberg Blocks

This blocks animation plugin adds an animation setting to each block but is registered with the block editor. This means that you can add any type of CSS animation that's available to you to any block inside of Guttenberg. there are three settings to get added to the block settings window. The first of the animation the second is delay and the third is speed. Each one has a drop down with a few different options that you can select.

Extra Block Design, Style, CSS for ANY Gutenberg Blocks

This plugin allows you to customize any element created in the Gutenberg block editor with 60 + options. It works with all Gutenberg blocks so that means if you have a plugin that has a block or you have a plugin that has multiple blocks registered with the block editor, these will all be editable with this plugin.

In questo modo, puoi estendere i tuoi blocchi Gutenberg essenziali con più opzioni di progettazione senza toccare alcuna riga di codice. Hanno anche aggiunto un editor CSS che consente agli utenti che desiderano modificare lo stile dei propri blocchi Gutenberg utilizzando il codice CSS.

Come bonus aggiuntivo, Stylist funzionerà con determinati costruttori di pagine:

• elementor
• Costruttore di castori
• Compositore visivo
• Compositore dal vivo
• ReCompositore
• Generatore di pagine Fusion
• Panino per la creazione di pagine
• Griglia in grassetto

È inoltre possibile utilizzare questo plug-in per personalizzare gli stili dei moduli creati con i seguenti plug-in per moduli:

• Forme Ninja
• Modulo di contatto 7
• Modulo di contatto di WPForms
• Forme Caldera
• Moduli facili per Mailchimp
• Forme Formidabili

Disabilita i blocchi di Gutenberg – Block Manager

Abbiamo esaminato una serie di plug-in di blocco Gutenberg e probabilmente ne hai installati diversi a questo punto. Il problema è che se aggiungi un paio di plug-in di raccolte di blocchi, l'editor di blocchi può diventare rapidamente disordinato.

Per questo motivo è stato creato il plugin Disable Gutenberg Blocks. Questo plugin ti consente di disabilitare i blocchi di cui tu o i tuoi clienti non avete bisogno. Questo può essere incredibilmente utile se dici che ti piace un blocco dei prezzi da una raccolta e altre raccolte includono anche una casella dei prezzi oh, puoi rimuovere gli altri.

Per utilizzare questo plugin, tutto ciò che devi fare è andare su wp-admin quindi andare su impostazioni e quindi disabilitare i blocchi lì ti darà un elenco di blocchi che sono registrati e puoi iniziare a disabilitare quelli che non vuoi più per apparire all'interno dell'inseritore di blocchi Gutenberg.

Probabilmente è superfluo dirlo, ma lo dirò comunque, se ti ritrovi a rimuovere tutti i blocchi da una raccolta specifica, probabilmente dovresti semplicemente sbarazzarti di quell'intero plugin.

Creazione di blocchi WordPress personalizzati

Prima dei blocchi di WordPress, se sei uno sviluppatore che desidera aggiungere del codice nell'editor di contenuti, in genere dovresti inserirlo direttamente nell'editor classico. Oppure dovresti seguire il percorso degli shortcode di WordPress. Un codice breve è qualcosa che puoi facilmente aggiungere ai tuoi contenuti. Si apriva con una parentesi quadra e si chiudeva con una parentesi quadra.

Tuttavia, con il nuovo editor di blocchi, l'uso degli shortcode diventerà probabilmente un ricordo del passato. Se stai utilizzando un plug-in esistente che ha uno shortcode per incorporare quel pezzo di contenuto o quella cosa nel tuo post, devi avere una soluzione visiva in modo da poter vedere come appare sulla pagina.

Quando guardi quali sono i blocchi di WordPress nell'editor, vedi davvero che sono solo un mucchio di campi personalizzati. Ora vengono salvati in una posizione diversa nel database rispetto a prima. Ciò significa che ci sono diversi plug-in che possono creare funzionalità aggiuntive per consentirti di creare blocchi molto facilmente con molte delle stesse funzionalità utilizzando campi personalizzati.

Se desideri un maggiore controllo su un blocco o desideri creare funzionalità dal tuo plug-in in un blocco WordPress, i prossimi due strumenti ti aiuteranno a iniziare.

Block Lab

Pensiamo a questo per un minuto. Se pensi ai blocchi di WordPress al livello più rudimentale, tutti i blocchi sono campi personalizzati. La differenza, tuttavia, è quali sono i campi e i tipi di valori che utilizzi per ciascun blocco. Con Block Lab, puoi aggiungere nuovi blocchi all'editor e assegnare loro una categoria.

Per ogni blocco, puoi aggiungere quasi tutti i campi personalizzati che desideri scegliendo da un'ampia gamma di preimpostazioni. Tuttavia, dovrai comunque sapere come mettere insieme semplici modelli HTML per personalizzare ogni layout di blocco. Qui possono aiutarti a delineare il processo, così hai un'idea di cosa aspettarti.

Campi personalizzati avanzati

Advanced Custom Fields è probabilmente il plugin più utilizzato per chiunque lavori con campi personalizzati. Ha creato un bel seguito in molti anni di attività, quindi non c'è da meravigliarsi che creeranno anche funzionalità per creare e registrare blocchi WordPress con il nuovo editor.

ACF ti consente di creare blocchi personalizzati in pochi minuti anziché ore. Meglio ancora, se sai già come scrivere semplici PHP e HTML, puoi farlo e lasciare che ACF Pro faccia tutto il lavoro pesante per creare nel tuo blocco.

ACF pro ha semplificato il processo in soli tre passaggi.

1. Registra un blocco

Se hai familiarità con la registrazione di un tipo di post in WP, sarai in grado di registrare un blocco con ACF Pro. La funzione utilizza un formato molto simile alla registrazione di un tipo di post, ma in questo caso si finisce per registrare un blocco.

2. Crea un gruppo di campi

Una volta registrato il tuo blocco, il passo successivo che devi fare è creare un campo Gruppo. una cosa che dovremmo sapere qui è che tutti i campi ACF possono essere utilizzati all'interno del tuo blocco in modo da non avere limitazioni su ciò che sei bloccato può o non può fare.

Una volta creato il tuo gruppo di campi, devi impostare la posizione. usa la regola di blocco per selezionare il tipo di blocco appena registrato.

3. Rendi il blocco

Infine, l'ultimo passaggio del processo è che devi dire ad ACF come eseguire il rendering del tuo blocco. Questo è essenzialmente lo stesso processo che hai usato per visualizzare i campi personalizzati, tuttavia, il tuo HTML e PHP verranno racchiusi in una funzione.

Nella funzione PHP di prima, abbiamo menzionato un'impostazione di richiamata del rendering. Questa è la funzione PHP che renderà i tuoi blocchi HTML. È dove scriverai tutto il codice personalizzato per i tuoi blocchi.

Questo è davvero tutto quello che c'è da fare. Puoi creare un blocco in questi pochi passaggi utilizzando ACF Pro.

Ambito dei blocchi ACF

Quando utilizzi un blocco scritto con ACF, salverà i dati all'interno del valore del contenuto di sottolineatura del post invece della tabella wp_postmeta come fanno le meta box quando utilizzi l'editor classico.

Questo è un piccolo cambiamento nel tuo modo di pensare quando hai utilizzato il plug-in ACF Pro per il salvataggio dei tuoi dati nel database. Che tu lo ami o lo odi, il modo in cui Gutenberg memorizza i suoi dati consente molta flessibilità. I blocchi ACF possono essere inseriti più volte all'interno dello stesso post, possono essere riordinati, modificati ed eliminati senza sovraccaricare la meta tabella dei post.

Un modo migliore per costruire blocchi WordPress

Mentre ti ho dato due modi in cui puoi usare i plugin per costruire blocchi oh, questo non è il modo ufficiale in cui vengono costruiti i blocchi. L'editor di blocchi introduce una dipendenza molto più pesante da parte di uno sviluppatore per sapere e capire come scrivere JavaScript.

Storicamente, WordPress è stato creato principalmente utilizzando PHP, che molti sviluppatori nel corso degli anni hanno imparato. Ciò significa che potrebbe esserci una curva di apprendimento per gli sviluppatori che non hanno impiegato del tempo per imparare JavaScript.

I blocchi Gutenberg vengono creati principalmente utilizzando il framework JavaScript REACT. Se vuoi adottare un approccio più nativo alla creazione di blocchi WordPress, dovresti dare un'occhiata a un post sul blog di Ahmad Awais, Crea Guten Block Toolkit: lancio, introduzione, filosofia e altro! dato che ha creato un progetto Crea Guten Block Github per aiutarti a creare blocchi Gutenberg un po' più facilmente.

Ci sono molti altri tutorial là fuori per imparare come creare un blocco WordPress usando react e JavaScript. Se questo è qualcosa che ti interessa ed è qualcosa che vuoi imparare a fare, ti incoraggerei a fare qualche ricerca e trovare quei tutorial e persino una classe o un corso per aiutarti a iniziare con REACT e gli elementi costitutivi.

Riepilogo: blocchi di WordPress e il futuro di WordPress

Come puoi vedere, i blocchi di WordPress stanno cambiando il corso di WordPress. Questo è un momento incredibile per far parte della community di WordPress come sviluppatore, costruttore di siti o creatore di siti. I blocchi di WordPress continuano a cambiare l'attuale traiettoria di dove sta andando WordPress. Ora abbiamo gli strumenti integrati in modo nativo per competere con soluzioni ospitate su siti Web come Squarespace, Wix e altro ancora.

Abbiamo visto come già in così poco tempo gli sviluppatori sono comparsi per costruire e creare raccolte di plugin di blocchi davvero potenti che ci consentono di utilizzare l'editor di blocchi in un modo nuovo. io

Se sei il proprietario di un sito o sei un libero professionista o un costruttore di siti e stai iniziando a lavorare alla creazione di nuovi siti nel 2020, ti incoraggio a provare a creare alcuni siti con l'editor di blocchi. Penso che rimarrai sorpreso da quanto puoi fare con l'editor nero che non richiede l'implementazione di molti altri plugin. (Mentre devi installare un numero di plug-in di blocco, potresti davvero installare una raccolta di blocchi e limitare le risorse che vengono messe in coda per il front-end.)

Dal punto di vista delle prestazioni, vedo l'editor di blocchi e i plug-in di blocco come un modo più semplice per mantenere le tue prestazioni davvero veloci e leggere. In precedenza, prima di utilizzare l'editor di blocchi, potresti avere plug-in che si caricano su ogni singola pagina, indipendentemente dal fatto che quel plug-in sia necessario o meno su una pagina.

In definitiva, il passaggio all'editor di blocchi e ai blocchi di WordPress aiuta gli sviluppatori a scrivere codice migliore e più efficiente. Ci consente, in qualità di costruttori di siti e proprietari di siti, di creare siti che funzionano bene fin dall'inizio perché ora vengono utilizzati gli strumenti giusti.

AJ Morris

AJ vanta oltre due decenni di esperienza nel lavoro e nello sviluppo di siti di appartenenza con una vasta gamma di clienti.