(Articolo originale di Anne McCarthy)

Questo articolo è la diciannovesima chiamata per il test all’interno del Full Site Editing Outreach Program. Per sapere di più su questo programma sperimentale, dai un’occhiata a queste FAQ, contengono utili dettagli. Per entrare nel vivo, vai su #fse-outreach-experiment in Make Slack per futuri annunci su nuovi test, articoli e molto altro ancora.

Note importanti: È attualmente aperta una chiamata per volontari per l’uso di Replay.io, uno strumento che include un sistema completo per la registrazione dei bug. Rispondi entro il 28 dicembre 2022 per partecipare. Separatamente, il programma FSE Outreach è sempre alla ricerca di volontari che aiutino a gestire queste chiamate per il test per la comunità.

Panoramica

Con un lavoro ampiamente avviato per rifinire e concludere numerosi aspetti della fase 2, questa chiamata per il test si concentra sulle numerose modifiche in corso per testarle (beh, appunto!) e trovare gli angoli ancora da smussare tra ciò a cui si sta lavorando attualmente. In generale, questo test tratta quanto segue:

• Riorganizzare l’editor del sito per introdurre la modalità navigazione, che offre un modo più semplice di navigare tra i contenuti nell’esperienza di modifica del sito.
• Introdurre una nuova UX per il blocco di navigazione in cui le modifiche (aggiungere elementi del menu, creare un nuovo menu, ecc.) possano essere fatte all’interno della barra laterale delle impostazioni dei blocchi. 
• Separare gli strumenti dei blocchi tra “impostazioni” e “aspetto” per rendere i blocchi con numerosi controlli più semplici da configurare e personalizzare.
• Offrire un modo per vedere un documento che contiene tutti i blocchi e gli stili con il Catalogo degli stili che rende più facilmente visibili le modifiche apportate agli Stili. 
• Colorare parti del template e blocchi riutilizzabili per renderli più facili da identificare e fare le modifiche che preferisci.
• Bonus: Aggiunta di un componente per l’anteprima del blocco all’interno degli stili globali per vedere l’effetto delle tue modifiche su un singolo blocco. 
• Bonus: Aggiunta di un campo per l’inserimento di CSS personalizzato negli stili globali per consentire l’inserimento di stili aggiuntivi direttamente dall’editor.

Presi assieme, questi cambiamenti possono rendere più semplice navigare i contenuti che vuoi modificare, vedere le modifiche mentre lavori con gli Stili in un formato adeguato e su scala, creare un’esperienza più semplice per la modifica e creazione della navigazione, e avere un’esperienza più intuitiva durante la modifica dei singoli blocchi. 

Contesto: Ultimi ritocchi al sito di un cliente

Per rendere un po’ più concreta questa esperienza, facciamo finta che stai lavorando ad alcuni ritocchi al sito di un cliente, per affinare la presentazione del suo brand e, di conseguenza, ad homepage e navigazione. Lo scopo è quello di passare da una navigazione più complessa ad una semplificata, con due diverse opzioni a disposizione tra cui il cliente può scegliere (modificare il menu attuale o creare una nuova opzione). Collegata a questo, sulla homepage cambieranno anche i contenuti in evidenza nel blocco Query Loop, per dare più enfasi alle immagini (o a qualunque altra cosa preferisci). Infine, aggiornerai lo stile complessivo in base ai tuoi gusti, con idee bonus per chi ha più capacità ed interesse a farlo!

Istruzioni per il test 

Per usare un sito di prova già pronto: 

1. Apri questo link una sola volta: https://app.instawp.io/launch?t=fse-call-for-testing-19 
2. Non aprire il link più volte, dato che crea un nuovo sito ogni volta ed esiste un limite di 50 siti che possono essere creati. 
3. Fare questo lancerà un sito che potrai usare per 24 ore. Seleziona “Magic Login” per eseguire l’accesso alla bacheca wp-admin. 
4. Salva il link al tuo sito, in modo da poter accedere ancora durante il test. 

Per predisporre il tuo sito di prova (da saltare se stai usando la soluzione precedente): 

1. Crea un sito di prova che utilizzi la versione più recente di WordPress. È importante che non sia un sito di produzione/live.
2. Installa ed attiva il tema Twenty Twenty Three andando su Aspetto > Temi.
3. Installa e attiva Gutenberg 14.8 scaricando la versione più recente > andando su Plugin > Aggiungi nuovo > Installa. Da qui, vai su Gutenberg > Esperimenti e disattiva gli esperimenti “Editor di navigazione off canvas” e “Schede dell’ispettore del blocco”. 
4. Vai su Strumenti > Importa e importa questo file (fai prima clic su “Download” nell’angolo in alto a destra) per avere accesso agli stessi contenuti descritti in precedenza..

Nel caso dovessi avere qualunque problema con la predisposizione manuale, commenta l’articolo o mandami un messaggio (@annezazu) sullo Slack di WordPress.org.

Explore browse mode

