Questa è la nona chiamata per il test all’interno del Full Site Editing Outreach Program! Per sapere di più su questo programma di divulgazione, dai un’occhiata a  queste FAQ con utili dettagli. Per entrare nel vivo, vai su #fse-outreach-experiment in Make Slack per futuri annunci di test, articoli utili ed altro ancora.

Rispetto alle precedenti chiamate per il test, questa è ancora più orientata alla comunità, dopo il suggerimento di @blake di fare una chiamata che avesse come tema l’Università. Se vuoi suggerire un’idea per una chiamata per il test, sappi che è più che benvenuta e che tutte le idee saranno considerate in relazione alle attuali priorità del progetto, in modo da stabilire quali abbia più senso intraprendere. Puoi condividere idee direttamente nel canale slack o tramite DM ad @annezazu. 

Panoramica delle funzioni

Per basare questo test su un esempio della vita di tutti i giorni, torneremo a scuola come amministratori e creeremo un header personalizzato per dare il benvenuto a studenti, genitori ed insegnanti alla nostra ipotetica università. Come ispirazione, dai un’occhiata al campione di siti universitari di seguito o cercane qualcuno vicino a te! Dato che questo test si concentra sul costruire la porzione dell’header, l’attenzione è puntata su questo aspetto e sul prendere nota di cosa è stato fatto su ogni sito: 

https://www.kyoto-u.ac.jp/en

https://www.ni.ac.rs/en/student-info

https://engineering.asu.edu/

Come puoi immaginare, questo test ci consentirà di esplorare più in profondità il blocco Navigazione. Per rinfrescare la memoria, è un nuovo, potente blocco che fornisce l’abilità di modificare il menu di navigazione di un sito, sia in termini di struttura che di design. Per aiutarci a prepararlo per l’inclusione in una futura versione di WordPress, il test ha lo scopo di esplorare i limiti di cosa può fare questo blocco.

In modo simile ai test precedenti, se scegli di sbizzarrirti con la creatività, condividi uno screenshot nei tuoi commenti, in modo che possiamo complimentarci per quello che hai creato. Come ispirazione, ecco il mio esempio di seguito, con più livelli di elementi sottomenu visualizzati:

Ambiente di test

Anche se più avanti troverai maggiori informazioni per assicurarti di impostare tutto nel modo corretto, ecco gli aspetti chiave necessari per il tuo ambiente di test: 

• Usa un sito di prova. Non usare un sito di produzione/live. Puoi seguire queste istruzioni per creare una installazione locale o usare uno strumento come questo per impostare un sito di sviluppo.
• Usa la versione più recente di WordPress (che puoi scaricare qui).
• Usa la versione più recente del Tema T1 Blocks. 
• Usa la versione più recente di Gutenberg (11.2.1 mentre scriviamo).
• Scarica ed importa i contenuti demo per Gutenberg (apri il link e fai clic su “Download) creati apposta per questo test, utilizzando  l’importatore in Strumenti > Importa. Puoi anche seguire questa lezione su come utilizzare contenuto demo.

In generale, assicurati di usare la versione più recente di ogni parte del setup e tieni presente che le versioni potrebbero essere cambiate da quando questo articolo è stato condiviso.

Problemi noti

Durante la preparazione di questa call per il test, sono saltati fuori alcuni problemi in cui potresti imbatterti durante la prova. Sappi che sono già stati segnalati. Ecco una lista non esaustiva di quelli più importanti:

• Quando il blocco Navigazione è inserito all’interno del blocco Colonne, il margine si azzera, causando la perdita della spaziatura per gli elementi all’interno del blocco. 
• Attualmente non è possibile aggiungere elementi in massa al blocco Navigazione. 
• Il colore di sfondo del blocco Ricerca non viene riportato sul frontend con TT1 Blocks. 

Passi del test per principianti

Questa sezione è indirizzata a chi vuole seguire dei passi specifici per creare un header e potrebbe non avere molto altro tempo per spingersi un po’ oltre con questo test. 

Anche se questa call per il test è focalizzata sulla prova di una funzionalità specifica, è probabile che troverai degli altri bug mentre utilizzi una funzione beta come questa! La segnalazione di tutti i bug che troverai è ben accetta nel rapporto che invierai riguardo il tuo test, anche se non sono direttamente riconducibili alla funzionalità di cui hai fatto il test.

Crea la struttura (parte del template, colonne, etc.)

1. Naviga fino alla vista “Site Editor (beta)”. Questo  aprirà automaticamente l’editor del template che fa funzionare la tua home page.
2. Dopo aver aperto la tua home page, rimuovi il blocco Navigazione che trovi all’interno della parte del template Header. Questo serve a reimpostare l’header in modo da poter aggiungerci dei contenuti più avanti. 
3. Seleziona il blocco Colonne genitore e, usando le impostazioni del blocco nella barra laterale, cambia il numero di colonne da 2 a 3.
4. Torna al blocco colonne e, usando le impostazioni del blocco nella barra degli strumenti, assicurati che sia impostato su larghezza piena.

Costruisci il branding del sito

