Questa è la settima call per i test come parte del Full Site Editing Outreach Program! Come detto nella sesta call per i test, se non hai potuto ancora partecipare, questa è un’ottima occasione per farlo, in vista della 5.8.

Per maggiori informazioni riguardo questo programma sperimentale, dai un’occhiata a queste FAQ per ulteriori dettagli utili. Se ti voi unire a noi, vieni a trovarci su #fse-outreach-experiment in Make Slack per gli annunci di test futuri, articoli utili ed altro ancora.

Panoramica della funzionalità

Come promemoria, la modalità di modifica del Template è una caratteristica del Full Site Editing che sblocca la possibilità di passare tra la modifica del contenuto di una singola pagina o articolo e la modifica del template che quella singola pagina o articolo usano. Con questa funzionalità puoi creare un nuovo template, modificare quelli esistenti, e scegliere quale template usare per pagine ed articoli. Puoi scoprire di più riguardo questa funzionalità in questo video:

https://www.youtube.com/watch?v=Z571V_jlD-o

Per basare questo test su un esempio plausibile nel mondo reale, costruiremo una pagina portfolio che mostrerà il vostro ipotetico fantastico lavoro. Usando il contenuto demo, potrete esprimere l’architetto che è in voi, mostrando viste di posti di fantasia, come il Block Plugin Harbor ed il Gutenberg Parkour Space. Condividete uno screenshot nel vostro commento, in modo che possiamo celebrare quanto avete creato. Come ispirazione, ecco il mio esempio ed ecco dei fantastici esempi creati da alcuni designer con l’uso di Gutenberg.

Nota: Rispetto alla sesta call per i test, questa call è intenzionalmente più aperta a livello di configurazione per fare in modo che voi che fate i test possiate spingere questa funzionalità verso i propri limiti. Buon divertimento!

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 scaricarequi).
• Usa la versione più recente del tema TT1 Blocks.
• Usa la versione più recente di Gutenberg (10.7.1 nel momento in cui scriviamo).

In generale, usa l’ultima versione di ognuna delle parti dell’impostazione raccomandata e tieni a mente che le versioni potrebbero essere cambiate da quando questo articolo è stato condiviso.

Flusso del 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.

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ù seri.

• La notifica di salvataggio nella fase di modifica del template non segnala il salvataggio del template stesso.
• La modifica dei blocchi nella parte alta della modalità di modifica del template è difficile (la stessa cosa capita con l’editor del sito).
• Quando si crea un nuovo template, l’allineamento dell’editor e quello del frontend non corrispondono di default.

Ci si può aspettare che i problemi noti possano apparire in questa fase dello sviluppo per qualcosa che è attivamente oggetto di varie iterazioni!

Istruzioni per la configurazione: 

1. Imposta un sito che stia usando la versione più recente di WordPress. È importante che non si tratti di un sito di produzione/live.
2. Installa il tema TT1 Blocks andando su Aspetto > Temi > Aggiungi Nuovo. Una volta installato, attiva il tema.
3. Crea sei articoli con due diverse categorie ed immagini in evidenza a tua scelta, assieme ad almeno quattro pagine da usare per il tuo menu. In alternativa, puoi scaricare ed importare il contenuto demo di Gutenberg creato apposta per questo test tramite l’importatore di WordPress che si trova in Strumenti > Importa
4. Vai nell’area di amministrazione del sito
5. Installa ed attiva il plugin Gutenberg da Plugin > Aggiungi nuovo. Se è già installato, assicurati che la versione in uso sia come minimo Gutenberg 10.7.1
6. Ora dovresti vedere all’interno della navigazione un elemento chiamato “Editor del sito (beta)”. Se non lo vedi ancora nella tua barra laterale, non stai usando correttamente l’esperimento di Modifica del Sito. Non fare clic su questa voce, dato che per questo test non stiamo esplorando l’editor del sito!

Setting up your portfolio page

1. In Pagine, seleziona “Aggiungi pagina” e dalle il titolo “Portfolio”.
2. Nel contenuto della pagina, aggiungi un blocco Query e scegli qualunque modello preferisci usare, o usa l’inserter per aggiungere un modello di Query. Ecco un breve video che mostra come inserire un modello nel caso dovessi bloccarti.
3. Quando il modello è stato inserito, puoi aprire le impostazioni del blocco e, all’interno di Impostazioni disattivare “Eredita query da URL”. A questo punto, dovresti vedere delle opzioni per personalizzare quali articoli include questo blocco Query. Il contenuto demo include le seguenti categorie da usare: Portfolio, Parks, Buildings.
4. Personalizza il blocco Query come preferisci! Questo potrebbe includere la creazione di colonne in cui inserire diversi blocchi Query per visualizzare diverse categorie di articoli o blocchi aggiuntivi, ad esempio Autore del post. Nel caso dovessi bloccarti qui, passa alla sezione “Istruzioni e idee per la personalizzazione” per un aiuto.

