Perché e come utilizzare l’editor a blocchi di WordPress (Gutenberg)

L’editor a blocchi WordPress (chiamato anche Gutenberg) è stato introdotto a dicembre 2018, quando è stata rilasciata la versione 5.0 di WordPress. È stato un momento storico nella progressione del progetto open source WordPress. Da allora, abbiamo visto come Gutenberg ha cambiato il modo in cui le persone usano WordPress quotidianamente.

Ma cosa significa per te l’editor a blocchi di WordPress? In qualità di libero professionista, proprietario di un’agenzia o imprenditore, come può Gutenberg semplificare la tua capacità di progettare, costruire, lanciare e vendere siti web? Con la recente introduzione di Gutenberg 9.7, sono stato costretto a provare a rispondere a questa domanda. 

Continua a leggere per sapere cos’è l’editor a blocchi di WordPress, come si differenzia dall’editor classico di WordPress e dai page builder di WordPress.

Cos’è l’editor a blocchi di WordPress?

Quindi, per prima cosa: cos’è l’editor a blocchi di WordPress?

L’editor a blocchi di WordPress, chiamato anche Gutenberg, è un’alternativa al modo tradizionale con cui eravamo abituati a creare pagine e post in WordPress.

Prima, quando modificavi una pagina o un post in WordPress, avresti incontrato una pagina simile a un documento di Microsoft Word. L’ editor classico di WordPress aveva spazio per aggiungere un titolo, quindi un’area del corpo per testo, immagini e incorporamenti. Lungo la parte inferiore hai opzioni e funzionalità aggiuntive per configurare come funziona quella pagina.

Cosa sono i blocchi di WordPress

L’editor a blocchi di WordPress introduce i blocchi di WordPress come un nuovo modo per aggiungere e modificare i tuoi contenuti . Questo approccio ti consente di allineare e impilare le aree di contenuto a seconda di ciò che sono effettivamente, piuttosto che mettere tutto il tuo contenuto in un’unica grande area modificabile. 

I blocchi di WordPress possono essere semplici come un blocco di testo o più complessi. Gutenberg ti consente non solo di aggiungere contenuti a una pagina o a un post, ma anche di ottenere informazioni specifiche sul design e sul layout della pagina.

Uno dei vantaggi dell’editor a blocchi è che offre opzioni di contenuto integrate senza la necessità di installare plugin separati. L’editor a blocchi ti mostra molto bene ciò che vedranno i tuoi utenti nel front-end.

Temi WordPress per l’editor a blocchi

La buona notizia è che il nuovo editor di WordPress funziona con tutti i temi di WordPress. Se hai un tema sul tuo sito che ami assolutamente e vuoi passare a Gutenberg, puoi farlo! Non devi preoccuparti di controllareche il builder che ti piace sia compatibile con il tema che ti piace.

Ci sono, tuttavia, temi che sono stati ottimizzati e progettati specificamente per l’editor a blocchi in mente. Ad esempio, l’ultimo tema predefinito di WordPress, Twenty Twenty-One , richiede che Gutenberg funzioni. 

I temi incentrati su Gutenberg offrono template predefiniti, che possono ridurre drasticamente la quantità di lavoro che dovresti fare per creare una pagina o un post.

Editor a blocchi di WordPress VS page builder

Se hai già utilizzato un page builder WordPress (come Beaver Builder , Elementor  o  Divi ), l’editor a blocchi dovrebbe effettivamente sembrarti familiare. 

I page builder sono ottime soluzioni per creare pagine e post e Gutenberg è stato sviluppato per soddisfare esattamente la stessa esigenza, solo come funzionalità integrata del core di WordPress. 

L’editor a blocchi offre maggiore flessibilità con una libreria di blocchi in continua crescita. Tuttavia, va notato che i page builder sono dotati di molte più funzionalità pronte all’uso e più facili da usare.

Il vantaggio principale di Gutenberg rispetto ai page builder? Le prestazioni. Nel complesso, l’utilizzo dei blocchi di WordPress per le pagine e i post migliorerà le prestazioni complessive del tuo sito. In modo particolare se il tuo sito contiene un numero elevato di pagine, Gutenberg è migliore per velocità e altre metriche sulle prestazioni.