1. Nella prima colonna, inserisci il blocco Logo del sito e carica/usa un logo per il sito. Puoi usare questo logo gratuito di logodust.com se vuoi.
2. Ora personalizza i blocchi titolo del sito, motto del sito e logo del sito in base ai tuoi gusti (cambia font, colore, allineamento, ecc.)
3. Nella seconda colonna, inserisci un blocco Pulsanti per aggiungere un avviso a proposito di COVID, collegandolo all’articolo sull’aggiornamento COVID di agosto. Puoi fare questo cercando il titolo dell’articolo. Se non hai ancora importato il contenuto demo necessario, fallo usando questo file di esportazione (apri il link e fai clic sulla voce “Download”). 

Crea un semplice menu per gli elementi principali 

1. Nella terza colonna, inserisci un blocco navigazione e seleziona l’opzione “inizia vuoto”. 
2. A questo punto, usa il blocco Link pagina per aggiungere le seguenti pagine dal contenuto importato: Contact, Directions, Make a Donation. Per fare questo, basta iniziare a scrivere il titolo di ogni pagina. A questo punto, noterai probabilmente il bug relativo alla spaziatura che prevediamo di risolvere nella versione 11.3 di Gutenberg. 
3. Rinomina la voce di menu Make a Donation in Donate per renderla più breve, semplicemente modificando il testo del blocco Link pagina.  
4. Per completare il menu, inserisci il blocco Ricerca e, usando le impostazioni nella barra laterale, personalizzalo in base ai tuoi gusti (scegli colore di sfondo, colore del test, larghezza, ecc.).
5. Una volta che le voci del menu sono impostate, seleziona tutto il blocco Navigazione ancora una volta e, nelle impostazioni della barra laterale, sotto “Impostazioni di visualizzazione” attiva l’opzione Abilita il menu responsive. A questo punto puoi, se vuoi puoi anche personalizzare gli stili del blocco.

Creare un menu più complesso per voci specifiche

1. Seleziona tutto il blocco Colonne che contiene le tue tre colonne (questo è uno dei casi in cui potresti trovare utile la Visualizzazione in modalità elenco). Usando le opzioni aggiuntive all’interno del menu, seleziona “Inserisci prima” per aggiungere un altro blocco. 
2. Aggiungi un altro blocco Colonne e seleziona l’opzione 30/70.
3. Da qui, seleziona tutto il blocco Colonne ancora una volta e, usando le impostazioni nella barra degli strumenti del blocco, assicurati che sia impostato su Larghezza piena.
4. Aggiungi un blocco Navigazione alla colonna più ampia, con larghezza 70%, e seleziona l’opzione “Inizia vuoto”. 
5. A questo punto, utilizza il blocco Link pagina per inserire le seguenti pagine dal contenuto importato: About, Admissions, Student Life, Research, and News. Per fare questo, puoi iniziare a scrivere il titolo di ogni pagina. 
6. Una volta che gli elementi principali del menu sono sistemati, seleziona tutto il blocco Navigazione ancora una volta e, nelle impostazioni della barra laterale, sotto “Impostazioni di visualizzazione” attiva l’opzione Abilita il menu responsive.
7. Da qui, aggiungi le voci dei sottomenu ad About, Admissions, Student Life, e Research. Nel caso ti servisse un aiuto, ecco uno screenshot dell’icona per aggiungere voci sottomenu. 
1. About dovrebbe avere le seguenti voci come sottomenu: Distinguished Alumni,  Diversity and Inclusion, Faculty, History, Leadership.
2. Admissions dovrebbe avere le seguenti voci come sottomenu: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition. 
3. Research dovrebbe avere le seguenti voci come sottomenu: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research. 
4. Student Life dovrebbe avere le seguenti voci come sottomenu: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services. 
8. A questo punto, aggiungi voci sottomenu sotto Admissions > Career: Business, Design, Technology. 
9. Una volta che le voci sottomenu sono state aggiunte, riordina e rinomina le varie voci sottomenu in base alle tue preferenze. Puoi riordinarle usando l’opzione che trovi all’interno del blocco Navigazione quando selezioni tutto il blocco Navigazione, come mostrato in questa GIF. 
10. Se vuoi aggiungere delle altre pagine che ancora non esistono, puoi farlo scrivendo un titolo che non esiste ancora all’interno del tuo sito. Facendo questo, vedrai un’opzione per creare la bozza di una pagina. Fai questa operazione per almeno una voce di menu. Ricordati di divertirti e creare qualcosa che sia davvero a tema Università!
11. A questo punto, personalizza tutto il blocco Navigazione come preferisci (cambia allineamento, colore, dimensione dei font, ecc.). Ricorda che per gli elementi sottomenu puoi usare le impostazioni colore in sovraimpressione per impostare il colore che preferisci.

Salva il tuo lavoro e continua a personalizzare

