Tutorial Gutenberg di WordPress
Pubblicato: 2019-03-09Dopo decenni di popolarità come il CMS più versatile e facile da usare, WordPress è sempre stato in grado di stupire i suoi utenti con frequenti aggiornamenti tecnici. Nell'ultima versione 5.0, WordPress ha creato il suo nuovo editor visivo "Gutenberg". Quindi, demistificare Gutenberg e Blocks. Come funziona il nuovo sistema? È migliore dell'editor che avevamo prima? Entreremo in Gutenberg e in un breve tutorial per aiutarti a ottenere tutti i vantaggi dall'editor di Gutenberg.
Cos'è "Gutenberg"?
Matt Mullenweg ha escogitato un nuovo approccio per sostituire il classico editor di WordPress al WordCamp Europe 2018. Si chiamava "Gutenberg", che era inteso come nome del progetto mentre era in fase di sviluppo. Rilasciato con WordPress 5.0, il progetto Gutenberg era ora chiamato "WordPress Editor" o "Block Editor" per essere più specifici. L'editor classico era diventato un po' antiquato secondo le tendenze odierne dei web builder drag and drop. Il risultato è stato WordPress Gutenberg e un editor WordPress completamente nuovo, progettato per essere simile agli strumenti di creazione di siti Web e pagine.
Temi che funzionano con Gutenberg
Ci sono migliaia di temi disponibili, ma molti sono obsoleti. Ecco alcuni dei nuovi fantastici negozi che pubblicano temi per Gutenberg.
Plugin che funzionano con Gutenberg
Ci sono un sacco di plugin disponibili sul mercato di WordPress, ma non tutti funzionano con l'editor Gutenberg. Ecco alcuni che lo fanno.
Cosa sono i "Blocchi"?
I blocchi sono semplicemente frammenti di contenuto. Potrebbe essere un paragrafo di testo, un file audio, una galleria di foto o foto o anche un video. È il fondamento dell'esperienza di editing di Gutenberg. I blocchi vengono utilizzati per creare post e pagine web. Ciò che gli utenti normalmente vengono impacchettati in WordPress sono i blocchi standard costruiti in Gutenberg ed è disponibile per qualsiasi sito WordPress che utilizza l'editor Gutenberg. Gutenberg è stato creato in modo tale da consentire ai programmatori di estendere ed espandere i blocchi disponibili. I blocchi possono essere aggiunti utilizzando plugin o temi. Pertanto, gli utenti hanno accesso a blocchi aggiuntivi anziché essere limitati ai blocchi standard.
Utilizzo di Gutenberg come editor di WordPress
Quando sei su WordPress 5.0, otterrai "Block Editor" o "Gutenberg Editor" integrato come editor di testo predefinito per 5.0. Oggi ti aiuteremo a familiarizzare con il nuovo editor di blocchi. Immergiamoci. Per prima cosa, per creare un nuovo post come al solito premi "Aggiungi nuovo" sotto Post. Ora hai un nuovo blocco con cui lavorare.
Questo sembra molto diverso, vero? Non c'è una barra degli strumenti presente lassù dall'editor classico. Acquistiamo familiarità con le funzionalità e quei pulsanti.
Sezione superiore:
Usando questa sezione superiore, puoi aggiungere nuovi blocchi ed eseguire anche azioni come annullare e ripristinare qualsiasi modifica del blocco. Puoi anche visualizzare le informazioni sulla struttura del contenuto come il numero di parole, intestazioni, paragrafi e blocchi. Puoi persino navigare tra i blocchi usando il pulsante "i".
Alcune delle funzioni di base per la modifica dei post come Salva in bozza, Anteprima post e Pubblica un post sono contenute nella sezione superiore. L'icona della ruota dentata rivela l'impostazione visibile nella barra laterale destra. Qui puoi passare dalla visualizzazione delle impostazioni "Documento" e "Blocca".
La vista in sezione del documento è molto simile agli editor classici. Qui puoi anche selezionare lo stato e la visibilità, le categorie, i tag, le immagini delle caratteristiche e gli attributi. La vista in sezione del blocco ti consente di modificare le impostazioni di qualsiasi blocco una volta aggiunto. Questa funzione rende molto facile modificare le impostazioni per qualsiasi blocco e modificare le caratteristiche come la dimensione del carattere, i capilettera e molto altro. Da qui è possibile aggiungere singoli colori di sfondo per ogni blocco e persino l'abilitazione di classi CSS aggiuntive per ogni blocco.
Infine, i tre punti presenti nella parte superiore rivelano impostazioni aggiuntive. Da qui puoi personalizzare l'aspetto grafico del tuo editor di blocchi. È possibile scegliere la visualizzazione degli strumenti dei blocchi. Puoi anche scegliere tra "editor visivo" e "editor di codice". Ci sono anche alcuni strumenti per gestire i blocchi riutilizzabili, creare scorciatoie da tastiera e copiare il contenuto.
Aggiunta di blocchi
Ecco che arriva l'idea principale sul nuovo editor, ovvero l'aggiunta di blocchi. Come già accennato in precedenza, i blocchi sono la parte centrale del nuovo editor di blocchi. Guarda in alto a sinistra della pagina dell'editor. Questo ti darà un menu a tendina da cui puoi scegliere il tipo di blocco desiderato progettato per scopi specifici. Utilizzando la barra di ricerca, puoi trovare i blocchi corretti che soddisfano le tue esigenze.
Inoltre, scorri verso il basso nel menu e vedrai altri blocchi basati sulle loro funzioni di base. Questi sono blocchi comuni, formattazione, widget e incorporamenti, ecc. Scegli semplicemente il blocco appropriato che desideri con un solo clic.
Successivamente, ti verrà anche presentata una piccola barra degli strumenti una volta che inizi ad aggiungere contenuto nel tuo blocco. La funzione di questa barra degli strumenti dipende dal tipo di blocco scelto. Queste barre degli strumenti sono lì per eseguire modifiche per lo stile dei contenuti come allineamenti, stile, collegamenti e altro. Il pulsante Cambia tipo di blocco serve per cambiare lo stile di blocco corrente. Ad esempio, puoi modificare un blocco di paragrafo in un'intestazione, un blocco preformattato, un elenco, una citazione o un verso. Gli ultimi tre punti ti forniranno alcune opzioni in più come nascondere l'impostazione del blocco, renderla un duplicato, modificarla come HTML, aggiungerla a blocchi riutilizzabili e, naturalmente, rimuovere il blocco. Puoi anche inserire più blocchi usando le opzioni inserisci prima e inserisci dopo. Questo è utile quando è necessario aggiungere contenuti o apportare alcune correzioni rapide. A seconda dell'opzione scelta, questo aggiungerà semplicemente un blocco prima del blocco selezionato o dopo di esso. Il sistema è molto intuitivo e avrà un senso all'istante.
Modifica delle impostazioni del blocco
Ogni blocco può essere personalizzato per soddisfare le vostre esigenze. Facendo semplicemente clic sul blocco che desideri personalizzare, ti verranno forniti vari ambiti in cui puoi personalizzare il tuo blocco sulla barra laterale destra. Ricorda che puoi mostrare o nascondere questa opzione sia utilizzando la ruota dentata nella sezione superiore o la barra degli strumenti del blocco specifico. Le impostazioni dei blocchi dipendono anche dal tipo di blocco scelto. Ad esempio, se stai utilizzando un blocco di paragrafo, le impostazioni del blocco ti permetteranno di scegliere la dimensione del carattere, il tipo di carattere o il colore di sfondo. Avrai tutte le opzioni per personalizzare il tuo blocco che normalmente presumeresti fosse lì. Gutenberg è molto facile da usare e facile da imparare per i nuovi sviluppatori.
Conclusione del tutorial Gutenberg di WordPress
Ci auguriamo che questo breve tutorial di WordPress Gutenberg ti abbia aiutato a familiarizzare con il nuovo editor ricco di WordPress 5.0. È nostra ferma convinzione che dopo aver letto questa guida, non sarai più un principiante con "Gutenberg". Il nuovo editor di blocchi non è solo facile da usare, ma anche potente poiché può creare siti così velocemente con così tante opzioni. La creazione di blocchi personalizzati e l'utilizzo di strumenti per personalizzare l'aspetto grafico sono potenti funzionalità di questo editor di blocchi. C'è anche l'interfaccia facile da usare per aggiungere nuovi blocchi e aggiungere contenuti. Se scopri che in realtà ti piace di più il vecchio editor e non ti piace il nuovo editor, non preoccuparti. Puoi tornare all'editor classico in qualsiasi momento. Questo è il meglio di entrambi i mondi e consentirà alle persone di utilizzare l'editor che le rende più produttive.