5. Vai su Aspetto > Editor (beta). Questo ti porterà ad una vista riorganizzata dell’editor del sito.
6. Fai clic su Template e nota come la lista dei template ora venga visualizzata nella barra laterale. Fai clic sui vari template per vederli velocemente.
7. Seleziona “Home” dall’elenco dei template e poi seleziona “Modifica” nella barra laterale aperta per modificare direttamente questo template.

Modificare la navigazione

8. Seleziona l’header del tuo sito prima di selezionare il menu e scegliere “modifica”. Questo aprirà una finestra di dialogo che ti spiega che serve fare un passaggio prima che sia possibile personalizzare il menu. Seleziona “Personalizza”
9. Apri le impostazioni del blocco e nota come ogni voce del menu ora viene elencata nella barra laterale.
10. Prenditi un po’ di tempo per condensare il menu come preferisci, fino ad arrivare a tre elementi del menu di primo livello. Puoi fare questo trascinando e rilasciando gli elementi del menu nella barra laterale, cancellando elementi e rinominandoli. Ad esempio, puoi inserire “Press” sotto “About” e “Resources” sotto “Getting Started”. (nota: le voci del menu sono in inglese per utilizzare i contenuti presenti nella demo già pronta oppure nel file dei contenuti demo).
11. Esplora le schede aggiuntive nelle impostazioni del blocco (Stili, Impostazioni) e personalizzale ulteriormente a piacimento. Ad esempio, puoi cambiare tipografia, spaziatura fra i blocchi, o l’aspetto del sito su dispositivo mobile. Quando hai finito, fai clic su “Salva”
12. Successivamente, seleziona il blocco di navigazione ancora una volta e, nella scheda vista elenco delle impostazioni del blocco, seleziona il menu con i tre punti e scegli l’opzione “Crea nuovo menu”. Ecco uno screenshot nel caso possa essere utile.
13. Seleziona il pulsante + nella stessa scheda per aggiungere semplicemente le pagine “Contact”, “About” e “Getting Started”.
14. Vai alla scheda delle impostazioni ed apri la sezione “Avanzato” per rinominare il menu con un nome tipo “Menu principale semplificato”. Quando hai finito, fai clic su Salva. 
15. Tornando alla vista elenco nella sezione delle impostazioni del blocco, usa il menu con i tre punti per selezionare quale menu vuoi visualizzare. Ecco uno screenshot nel caso possa essere utile.

Fare un redesign della homepage

16. Seleziona il blocco Query loop e, dalla barra degli strumenti del blocco, seleziona l’opzione “Sostituisci”.
17. Questo aprirà una finestra di dialogo in cui potrai scegliere un pattern diverso per visualizzare gli articoli. Scegli un pattern diverso.
18. Personalizza ulteriormente il pattern che hai scelto. Ad esempio, cambia la dimensione dell’immagine in evidenza, aggiungi un filtro bicromia, rimuovi o aggiungi blocchi, cambia la dimensione dei titoli degli articoli, ecc. Quando hai finito, fai clic su “Salva”.

Cambiare stili

19. Apri Stili e scegli “Sfoglia stili” per selezionare una diversa variazione di stile, o fai delle modifiche in base ai tuoi gusti usando il sistema degli stili. Ad esempio, puoi personalizzare l’aspetto di ogni singolo blocco con la sezione “Blocchi” utilizzando la nuova opzione di anteprima o cambiare le opzioni generali con Tipografia, Colore e Layout. 
20. Quando hai finito, seleziona l’icona che appare come un occhio per aprire l’interfaccia principale degli Stili. Ecco uno screenshot nel caso possa essere utile. Questo aprirà un’interfaccia chiamata “Catalogo degli stili”, all’interno della quale potrai vedere gli stili per ogni blocco visualizzato. Puoi fare clic su quell’icona per attivare o disattivare questa opzione. 
21. Cambia qualunque altra cosa tu voglia mentre usi il catalogo degli stili prima di fare clic su “Salva” una volta che hai finito.

Bonus: Personalizza ulteriormente come preferisci

Quelli che seguono sono vari modi in cui puoi spingerti oltre con questo test. Puoi fare tutte queste prove o nessuna, a seconda del tempo che hai a disposizione:

• Aggiungi CSS aggiuntivo utilizzando il campo Stili > Personalizzato come parte dell’iniziativa per inserire CSS personalizzato all’interno degli Stili globali.
• Esplora la modalità di navigazione, passando tra la modifica di diversi template o parti del template.
• Aggiungi o modifica altri blocchi ed esplora l’opzione delle impostazioni separate al loro interno.
• Fai altre modifiche allo stile dei blocchi individuale, sfruttando la nuova opzione di anteprima per i singoli stili dei blocchi e il catalogo degli stili in generale.

Cosa notare:

• L’esperienza si è bloccata in qualche punto?
• L’esperienza di salvataggio ha funzionato correttamente?
• Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
• Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza?
• Cosa avrebbe reso questa esperienza più facile?
• Credi che quanto hai creato corrisponda a quello che hai visto sul sito?
• Ha funzionato usando solo la tastiera?
• Ha funzionato usando uno screen reader?

Lascia il tuo feedback entro il 6 gennaio 2023

#fse-outreach-program, #fse-testing-call