Gutenberg VS Elementor

Quando si tratta di Gutenberg vs Elementor, il fattore prestazioni è stato dimostrato alcune volte con diversi esperimenti. 

Ad esempio, Template Monster ha eseguito un test di velocità del sito web di Google prima e dopo l’installazione di Gutenberg. Il punteggio è passato da 84 a 99. 

Kyle Van Deusen ha condotto esperimenti simili confrontando Elementor e Gutenberg. Ha notato una bella differenza nei suoi test GTMetrix . Ha condiviso le sue scoperte con queste statistiche nella tabella seguente.

I punteggi di Elementor sono elencati a sinistra, mentre quelli di Gutenberg a destra. Come puoi vedere, l’ editor a blocchi di WordPress ha raggiunto o superato i punteggi delle prestazioni in ogni singola metrica.

Per questo motivo e altro ancora, molti membri della community di WordPress si sono chiesti se l’editor a blocchi renderà completamente obsoleti i page builder. Ciò potrebbe avere enormi effetti sull’ecosistema finanziario di WordPress, poiché ci sono centinaia di persone che si guadagnano da vivere realizzando, vendendo e supportando i page builder. 

È impossibile sapere cosa accadrà, ma è una buona idea rendere il tuo sito a prova di futuro almeno familiarizzando con Gutenberg.

Pro e contro dei blocchi WordPress

Parleremo di diversi punti a favore di Gutenberg di seguito, ma vogliamo essere trasparenti! Gutenberg non è perfetto. In effetti, da quando è stato rilasciato l’editor a blocchi di WordPress, c’è stata una notevole quantità di obiezioni verso l’editoa a blocchi.

Se hai appena imparato a usare WordPress o lo usi da anni, l’editor a blocchi richiede un bel cambiamento. È difficile imparare a usare Gutenberg se hai già un solido flusso di lavoro con l’editor classico o il tuo page builder preferito. 

Il  plugin Classic Editor, che ripristina l’editor originale e il post editor, essenzialmente “rimuovendo” Gutenberg, è uno dei plugin più scaricati di tutti i tempi con oltre 5 milioni di installazioni attive.

Un altro svantaggio è che il nuovo editor di WordPress non è molto accessibile. Un audit di accessibilità eseguito nel 2019 da WPCampus (finanziato dalla community di WordPress e Automattic) ha rivelato dettagli su 90 problemi totali. I problemi includevano un contrasto cromatico insufficiente, la mancanza di funzioni annunciate alle tecnologie di assistenza, la mancanza di etichette adeguate e altro ancora. 

Per le persone che realizzano blocchi per Gutenberg, ci sono problemi di cui essere a conoscenza riguardo alla compatibilità con le versioni precedenti. Questo è un problema più che altro tecnico. Ma il tutto si riduce al fatto che i cambiamenti e gli aggiornamenti a Gutenberg potrebbero arrivare più lentamente del previsto.

Infine, come con tutte le cose che costruisci sul web, a volte le cose si bloccano. I plugin e i temi più popolari sono stati rigorosamente testati con Gutenberg. Ma con 50.000 plugin nel repository e innumerevoli temi da scaricare, è impossibile che tutto sia perfettamente compatibile.

Perché pensiamo che l’editor a blocchi di WordPress sia la strada da percorrere

Sebbene l’editor a blocchi non sia perfetto, riteniamo che sia l’opzione più efficace per le persone che vendono servizi di progettazione e sviluppo WordPress. 

Le prestazioni, la facilità d’uso, la base di risorse e la capacità di sistematizzazione dell’editor a blocchi di WordPress lo rendono un gioco da ragazzi.

Entriamo esattamente nel motivo per cui utilizzare l’editor a blocchi di WordPress per creare siti WordPress è la strada da percorrere.

Facilità d’uso

Non può essere più facile che trascinare e rilasciare i blocchi di WordPress per creare una pagina o un post. Hai bisogno di una nuova immagine? Prendi il blocco immagine di WordPress, trascinalo in posizione, personalizzalo e il gioco è fatto. 

I blocchi di WordPress sono più intelligenti nel modo in cui si comportano l’uno con l’altro e il flusso di quella relazione sta diventando più stretto nel tempo.