1. Fai clic su “Salva” per salvare le tue modifiche e vedere il tuo sito sul frontend. Nota eventuali differenze tra quello che vedi nell’editor e quello che vedi sul frontend. Se hai pagine che sono ancora bozze, assicurati di pubblicarle in modo che siano visibili nel menu. 
2. Prova a vedere il tuo sito su un dispositivo mobile e verifica se i menu vengono visualizzati in modo responsive con un menu hamburger.
3. A questo punto, continua a personalizzare in base alle tue preferenze, cambiando allineamento, colore, dimensione dei font, eliminando, rinominando, riordinando delle voci ed altro ancora. Puoi anche inserire dei blocchi aggiuntivi sia al blocco Navigazione, incluso i blocchi Spazio vuoto ed Icone social.

Passi del test avanzati

Questa sezione è indirizzata a chi ha il tempo per spingersi oltre con il test ed è a proprio agio nell’avventurarsi nell’editor del sito senza molte indicazioni.

I passi per questa sezione sono semplici: trova l’header di un’università e prova a ricrearlo tutto o in parte. Puoi benissimo continuare ad usare TT1 Blocks o utilizzare il tema a blocchi che preferisci (prendi nota se usi un tema diverso). Puoi usare le università elencate in precedenza o puoi trovarne di tue. Quando lasci un commento, condividi uno screenshot di quello che stavi cercando di replicare ed uno screenshot di quello che è stato possibile creare. È molto utile vedere cosa vorrebbe creare chi partecipa, quindi non esitare a condividere i diversi design che vedi. 

Cosa notare:

Se ti va, ricorda di condividere uno screenshot di quello che hai creato!

• L’esperienza si è bloccata in qualche punto?
• L’esperienza del salvataggio ha funzionato correttamente?
• Hai trovato delle funzioni mancanti mentre creavi l’header? Fornisci informazioni più specifiche possibile, specialmente se hai seguiti i passi avanzati
• Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
• Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza?
• Credi che quanto creato all’interno dell’editor del sito corrisponda a quello che vedi sul tuo sito?
• Come ti è sembrato il funzionamento del blocco Navigazione quando visualizzato su formati di schermi più piccoli?
• Ha funzionato usando solo la tastiera?
• Ha funzionato usando uno screen reader?
• Se vuoi, prova ad analizzare il tuo sito di test con uno strumento tipohttps://wave.webaim.org o https://www.accessify.com per vedere come si comporta. 

Lascia un feedback entro il 1 settembre 2021

Lascia un feedback nei commenti di questo articolo. Se preferisci, puoi sempre creare delle issue in questo repo GitHub direttamente per Gutenberg ed in questo repo GitHub per TT1 Blocks. Anche se lasci un feedback in GitHub, commenta comunque di seguito indicando il link. Se vedi che qualcun altro ha già segnalato un problema, lascia comunque una nota qui di seguito riguardo la tua esperienza, sarà utile per fornire a chi sta lavorando per migliorare questa esperienza una panoramica più ampia su ciò che va migliorato.

#fse-outreach-experiment, #fse-outreach-program, #fse-testing-call, #full-site-editing

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.

1. Vai su https://gutenberg-theme.xyz/. Questo è uno strumento che può aiutarti a generare la sezione delle impostazioni del file theme.json.
2. 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. 
3. 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.
4. 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

1. Crea un nuovo articolo.
2. Aggiungi un blocco copertina con uno sfondo a tinta unita ed alcune linee di contenuto in un blocco paragrafo all’interno dell’articolo.
3. 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”.
4. 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”.
5. Pubblica l’articolo.
6. Carica l’articolo sul front end e fai caso alla larghezza dei blocchi copertina.
7. Cambia il valore contentSize con un valore pixel diverso nella sezione Layout di theme.json.
8. Cambia il valore wideSize con un valore pixel diverso nella sezione Layout di theme.json.
9. Carica la visualizzazione di modifica dell’articolo creato in precedenza e conferma che le nuove larghezze ora vengono corrispondano nell’editor.
10. Carica l’articolo sul frontend e conferma che le nuove larghezze corrispondano sul frontend del sito.
11. Punti bonus: Prova ad impostare i valori di larghezza utilizzando qualcosa diverso da “px”, ad esempio “em”, “rem”, “vh”, “vw”, or “%”

Tipografia

1. Imposta come true le seguenti opzioni di tipografia in theme.json:

• customFontWeight (Blocco Titolo)
• customFontSize (Blocco Paragrafo)
• customLineHeight (Blocco Paragrafo)
• dropCap (Blocco Paragrafo)

Bordi

1. Imposta come true le seguenti impostazioni dei bordi su true in theme.json:

• “customColor”: true
• “customRadius”: true
• “customStyle”: true
• “customWidth”: true

Colore

1. Imposta come true le seguenti impostazioni per  custom e customGradient in theme.json:

• “custom”: true
• “customGradient”: true
• “link”: true

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:

• Twenty Twenty
• Storefront

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. 

• Ora: 5pm UTC
• Data: 7 Luglio
• Trovi qui il link Zoom il cui meeting ID è 881 3678 6501 e la password 600875. 
• Questo sarà annunciato e discusso ulteriormente sul canale #fse-outreach-experiment.

Speriamo di vederti lì. 

#fse-outreach-program, #fse-testing-call, #full-site-editing