Un ringraziamento a @daisyo e @jffng per l’incredibile quantità di aiuto nello scrivere e perfezionare questa chiamata per i test.
Nota importante: Rispetto alle precedenti chiamate per i test del programma FSE Outreach, questa è intenzionalmente rivolta più ad un pubblico di sviluppatori, piuttosto che agli utenti finali o a chi utilizza site builder, con lo scopo di raccogliere feedback che abbia un grande impatto su theme.json, un nuovo strumento per gli extender. Potete leggere di più su cosa aspettarvi dalle nostre prossime iniziative qui.
Panoramica delle funzionalità
Volendo definirlo in modo generale, theme.json è un file di configurazione usato per abilitare o disabilitare funzionalità ed impostare stili di default sia per un sito che per dei blocchi. Piuttosto che avere a che fare con una miriade di indicatori di supporto dei temi o metodi alternativi, theme.json fornisce un modo consolidato e canonico di gestire tutto. Queste impostazioni includono opzioni come:
- Quali opzioni di personalizzazione dovrebbero essere rese disponibili o nascoste all’utente.
- Quali sono colori, font predefiniti, ecc., disponibili all’utente
- Definire il layout di default dell’editor (larghezza e allineamenti disponibili).
Questo file di configurazione è una grossa parte di ciò che rende i temi basati sui blocchi così potenti, dato che consente un controllo più particolareggiato ed introduce il primo passo nella “gestione degli stili” per future versioni di WordPress. Ecco alcuni dei principali benefici nell’usare questo nuovo meccanismo:
- Consente ai temi di fornire impostazioni per singoli blocchi, cosa che non era possibile in precedenza, dato che add_theme_support è rivolto alle impostazioni per l’intero editor.
- I temi che utilizzano theme.json avranno automaticamente classi e proprietà css personalizzate accodate per le impostazioni predefinite che dichiarano, anziché doverle gestire separatamente. Inoltre, questo significa che le traduzioni dei nomi delle impostazioni predefinite sono anche gestite per conto loro!
- Theme.json coordinerà core, tema e stili dell’utente in un modo che riduce la quantità di CSS che è necessario includere ed aiutare a risolvere problemi di specificità.
Anche se i temi basati sui blocchi non funzioneranno su WordPress 5.8 senza il plugin Gutenberg, dato che alcuni temi basati sui blocchi non erano completamente pronti per essere pubblicati, questa è ancora una importante funzionalità in arrivo nella 5.8 che ha necessità di test ed esplorazione. Se avete avuto delle curiosità sul mondo dei temi basati sui blocchi o avete iniziato a costruire il vostro, questa chiamata per i test è fatta per voi e dovrebbe aiutarvi a continuare ad esplorare cosa è possibile fare con theme.json dandovi allo stesso tempo la possibilità di condividere cos’altro vorreste vedere.
Potete leggere di più riguardo questa funzionalità nella documentazione che trovate qui.
Passi del test per principianti
Questa sezione è rivolta a chi vuole avere un’idea di ciò che theme.json può controllare e quale aspetto avrà il risultato.
- Vai su https://gutenberg-theme.xyz/. Questo è uno strumento che può aiutarti a generare la sezione delle impostazioni del file theme.json.
- Da qui, prova ad attivare o disattivare varie funzioni supportate dal tema. Questo ti aiuterà ad esplorare alcune delle impostazioni che è possibile controllare tramite theme.json. Ad esempio, puoi attivare i controlli relativi a colori personalizzati o link personalizzati. Nota come il codice generato nel browser cambia in base alla tua selezione.
- Usa il bottone + vicino a Palette, Gradients o Font Sizes per esplorare l’aggiunta di personalizzazioni. Ricorda che puoi modificare sia lo slug che delle variabili specifiche quali nome del colore o dimensione del font.
- Aggiungi alcune personalizzazioni e verifica quanto viene generato! Se vuoi spingerti un po’ oltre ed usare quello che hai creato, dai un’occhiata a questi passi intermedi.
Passi del test per utenti intermedi
Questa sezione è rivolta a chi desidera andare più a fondo su theme.json scrivendo il proprio file ed esplorando ciò che varie impostazioni possono controllare.
Nota: questo si concentra principalmente su funzioni supportate dal tema ed impostazioni predefinite per i blocchi nella sezione impostazioni di theme.json anziché in Global Styles.
Impostare il tuo ambiente di test
- Crea una nuova installazione di WordPress.
- Installa ed attiva il plugin Gutenberg accertandoti di utilizzare l’ultima versione (10.9.0 mentre scriviamo).
- Scarica ed installa TT1 Blocks dalla Directory dei temi.
- Naviga fino alla directory del tema TT1 Blocks ed apri il file theme.json file in un editor di testo o in un IDE.
Come regola generale, usa la versione più recente di tutte le parti che compongono la tua installazione e ricorda che le versioni potrebbero essere cambiate da quando questo articolo è stato condiviso.
Layout
- Crea un nuovo articolo.
- Aggiungi un blocco copertina con uno sfondo a tinta unita ed alcune linee di contenuto in un blocco paragrafo all’interno dell’articolo.
- Aggiungi un altro blocco copertina con uno sfondo a tinta unita ed alcune linee di contenuto in un blocco paragrafo all’interno dell’articolo. Imposta questo blocco come “larghezza ampia”.
- Aggiungi un terzo blocco copertina con uno sfondo a tinta unita ed alcune linee di contenuto all’interno dell’articolo ed imposta questo blocco come “larghezza piena”.
- Pubblica l’articolo.
- Carica l’articolo sul front end e fai caso alla larghezza dei blocchi copertina.
- Cambia il valore contentSize con un valore pixel diverso nella sezione Layout di theme.json.
- Cambia il valore wideSize con un valore pixel diverso nella sezione Layout di theme.json.
- Carica la visualizzazione di modifica dell’articolo creato in precedenza e conferma che le nuove larghezze ora vengono corrispondano nell’editor.
- Carica l’articolo sul frontend e conferma che le nuove larghezze corrispondano sul frontend del sito.
- Punti bonus: Prova ad impostare i valori di larghezza utilizzando qualcosa diverso da “px”, ad esempio “em”, “rem”, “vh”, “vw”, or “%”
Tipografia
- Imposta come true le seguenti opzioni di tipografia in theme.json:
- customFontWeight (Blocco Titolo)
- customFontSize (Blocco Paragrafo)
- customLineHeight (Blocco Paragrafo)
- dropCap (Blocco Paragrafo)
Verifica la visibilità delle impostazioni di tipografia in un blocco paragrafo (dimensione font, peso del font weight, altezza della linea and capolettera)
Verifica la visibilità delle impostazioni di tipigrafia in un blocco Titolo (dimensione font, peso del font weight, altezza della linea)
Prova che ognuna delle impostazioni venga applicata al blocco sul frontend
Cambia le impostazioni di tipografia come false in theme.json
Conferma che ognuna delle impostazioni personalizzate di tipografia nel blocco paragrafo non siano più presenti nell’editor a blocchi (Nota che le impostazioni di tipografia applicate precedentemente potrebbero essere ancora valide per i blocchi esistenti)
Crediti aggiuntivi: Aggiungi una o più famiglie di font e dimensioni di font alla sezione tipografia del file theme.json. Verifica le tue famiglie di font e dimensioni personalizzate usando un blocco pulsante.
Bordi
- Imposta come true le seguenti impostazioni dei bordi su true in theme.json:
- “customColor”: true
- “customRadius”: true
- “customStyle”: true
- “customWidth”: true
Crea un blocco gruppo che contenga un blocco paragrafo con varie righe di testo.
Verifica la visibilità delle impostazioni dei bordi in un blocco gruppo (stile, larghezza, raggio, colore personalizzato).
Verifica che le impostazioni siano applicate al blocco sul frontend.
Imposta come false le impostazioni dei bordi in theme.json.
Conferma che le impostazioni dei bordi nel blocco gruppo non siano più presenti nell’editor a blocchi.
Colore
- Imposta come true le seguenti impostazioni per custom e customGradient in theme.json:
- “custom”: true
- “customGradient”: true
- “link”: true
Aggiungi un blocco copertina con uno sfondo a gradiente personalizzato ed alcune righe di contenuto in un blocco paragrafo all’interno dell’articolo
Aggiungi un link al blocco paragrafo ed assegna un colore personalizzato al colore del link.
Aggiungi un altro blocco copertina con un’immagine di sfondo ed alcune righe di contenuto in un blocco paragrafo all’interno del post. Assegna allo sfondo della copertina uno degli effetti bicromia predefiniti.
Cambia i colori di bicromia dell’immagine di sfondo in modo che usino colori personalizzati per le impostazioni di ombre e alte luci dell’effetto bicromia.
Crediti aggiuntivi: Aggiungi uno o più colori addizionali alla tavolozza dei colori ed alle impostazioni predefinite bicromia o gradiente. Per maggiori informazioni a proposito dei gradienti CSS dai un’occhiata a queste risorse di CSS Tricks e CSS Gradient.
Nel caso possa aiutare, ecco un esempio di @daisyo del genere di risultato che dovresti ottenere alla fine.
Passi del test (molto) avanzati
Questa sezione è rivolta a chi ha esperienze di sviluppo di temi e vuole creare un tema basato su blocchi più robusto tramite l’utilizzo di theme.json. Questa è una cosa per tutti!
Se ti senti più a tuo agio con i temi basati sui blocchi ed hai del tempo per esplorare in profondità theme.json, prova a replicare un tema classico. Ecco due opzioni che dovrebbe essere interessante esplorare, ma ricorda che qualsiasi tema di default dovrebbe funzionare bene:
Mentre provi a fare questo, prendi nota di quali sono i limiti attuali, quali sono le cose più difficili da fare, e quello che invece è sorprendentemente facile! Condividi le tue impressioni nei commenti di seguito, in modo che possiamo imparare dalla tua esperienza. Questa richiesta è volutamente aperta ed avanzata, per cui non preoccuparti se non ti senti di raccogliere la sfida. Se vuoi invece seguire qualcun altro che esplora il modo in cui fare questo, segui il video dell’esperimento di @mkaz su come imparare a creare un tema basato su blocchi.
Cosa notare:
Queste domande sono specificamente per le sezioni intermedia ed avanzata:
- Al passaggio del mouse, i colori aggiunti tramite il file theme.json vengono mostrati assieme ai nomi assegnati sulla tavolozza dei colori per i vari blocchi?
- Le dimensioni dei font aggiunte tramite il file theme.json file sono visualizzate assieme a nomi e dimensioni assegnate nei menu a discesa per la selezione della dimensione dei font nei blocchi?
- I colori e le dimensioni dei font sono visualizzate correttamente quando utilizzate assieme ai blocchi nell’editor?
- I colori e le dimensioni dei font sono visualizzate correttamente quando utilizzate assieme ai blocchi sul frontend?
- Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
- Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza?
Lascia un feedback entro il 14 Luglio
Lascia un feedback (domande, commenti, perplessità) nei commenti di questo articolo e prendi nota della sezione che hai seguito. Se preferisci, puoi sempre creare delle issue in questo repo GitHub direttamente per Gutenberg, ma è improbabile che tu debba farlo per questo test. In ogni caso, Se lasci un feedback in GitHub, commenta di seguito indicando il link.
Unisciti alla nostra chiacchierata sui test di theme.json il 7 luglio.
Per aiutare chi vorrebbe esplorare in gruppo questo test e theme.json, @daisyolsen sarà la moderatrice di una chiacchierata informale specifica su questo esercizio. Se non hai mai partecipato ad una delle nostre chiacchierate in corridoio, puoi leggere di più sull’argomento qui. In fin dei conti, sono pensate per essere delle occasioni di collaborazione informale che fanno incontrare chi ha interessi simili.
Speriamo di vederti lì.
#fse-outreach-program, #fse-testing-call, #full-site-editing