Creare e personalizzare un nuovo template

1. Nella barra laterale, apri le impostazioni e seleziona le impostazioni della pagina (dovresti vedere Pagina e Blocco). Seleziona “Nuovo” all’interno della sezione Template per creare un nuovo template. Ecco un breve video nel caso in cui dovessi bloccarti.
2. Dai al nuovo template il titolo “Portfolio”.
3. A questo punto, ti troverai nella modalità di Modifica del Template e, all’interno dell’header, vedrai un blocco Titolo sito, Motto del sito ed un blocco separatore. Puoi tenere questi blocchi, covertirli in Colonne o rimuoverli del tutto.
4. Aggiungi un blocco Navigazione all’header e seleziona l’opzione “Inizia vuoto”. A questo punto, aggiungi tutte le pagine che hai creato al menu per impostare la struttura. Se hai usato il contenuto demo, ecco i nomi delle pagine, in modo che tu possa cercarle: About, Contact, Resume, Partners, Influences.
5. A questo punto, puoi personalizzare header, footer ed altro ancora a tuo piacimento. Se ti blocchi in questo punto, passa alla sezione “Istruzioni e idee per la personalizzazione” per un aiuto. Usa la creatività e costruisci qualcosa di tuo!
6. Salva le tue modifiche e visualizza la tua pagina Portfolio.

Istruzioni e idee per la personalizzazione:

Mentre il test precedente era stato pensato per guidarti attraverso i passi specifici per la creazione di un template personalizzato, questo test è stato concepito per consentirti di esplorare le personalizzazioni che hai in mente. Questo dovrebbe fornire un test molto più ampio e dal risultato finale aperto, che dovrebbe aiutarti ad esplorare i confini dell’esperienza e, idealmente, trovare sia bug che richieste di miglioramento! Visto che ci sono due punti di personalizzazione in questo test, le seguenti istruzioni sono state organizzate in modo da coprire entrambi. Ricorda che quanto condiviso di seguito è solo l’inizio delle personalizzazioni con cui puoi sperimentare!

Idee per la pagina Portfolio:

• Modifica il blocco Titolo dell’articolo per avere un colore di sfondo definito, diverse dimensioni dei font, e diversi allineamenti.
• Modifica la larghezza della colonna in cui si trova il blocco Immagine in evidenza, per rendere l’immagine più grande o più piccola.
• Aggiungi altri blocchi al blocco Query e personalizzali.
• Modifica l’allineamento generale dei blocchi principali forniti dal blocco Query.
• Aggiungi una sezione introduttiva per rendere la pagina Portfolio più realistica con un blocco Titolo, un blocco Copertina ed altro.
• Usa diversi blocchi Query per diverse categorie di articoli! Ricorda che all’interno del contenuto demo ci sono tre categorie con cui puoi interagire: Portfolio, Parks, Buildings.

Idee per il Template Portfolio:

• Crea menu personalizzati con il blocco Navigazione ed usa l’opzione “Abilita menu responsive” che trovi all’interno delle impostazioni di visualizzazione. Ad esempio, potresti elencare le pagine About, Resume, Contact in un menu nella parte alta del sito e le pagine Partners e Influences in basso.
• Personalizza il layout e la larghezza di vari blocchi incluse le Parti del template, il blocco Query, il blocco Gruppo, ed altro ancora.
• Personalizza i colori, le dimensioni dei font, l’allineamento dei vari blocchi. Ecco un esempio con il blocco Titolo del Sito.
• Aggiungi un footer personalizzato usando il blocco Parte del template per incoraggiare le persone ad interagire con il tuo lavoro.

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?
• 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 della modalità di modifica del template corrisponda a quello che vedi sul tuo sito?
• Ha funzionato usando solo la tastiera?
• Ha funzionato usando uno screen reader?

Lascia un feedback entro il 16 giugno 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.

#core-editor, #fse-outreach-program, #fse-testing-call, #full-site-editing, #gutenberg