Chiamata per il test del programma FSE #3: Costruire una divertente pagina 404 personalizzata

Questa è la terza call per i test come parte del Full Site Editing Outreach Program. Per maggiori informazioni riguardo questo programma sperimentale, dai un’occhiata a queste FAQ per altri utili dettagli. Se vuoi proprio divertirti, vieni a trovarci su #fse-outreach-experiment in Make Slack per gli annunci di test futuri, articoli utili ed altro che verrà condiviso attraverso questo canale.

Panoramica della funzionalità

Ti è mai capitato di imbatterti in una pagina 404 particolarmente piacevole? Magari ti ha fatto ridere, oppure era stata costruita in un modo che ti ha reso semplicissimo trovare nuovamente la tua direzione all’interno del sito. Al momento, questa è una parte di un sito che può essere modificata solo intervenendo sul codice, oppure viene fornita dal tema, impedendo quindi a molti di noi di aggiungere un po’ di divertimento extra all’universo con pagine 404 utili e divertenti.Con la Modalità di modifica completa del sito (FSE), ora è alla nostra portata crearne una tutta nostra. Quello che questo test esplora è fare esattamente questo con l’opzione per costruire una semplice pagina 404 attraverso la modifica di un template oppure lanciarci nella creazione di qualcosa di unico. Se decidi di dare sfogo alla tua creatività, condividi uno screenshot nel tuo commento, in modo che possiamo tutti ammirare quello che hai creato. Come ispirazione, ecco un esempio che ho creato: 

Ambiente di test

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

Flusso del test

Ecco una scaletta di base da seguire quando stai provando questa specifica funzionalità. Se c’è qualcosa che non ha senso, lascia un commento di seguito!

Nota importante: Anche se questa chiamata per il test è indirizzata a provare una funzionalità specifica, è probabile che troverai degli altri bug mentre utilizzi una funzionalità 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.

Istruzioni per la configurazione: 

  1. Imposta un sito che stia usando WordPress 5.7. È 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. Vai nell’area di amministrazione del sito
  4. Installa ed attiva il plugin Gutenberg da Plugin > Aggiungi nuovo. Se è già installato, assicurati che la versione in uso sia come minimo Gutenberg 10.1.1.
  5. 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.

Istruzioni per il test:
Consiglio utile: Man mano che vai avanti con il test,
potresti trovare la Visualizzazione in modalità elenco utile per navigare tra il contenuto.Esplorare il template 404

  1. Naviga su “Editor del sito (beta)”. Questo aprirà automaticamente l’editor del sito, visualizzando il template che fa funzionare la tua homepage.
  2. Apri Attiva/disattiva la navigazione e vai su Template > 404. Questo ti porterà al template della pagina 404 del tuo sito.
  3. Usando la Visualizzazione in modalità elenco, seleziona la parte del template Header e, usando il menu della barra degli strumenti con i tre punti, seleziona “Rimuovi il blocco” per cancellarla.
  4. Ora seleziona il blocco header predefinito che dice “Nothing Here” e, usando il menu con i tre punti sulla barra degli strumenti, usa l’opzione “Inserisci prima” per aggiungere un blocco sopra.
  5. Usando il modo che preferisci per aggiungere un blocco, inserisci un blocco Parte del template e seleziona l’opzione “Nuova parte del template”.
  6. Apri le impostazioni per il nuovo blocco Parte del template e, sotto Avanzate > “Titolo”, aggiungi il tuo titolo personalizzato. Ad esempio “Header 404”.
  7. Quando hai finito con le tue modifiche, seleziona “Aggiorna il design” e dai un’occhiata al flusso di salvataggio per salvare tutte le modifiche. Questo dovrebbe far sì che la nuova Parte del template rifletta il titolo che hai scelto.

