Funzionalità di Gutenberg avanzate
Nella terza lezione del nostro corso Gutenberg ci occupiamo delle funzionalità di Gutenberg avanzate. Grazie a loro e ad alcuni plugin il tuo lavoro risulterà più veloce e produttivo, accorciando i tempi di realizzazione del sito WordPress.
Le funzionalità di Gutenberg avanzate velocizzano la creazione del sito
Come realizzare un sito WordPress in modo rapido e agevole
Per ottenere i migliori risultati quando si esegue un lavoro, l’ideale è aver a disposizione strumenti semplici ed efficaci che consentano di raggiungere lo scopo.
Riguardo la creazione di un sito WordPress, l’introduzione del nuovo editor di contenuti Gutenberg pare sia andata invece nel senso opposto.
Non è così però, e infatti uno degli scopi di questo nostro corso base su Gutenberg è proprio quello di dare indicazioni per usarlo al meglio e scoprire aspetti sconosciuti o poco usati.
Ad esempio, esistono diversi modi che probabilmente non tutti sanno, per personalizzare Gutenberg e renderlo più comodo da usare per lo sviluppatore.
Principalmente si tratta di sfruttare alcune delle funzionalità di Gutenberg avanzate presenti nelle impostazioni di personalizzazione, questo ci faciliterà sia nell’usare l’editor stesso che nella creazione di pagine e articoli.
Per la personalizzazione dell’area di lavoro di Gutenberg vedremo quindi sia le impostazioni dell’editor che i comandi da tastiera, concluderemo infine con l’organizzazione dei blocchi.
Iniziamo la lezione partendo dalle impostazioni dell’editor, quelle che consentono di configurarlo con gli strumenti messi a disposizione dal CMS.
Partiamo impostando le opzioni native di Gutenberg e dando alla nostra dashboard l’aspetto che preferiamo, in linea il più possibile con il nostro modo di lavorare.
Impostazioni dell’editor Gutenberg
Per dare l’aspetto voluto alla nostra area di lavoro partiamo cliccando sull’icona 11 di cui abbiamo già parlato nell’introduzione a Gutenberg (lezione 1).
Ci viene mostrato un elenco di opzioni per impostare la dashboard come preferiamo, sono quelle che vediamo qui sotto.
Osserviamo l’immagine: le opzioni dalla A alla D servono a configurare l’area di lavoro, puoi cliccare su ognuna di loro e attivare ogni singola opzione.
Alcune di queste opzioni sono accessibili anche dalle impostazioni generali, visualizzate cliccando il link “Preferenze” indicato dalla freccia 2 in basso nell’immagine (le analizziamo tra poco).
Abbiamo poi le opzioni contrassegnate con le lettere E, F e G, quest’ultima com’è intuibile serve a copiare tutti i blocchi presenti nell’articolo, la sua vera utilità a dire il vero è ancora da scoprire.
Con l’opzione E entriamo invece nel mondo dell’FSE, ovvero il Full Site Editor, il nuovo sistema di creazione siti WordPress a cui ho dedicato un’intera lezione e che trovi al link su indicato.
Per farti un’idea della vastità del progetto Gutenberg di WordPress, delle sue potenzialità e di cosa si può fare con i pattern, osserva le due immagini seguenti.
L’opzione F è invece un elenco di combinazioni di tasti che possono farti risparmiare tempo, in varie situazioni, mentre stai scrivendo il tuo contenuto.
Impostazioni di visualizzazione BARRA DEGLI STRUMENTI (opzione A)
L’opzione A permette l’attivazione o disattivazione dell’icona 3 che vedi nell’immagine.
In effetti definirla funzionalità avanzata sembra esagerato, perché tutto si può dire meno che la sua abilitazione fornisca grandi vantaggi allo sviluppatore.
Semplicemente c’è e quindi va menzionata.
Funzionalità di Gutenberg MODALITA' IN RISALTO (opzione B)
Scegliere di attivare l’opzione B permette di usare la modalità in risalto. In questo caso abbiamo in effetti un’utile funzionalità perché, come vedi, viene evidenziato solo il blocco su cui stai lavorando.
Oltre a questo viene mostrata la barra strumenti del blocco attivo con le sue opzioni di modifica, mentre il resto del contenuto rimane ombreggiato.
In questo modo puoi concentrarti su quello che stai facendo e focalizzarti sul lavoro.
Funzionalità avanzata MODALITA' A SCHERMO INTERO (opzione C)
La modalità avanzata a schermo intero dell’editor Gutenberg (opzione C) è già attiva.
Ti permette di nascondere la tipica barra a sinistra della dashboard di WordPress e lavorare a schermo intero. Per vedere la differenza clicca la voce e disabilitala.
Funzionalità avanzata di Gutenberg SENZA DISTRAZIONI (opzione D)
Anche l’opzione contrassegnata con la lettera D è piuttosto interessante. Sicuramente può essere utile a chi realizza siti WordPress quotidianamente e vuole rimanere concentrato sul lavoro.
Abilitarla significa infatti trovarsi l’area di lavoro completamente pulita liberandola dalla barra degli strumenti superiore.
Se vuoi farla riapparire è sufficiente portare il cursore del mouse nella parte superiore dello spazio di lavoro, per riattivarla invece devi disattivare l’opzione D dal menù opzioni di visualizzazione.
Altre funzionalità avanzate di Gutenberg (opzioni E, F, G)
Riguardo la voce “Gestisci i pattern” (opzione E) abbiamo già detto che si tratta di un argomento vasto e a cui sarà dedicata almeno una lezione completa.
Si tratta infatti di quella parte del progetto Gutenberg che permette la gestione completa del sito, la modifica dei template e relative sezioni (header, footer etc), più la loro creazione.
Dell’opzione G c’è poco da dire, mentre per le “Scorciatoie da tastiera” (opzione F) spendiamo due parole e un’immagine.
Si tratta di studiare o prender nota delle combinazioni dei tasti che permettono allo sviluppatore di velocizzare alcune operazioni.
Grazie a queste scorciatoie, sia che tu voglia fare delle operazioni (attivare o disattivare) o selezionare qualcosa (blocchi, testo e altro), puoi farlo più rapidamente.
Impostare le funzionalità di Gutenberg avanzate dal link PREFERENZE
Vediamo adesso le possibilità d’impostazione dell’area di lavoro dell’editor Gutenberg disponibili cliccando sul link “Preferenze” (2).
Viene mostrata una finestra che raggruppa dei comandi suddivisi a loro volta da tre voci di menù (“Generale“, “Blocchi“, “Pannelli“).
Suddividiamo quindi anche noi le descrizioni in tre parti fornendo un’immagine cliccabile per ognuna di loro, in modo da aver più chiaro di cosa stiamo parlando.
Impostazioni PREFERENZE di Gutenberg pannello 1: GENERALE
Nel pannello 1 delle impostazioni generali delle funzionalità di Gutenberg puoi scegliere come visualizzare l’area di lavoro, la prima voce riguarda però la fase finale della creazione del contenuto (articolo o pagina che sia): “Pubblicazione“.
Prima di rendere pubblico il contenuto, permette di essere informati dall’editor sulla situazione, mostra infatti un elenco di controllo riassuntivo.
Se abilitata, Gutenberg ti chiederà di rivedere le impostazioni, in particolare rispetto la visibilità, la data di pubblicazione, le categorie e tag (se è un articolo).
Come funziona l'opzione PUBBLICA
L’elenco di controllo viene visualizzato alla fine della realizzazione del contenuto, dopo che hai cliccato sul pulsante “Pubblica“ e solo quando il post o la pagina sono ancora nella fase di bozza.
Tra le modifiche possibili puoi cambiare la visibilità (pubblico, privato o protetto da password) e la data di pubblicazione.
Spuntando la casella in basso puoi decidere che l’opzione sia abilitata anche nei prossimi post e pagine.
Verifichi quindi che tutto sia a posto e se vuoi, fai le modifiche che ritieni necessarie.
A questo punto, cliccando nuovamente sul pulsante “Pubblica” rendi visibile il contenuto.
NOTA: l’opzione di pubblicazione è in effetti abbastanza utile per chi crea siti web e infatti è già attiva di default.
Quando si lavora online consente di fare gli ultimi ritocchi prima di rendere disponibile il contenuto al pubblico e ai motori di ricerca.
Personalmente ti consiglio di tenerla abilitata, soprattutto se il lavoro di realizzazione della pagina web dura più giorni.
Funzionalità avanzate di Gutenberg: opzione ASPETTO
Proseguiamo nell’analisi delle preferenze generali delle funzionalità avanzate dell’editor Gutenberg e vediamo come possiamo impostare per il suo aspetto.
Innanzitutto abbiamo le seguenti opzioni:
- Senza distrazioni.
- Modalità in risalto.
- Mostra le etichette di testo dei pulsanti.
- Apri sempre la vista elenco.
- Usa gli stili del tema.
- Visualizza breadcrumb del blocco.
Tutte consentono di avere un maggiore controllo sul nostro lavoro con l’editor Gutenberg e ci aiutano ad individuare a colpo d’occhio cosa stiamo facendo e in quale punto. Vediamole una alla volta.
Lavorare senza distrazioni
É esattamente uguale al comando visto precedentemente (opzione D): liberi spazio nell’area di lavoro.
Modalità in risalto
Anche questo comando replica una delle opzioni viste prima (opzione B): viene evidenziato il blocco attivo su cui stai lavorando mentre tutto il resto assume un aspetto sfumato.
Mostra le etichette di testo dei pulsanti
La barra degli strumenti in alto visualizza i comandi principali attraverso delle icone, se fai fatica a ricordarne il significato o preferisci avere un link di testo al posto delle icone, seleziona questa opzione.
Apri sempre la vista elenco
All’apertura di ogni pagina o articolo che vuoi creare o modificare ti permette di avere già visibile la colonna di sinistra che contiene l’elenco dei blocchi che compongono il contenuto.
Come detto nella lezione dedicata all’introduzione a Gutenberg è molto utile durante la creazione dell’articolo o della pagina perché mostra la loro struttura e facilita la modifica dei singoli blocchi.
Usa gli stili del tema
Con questa opzione selezionata visualizzi come saranno i contenuti una volta pubblicati.
Significa che, attivando gli stili del tema ogni blocco presente (testo, immagini e tutto il resto) verrà mostrato con le impostazioni che gli hai dato, mentre disattivando l’opzione sarà applicato lo stile di base del tema (fai una prova per verificare).
Visualizza breadcrumb del blocco
Si tratta di una chicca, un piccolo aiuto che viene dato allo sviluppatore ma che permette di sapere immediatamente dove ti trovi rispetto al contenuto che sta realizzando.
Questo piccolo elenco orizzontale è visualizzato in basso a sinistra nella pagina e funziona esattamente come i breadcrumbs di un articolo di WordPress.
In pratica questa funzionalità di Gutenberg avanzata ti suggerisce che tipo di blocco è selezionato e la profondità rispetto il contenuto.
Nell’immagine vedi infatti l’elenco struttura e la posizione corrispondente nel breadcrumb. Il blocco selezionato non è cliccabile (esattamente come per i breadcrumbs presenti negli articoli), gli altri si.
Facendo clic su ognuno di loro, nell’area di lavoro sarà evidenziato quel blocco.
Preferenze editor Gutenberg pannello 2: BLOCCHI
Passiamo quindi alle preferenze che riguardano i blocchi.
Hai due possibilità più la disabilitazione dei blocchi che non vuoi far apparire nel pannello d’inserimento (quello che si apre quando clicchi l’icona a forma di “+”, a sinistra nella barra strumenti).
La prima opzione dice all’editor di mostrare nell’elenco dei blocchi quelli che usi più spesso, la seconda ti permette di vedere il cursore all’interno del blocco attivo.
Queste due funzionalità avanzate di Gutenberg aiutano lo sviluppatore ad aumentare l’attenzione su quello che sta facendo, abilitarli può essere utile.
Funzionalità di Gutenberg avanzate pannello 3: PANNELLI
Abbiamo infine le funzionalità di Gutenberg avanzate che riguardano i pannelli di WordPress presenti anche nelle versioni dell’editor classico.
Puoi quindi scegliere di visualizzare i pannelli di:
- categorie
- tag
- immagine in evidenza
- riassunto
- discussione
- campi personalizzati
Compariranno nella colonna di destra delle impostazioni.
Gestione intelligente dei blocchi di Gutenberg
Per gestire meglio i blocchi inseriti puoi usare un piccolo espediente, quello di dare un nome ai gruppi che contengono i blocchi.
Con questo sistema infatti, nell’elenco dei blocchi visualizzato a sinistra, identifichi immediatamente il contenuto e al bisogno puoi accedere rapidamente ad ognuno di loro.
Con questa funzionalità di Gutenberg hai anche il vantaggio di vedere a colpo d’occhio come hai costruito la pagina e inserire eventuali altri blocchi dove ti serve.
L’immagine è chiara: selezioni nell’area di lavoro un gruppo quindi cliccando la voce “Avanzate” nella barra a destra delle impostazioni del blocco inserisci una descrizione nella casella “Nome del blocco“.
Automaticamente vedrai modificarsi il termine “Gruppo” nell’elenco dei blocchi di sinistra, e prenderà il nome che hai appena inserito.
Come vedi ingrandendo l’immagine, è molto più comodo ed efficace avere dei nomi identificativi per i gruppi piuttosto che tante voci tutte uguali e poco significative.
Anche questa funzionalità di Gutenberg aiuta perciò a realizzare un sito web in modo più pulito e logico ed è utile soprattutto quando c’è bisogno di fare delle modifiche dopo un po’ di tempo dalla creazione della pagina.
Le funzionalità avanzate di Gutenberg
Nella terza lezione di oggi abbiamo visto l’impostazione delle funzionalità di Gutenberg avanzate. Queste permettono a chi realizza siti WordPress con il suo nuovo editore di contenuti di adattare l’area di lavoro alle proprie esigenze e abitudini.
Abbiamo anche visto come in realtà, dare un aspetto familiare intuitivo e comodo all’ambiente di lavoro, sia più facile di quanto si pensi.
Gutenberg è a nostro parere uno strumento potente e sicuramente migliorabile, ma già utilizzabile fin da ora con notevoli vantaggi per chi sviluppa siti web con WordPress.
SitiWeb-WP è una web agency specializzata in WordPress e Internet
Siamo esperti nella realizzazione di siti web professionali e forniamo servizi di restyling, assistenza, manutenzione e gestione dei siti WordPress. Se vuoi migliorare il posizionamento del tuo sito su Internet e farti trovare nei motori di ricerca, lo ottimizziamo in chiave SEO.
Per questi e altri servizi, contattaci!
SitiWeb-WP
Creazione siti web e assistenza WordPress
La tua agenzia web di Milano esperta in WordPress e comunicazione.