Il tuo vecchio contenuto si sposterà automaticamente in Gutenberg dall’editor classico. Quindi supponiamo che tu stia lavorando con un cliente che desidera che il suo sito venga spostato da un editor all’altro. Non è necessario importare di nuovo tutto quel contenuto e nessun shortcode WordPress da esaminare e rimuovere.

Come accennato in precedenza, l’editor a blocchi di WordPress funziona automaticamente con quasi tutti i temi. Tu e i tuoi clienti potete scegliere il tema più adatto e beneficiare comunque dell’editor a blocchi.

WordPress è, essenzialmente, una piattaforma di pubblicazione di contenuti. Scrivere post di blog lunghi come questo è molto più semplice con l’editor fullscreen che può aiutare a eliminare le distrazioni. Gestisci un sito per un blogger? Possono scrivere post senza preoccuparsi di tutti i tecnicismi che preferiresti non tocchino.

Se in precedenza hai utilizzato i page builder per sistematizzare il lavoro del clienti, puoi fare lo stesso gratuitamente utilizzando Gutenberg. Elimina completamente i costi di licenza per sito. Gutenberg essenzialmente ti consente di creare il tuo page builder, utilizzando solo i blocchi che desideri per quel sito web. Ad esempio, se hai un sito web di brochure di 2-3 pagine, probabilmente non hai bisogno di un editor con 50 diversi tipi di contenuto e 10 diversi template. Gutenberg può essere snello o completo quanto ne hai bisogno, a seconda del progetto.

Complessità/Personalizzazione

Gutenberg è facile da usare e da imparare, e più impari, più vuoi imparare. Oltre a inserire semplicemente il contenuto, i blocchi di layout di Gutenberg consentono di determinare esattamente come funziona il contenuto. I blocchi di WordPress sono automaticamente responsive, quindi c’è un lavoro extra minimo che devi fare per costruire un design ottimizzato per dispositivi mobili.

Opzioni della sidebar

Quando aggiungi testo, immagini o altri blocchi WordPress, hai diverse opzioni di personalizzazione a portata di mano. Il menu sul lato destro può offrirti opzioni tipografiche, opzioni di colore e molto altro ancora. Tutto dipende da quale blocco hai selezionato in quel momento.

Ottimizzato per modificare il codice

Sull’editor originale hai sempre avuto la possibilità di passare a una modalità HTML. Una nuova funzionalità ora ti consente di riconoscere e risolvere più facilmente i problemi con il codice che hai modificato. Se commetti un errore potenzialmente dannoso per il sito, Gutenberg ti offrirà di ripristinarlo alla versione originale.

Modalità a schermo intero

Se stai entrando in modalità scrittura o progettazione, potresti voler ridurre al minimo le distrazioni sulla pagina. Gutenberg ti consente di avere più spazio sullo schermo quando crei una pagina o un post. E puoi anche rimuovere del tutto la barra laterale destra, se lo desideri.

Blocchi riutilizzabili e recenti

Vedremo di più sui blocchi riutilizzabili, ma le funzionalità circa i blocchi sono davvero fantastiche. Sviluppare un flusso di lavoro con i tuoi blocchi personalizzati preferiti è piuttosto semplice una volta che ci hai preso mano. Salva le impostazioni dei blocchi che hai personalizzato e rivisita quelle che hai usato di recente nel menu dei blocchi.

Aggiungi facilmente classi CSS ai blocchi

Se stai combinando blocchi WordPress con codice personalizzato, usa la scheda Avanzate nel menu Blocco per aggiungere classi CSS aggiuntive. Puoi anche usare questa sezione per cose specifiche del blocco, come aggiungere facilmente ancoraggi HTML ai titoli.

Un futuro luminoso per i blocchi di WordPress

Il co-fondatore di WordPress Matt Mullenweg ha condiviso molti aggiornamenti sull’editor a blocchi allo State of the Word virtuale nel 2020,Una delle cose più eccitanti di Gutenberg sono le possibilità economiche esplosive. Sempre più persone costruiranno e venderanno blocchi, plugin basati su blocchi e temi basati su blocchi. Se vendi già prodotti o servizi su WordPress, questi servizi saranno presto quelli da tenere d’occhio.