Aggiungere la navigazione e dare spazio alla creatività

  1. Da qui, assicurati che il focus sia ancora sulla nuova parte del template ed inserisci al suo interno un blocco Navigazione. Puoi scegliere se creare un nuovo menu o se riutilizzarne uno già esistente.
  2. Aggiungi alcuni link, incluso un link ad una pagina che ancora non esiste. Per fare questo, inizia semplicemente a scrivere un titolo che ancora non esiste sul sito. Ad esempio, “Help”. Vedrai quindi un’opzione per creare la bozza di una pagina. Fai questa operazione almeno su una voce di menu. Ricordati di divertirti mentre lo stai facendo!
  3. Oltre al blocco Navigazione, aggiungi tutti gli altri blocchi che vuoi in questa nuova parte del template. Ad esempio, puoi usare il blocco Icone Social, il blocco Cerca, Titolo del sito ed altri ancora. Prova ad aggiungere qualunque cosa che possa aiutare qualcuno che si è perso sul tuo sito ad orientarsi nuovamente. 
  4. Da qui, modifica il blocco Header “Nothing Found” ed il blocco Cerca modificandoli come vuoi. Potresti aggiungere qualsiasi elemento tu voglia, come immagini, GIF, ecc…
  5. Quando hai finito con le tue modifiche, seleziona “Aggiorna il design” e dai un’occhiata al flusso di salvataggio per salvare tutte le modifiche. 
  6. Visualizza la pagina 404 sul tuo sito visitando l’indirizzo iltuosito.com/404 (sostituisci iltuosito.com con l’URL del tuo sito di prova). Nota come ogni elemento aggiunto al blocco Navigazione come bozza di pagina viene visualizzato ma è un link interrotto. Dovresti essere in grado di vedere le bozze dato che hai effettuato l’accesso come amministratore. Nota: questo è stato annotato come bug
  7. Ritorna all’Editor del sito ed apri Attiva/disattiva la navigazione > Bacheca per vedere la tua bacheca wp-admin. Nota: attualmente c’è un bug che ti impedisce di visualizzare le bozze delle pagine, il che significa che in futuro questo sarà più semplice.

Pubblica, verifica e condividi

  1. Vai su Pagine > Tutte le pagine e pubblica tutte quelle che ancora devono esserlo.
  2. Ancora una volta, visualizza la pagina 404 sul tuo sito visitando l’indirizzo iltuosito.com/404 e conferma che le pagine che prima erano bozze ora vengono visualizzate regolarmente con i permalink corretti. 
  3. Condividi la tua esperienza nei commenti qui di seguito o direttamente su GitHub. Puoi completare questo test tutte le volte che vuoi per raccogliere qualsiasi ulteriore feedback!

Se ti va di andare anche oltre, ecco alcuni altri elementi da esplorare:

  • Prova ad aggiungere delle colonne al tuo contenuto! Le colonne sono un potente strumento e sarebbe ultime ricevere feedback sull’esperienza del loro utilizzo in uno scenario reale con la costruzione di un sito. 
  • Crea un parte di template personalizzata per il footer per replicare il procedimento di creazione di una parte del template personalizzata per l’header.
  • Personalizza a fondo la presentazione della pagina con colori, dimensioni di caratteri personalizzate ed altro ancora. Ecco un breve video che ti mostra alcune delle cose che puoi provare. 

Video del test: Questo video mostra il flusso del test dopo che la configurazione iniziale è stata impostata. Tieni presente che questo video non si spinge volutamente troppo a fondo nella creazione di una pagina 404, in modo da contenere la sua durata. Questo non vuol dire che tu non possa comunque sbizzarrirti con la creatività mentre conduci il test!

Cosa notare:

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

  • L’esperienza si è bloccata in qualche punto?
  • L’esperienza di salvataggio ha funzionato correttamente?
  • L’esperienza di salvataggio è risultata chiara durante la modifica della parte del template, rispetto al contenuto generale?
  • 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 hai creato nell’Editor del sito corrisponda a quello che vedi sulla tua homepage?
  • Ha funzionato usando solo la tastiera?
  • Ha funzionato usando uno screen reader?

Lascia un feedback entro il 23 marzo 2021

Lascia un feedback nei commenti di questo post. 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