Share
La nuova interfaccia di modifica di Gutenberg è un importante cambiamento in arrivo su WordPress 5 quest'anno e interesserà gli sviluppatori di plug-in WordPress, i progettisti di temi e i creatori di siti Web.
In questo video ti mostrerò come configurare Gutenberg come plug-in sul tuo sito esistente e come iniziare a utilizzare l'editor Gutenberg per creare contenuti.
Segui e scoprirai in prima persona alcune delle nuove funzionalità di Gutenberg.
Un buon punto di partenza per conoscere Gutenberg è sulla pagina Gutenberg nel Codice WordPress. Ti dà una panoramica di ciò che è Gutenberg e ti dice anche come puoi contribuire a migliorarlo e costruire il futuro. Puoi farlo inviando il tuo feedback tramite il questionario di feedback, che puoi usare anche per chiedere supporto.
È inoltre possibile visualizzare i requisiti di test per testare Gutenberg. La ragione per cui è importante seguire questi requisiti è che tutti eseguano test in modo coerente, aiutando il team che sta sviluppando Gutenberg a renderlo il migliore possibile.
Gutenberg non fa ancora parte del core di WordPress, ma sarà in una versione futura. Tieni presente che nel frattempo potrebbe anche cambiare, in parte a causa di quel feedback, e in parte a causa del lavoro ancora in corso per renderlo buono come può essere. Ma nel frattempo, diamo un'occhiata a come puoi ottenere Gutenberg sul tuo sito in questo momento e darti una rapida panoramica di come appare.
Il modo in cui puoi ottenere Gutenberg adesso è tramite un plugin. Quindi installalo nel solito modo: vai a Plugin> Aggiungi nuovo, cerca "Gutenberg" e, quando lo hai trovato, fai clic su Installa ora e poi Attivare.
Ora che hai installato il plugin, l'editor Gutenberg sarà attivo sul tuo sito.
Aprirò un post esistente sul mio sito per mostrarti come appare la schermata di post-editing in Gutenberg.
Puoi vedere che questo sembra abbastanza diverso da come era solito. Quando passo il mouse sopra le cose, le icone appaiono con tre punti sul lato destro, mostrandomi che ogni elemento nel mio contenuto è diventato un blocco.
Se faccio clic su un blocco, ho qualcosa che sembra un po 'più familiare, sembra il vecchio lavello della cucina nell'editor classico. Ma puoi vedere che non hai le schede per la vista del codice e la vista normale in alto.
Sul lato destro, ho un insieme un po 'diverso di quello che prima erano i metabox, che un tempo erano piuttosto diversi nel vecchio editor. Questo sembra molto più simile al Customizer. Quindi, se hai lavorato con il Personalizzatore in WordPress, questo layout ti sarà familiare. È possibile fare clic su ciascuna voce per espandere la sezione corrispondente. Nel complesso, rende le cose un po 'più ordinate e riduce la necessità di scorrere.
Puoi aggiungere altri blocchi facendo clic sull'icona più in basso a sinistra e un menu ti mostra le diverse opzioni.
Se sei un utente esperto di WordPress, e in particolare se sei uno sviluppatore WordPress, potresti sollevare le mani inorridito. Ma posso vedere come per gli utenti meno esperti e le persone che hanno una visione più ampia, questo renderà le cose molto più semplici.
Gutenberg ti aiuta anche a spostare le cose in giro. Quindi ho intenzione di creare un blocco di paragrafo da alcuni dei contenuti esistenti nel mio post. Quando l'ho fatto, posso quindi selezionare i miei blocchi e spostarli su e giù facendo clic sulle frecce a sinistra.
Questo ti dà molta flessibilità quando si tratta di spostare le cose nel tuo sito e di gestire le cose in modo visivo.
Ci sono anche altri tipi di blocchi. Un elenco, ad esempio, diventa un blocco tutto da solo.
Inizierò suddividendo il mio contenuto esistente in blocchi facendo clic sull'icona di controllo e selezionando Converti in blocchi dal menu che appare.
Gutenberg poi separa le mie intestazioni e i singoli paragrafi, e crea anche blocchi separati per ciascuna lista. Quindi è molto semplice e veloce convertire i tuoi post esistenti in contenuti compatibili con Gutenberg.
Ti ricorderai all'inizio, ho detto che non c'erano tabulazioni in alto per la visualizzazione del testo e la vista del codice. Invece, puoi lavorare sul codice per un singolo blocco. Quindi, se clicco sull'icona di controllo a destra, posso selezionare Modifica come HTML. Quindi visualizza il blocco nella vista del codice e posso modificare il codice in quel particolare blocco.
Se sei come me e hai dovuto scavare in profondità nel codice di un post lungo, può essere davvero complicato cercare di trovare il frammento di testo con cui hai lavorato, quindi questo lo rende molto, molto più facile lavorare con un pezzo di codice specifico.
Quindi i blocchi rendono davvero Gutenberg quello che è, e spero che questo ti abbia dato un po 'di feeling con i blocchi e come funzionano. Un blocco è fondamentalmente equivalente a un elemento nel tuo codice HTML. Se dovessi dare un'occhiata al markup dell'output per il tuo file, vedresti che ognuno di questi è allo stesso livello. Quindi hai intestazioni, paragrafi ed elenchi e sono tutti allo stesso livello all'interno del tuo codice HTML.
Puoi anche dividere e unire i blocchi usando lo stesso menu di controllo che si apre dall'icona con i tre punti, e c'è anche un Disfare pulsante in alto, che è davvero utile. E con le liste, puoi facilmente passare da diversi livelli di indentazione, o tra elenchi puntati e numerati, semplicemente usando il menu sopra il blocco pertinente.
Ora che ho convertito il mio contenuto in singoli blocchi, posso anche fare clic Bloccare nella barra laterale a destra e modificare le impostazioni per ciascun blocco.
Puoi anche mostrare e nascondere la barra degli strumenti delle impostazioni facendo clic sul menu di controllo accanto a un blocco e scegliendo Mostra impostazioni avanzate o Nascondi impostazioni avanzate. Se lo nascondi, otterrai un'esperienza di editing piacevole e pulita.
In questo modo puoi avere una panoramica delle principali cose che puoi fare con i blocchi di Gutenberg. È possibile aggiungere blocchi, modificare il tipo di blocco che esiste, ed è possibile modificare il codice sottostante. Puoi duplicare blocchi, puoi unirli, puoi dividerli e puoi spostarli all'interno del documento.
Non ho ancora usato Gutenberg su un live set, ma correre per questo corso mi ha reso davvero entusiasta di come Gutenberg funzioni e di come possa aiutarmi a modificare i miei contenuti nel mio sito WordPress.
Spero che Gutenberg ti sarà utile, e spero che ti sia piaciuta questa rapida panoramica delle sue caratteristiche principali.
Impara come usare WordPress o rimani bloccato e impara lo sviluppo di WordPress con le nostre guide complete. Tutti i corsi di queste guide sono gratuiti per la visualizzazione con un abbonamento a Envato Elements. Con una sola tariffa mensile bassa, ottieni accesso illimitato alla nostra libreria in crescita di oltre 1.000 corsi video e eBook leader del settore su Envato Tuts+.
Inoltre ora ottieni download illimitati dall'enorme libreria Envato Elements di oltre 500.000 asset creativi. Crea con caratteri, foto, grafica e modelli univoci e realizza progetti migliori più velocemente.
Accentsconagua