Come usare i Blocchi WordPress

Ora che hai una solida conoscenza di cos’è Gutenberg e perché è importante, impariamo effettivamente come usarlo! Ci sono tanti articoli e video là fuori. Quello che segue sarà un corso accelerato per produrre contenuti con i blocchi Gutenberg e WordPress.

Non è richiesta l’installazione dell’editor blocchi. Se hai installato WordPress 5.0 o versioni successive, hai già Gutenberg!

Se vuoi provarlo prima in un ambiente di staging o locale, puoi scaricare l’ultima versione di Gutenberg dal repository di WordPress .

Quindi, caricalo sul tuo sito di staging o locale. Questo è il modo ideale per esercitarsi e testare. Il modo migliore per imparare a usare l’editor a blocchi è semplicemente iniziare a usarlo!

Aree principali dell’editor a blocchi

In generale, quando si utilizza l’editor a blocchi per creare qualsiasi tipo di pagina web, ci sono alcune aree con cui acquisire familiarità. Queste sono aree che probabilmente utilizzerai molto.

• Aggiungi e formatta il testo con il blocco paragrafo
• Aggiungi e modella le immagini con il blocco immagine (c’è anche un blocco galleria integrato che elimina la necessità di plugin galleria aggiuntivi)
• Vari blocchi di incorporamento per HTML, incorporamento di codice, tweet, video, ecc.
• Tabelle per mostrare dati o altre informazioni in righe e colonne

Nozioni di base sull’editor a blocchi per la creazione di una pagina

Una pagina e un post sono costruiti più o meno allo stesso modo. Ma ci sono alcune funzionalità di Gutenberg che sono davvero molto utili nella pubblicazione di qualsiasi tipo di contenuto.

Salva e riutilizza i blocchi. Quando crei pagine per coerenza, risparmia tempo costruendo e modellando un blocco, quindi salvandolo come blocco riutilizzabile. Puoi impostare un nome per renderlo più facile da trovare in seguito. In qualsiasi altra pagina, seleziona semplicemente Nuovo blocco, quindi vai alla scheda Riutilizzabile per trovarlo.

Alcuni temi vengono forniti con modelli o gruppi di blocchi forniti con un pre-styling. Questo serve come ottimo punto di partenza. Combina un template personalizzato con i blocchi riutilizzabili per creare nuovi modelli per il design del tuo sito.

Molti plugin forniscono blocchi come parte del loro software. Se ad esempio hai installato il plugin WooCommerce o GiveWP, i loro moduli appariranno nella libreria dei blocchi, pronti per essere installati immediatamente. Questo è fantastico se sei stufo di copiare/incollare shortcode.

Utilizza la scheda Pagina per personalizzare i meta dettagli sulla pagina. Questa sezione potrebbe sembrare familiare, poiché il layout non è cambiato molto dall’editor classico. In questa sezione puoi impostare lo stato della pagina, il permalink, l’immagine in evidenza e gli attributi della pagina.

Come disinstallare e rimuovere l’editor a blocchi

Gutenberg non può essere disinstallato o rimosso da un sito WordPress senza immergersi nel codice sorgente. Puoi utilizzare invece il plugin Classic Editor per aggiungere nuovamente la vecchia funzionalità al sito.

Domande frequenti (FAQ)

Conclusione

Come accennato in precedenza, Gutenberg non è stato accolto a braccia aperte. Alcune persone trovano ancora frustrante abituarsi al suo funzionamento.. Tuttavia viene costantemente testato, analizzato e corretto. Versioni più stabili vengono rilasciate regolarmente. Queste versioni contengono sfumature e miglioramenti all’interfaccia utente ed è tutto direttamente correlato al feedback fornito da utenti reali.

Gutenberg è ancora attivamente testato e migliorato. Tutti gli utenti di WordPress (non solo programmatori e sviluppatori) sono incoraggiati a provarlo e a fornire feedback. Ci sono diversi modi per farlo:

• Lasciare commenti e feedback nel  modulo di supporto di WordPress
• Aprire un problema su Github  (ideale per conversazioni più tecniche)
• Partecipare alle discussioni nel canale #core-editor sul canale WordPress Slack

Buon lavoro.