Piermario Orecchioni 17:35 di 3 April 2021  

Chiamata per il test del programma FSE #4: Costruire un header a tema per un ristorante

Questa è la quarta 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à

Creare un header intuitivo è uno dei punti chiave da fare nel modo giusto quando si costruisce un sito. Aiuta i visitatori a farsi un’idea del contenuto del tuo sito e, idealmente, dovrebbe anche portarli a compiere le azioni che desideri. Con l’Editor del sito ora ci sono ora delle opportunità inedite per personalizzare tutto questo in base ai tuoi gusti! Questo test esplorerà esattamente questo, creando un header un po’ più complesso e con vari livelli, grazie all’uso dei blocchi FSE. Per concentrarci meglio sul test, immaginiamo di essere proprietari di un ristorante e di dover creare un’esperienza che invita qualcuno ad ordinare online mentre, allo stesso tempo, mostriamo le informazioni di cui hanno necessità.

Come  per il test precedente, se decidi di dare via libera alla tua creatività, condividi uno screenshot nei commenti in modo che possiamo celebrare quello che hai fatto. 

Come ispirazione, ecco il mio esempio: 

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: Creare un header per un ristorante

Ecco una scaletta di base da seguire quando stai provando questa specifica funzionalità. Se c’è qualcosa che che non ti convince, lascia un commento di seguito! Se vuoi proseguire con il test, fallo pure, dato che le istruzioni sono intese per fornirti una guida, non per limitarti. 

Nota importante: 

Anche se questa chiamata per il test è indirizzata al provare 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 creazione di questa Call per i test, sono emersi alcuni problemi che potresti riscontrare mentre procedi. Sappi che sono già stati segnalati. Ecco una lista non esaustiva dei problemi più seri:

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.2.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.

Impostare le tue colonne:

  1. Naviga su “Editor del sito (beta)”. Questo aprirà automaticamente l’editor del sito, visualizzando il template che fa funzionare la tua homepage.
  2. Dopo aver aperto la tua home page, rimuovi il blocco Navigazione trovato all’interno della parte del template Header. Questo serve a reimpostare l’header in modo da poter aggiungere altro al suo interno in seguito. 
  3. Seleziona il blocco Colonna genitore e, usando le impostazioni del blocco nella barra laterale, cambia il numero di colonne da 2 a 3 colonne.
  4. Torna al blocco Colonne e, usando le impostazioni della barra degli strumenti del blocco, accertati che sia impostato come Larghezza piena.
  5. Nella prima colonna, personalizza il titolo del sito ed il motto del sito come preferisci! Questo può includere cambiare il test, la dimensione dei caratteri, la famiglia del font ed altro ancora. 
  6. Nella seconda colonna, usa un blocco Paragrafo per aggiungere gli orari di apertura per il tuo ristorante di fantasia e prosegui di nuovo a completare il tutto in base ai tuoi gusti.
  7. Nella terza colonna, aggiungi un blocco Navigazione e seleziona l’opzione “Start Empty”. 
  8. Da qui, usa il blocco Link per aggiungere alcuni altri link, anche se rimandano a pagine che ancora non esistono. Per fare questo, inizia semplicemente a scrivere un titolo che ancora non esiste sul tuo sito. Per esempio, “Menu”. Vedrai un’opzione per creare la bozza di una pagina. Fai questo per almeno una voce di menu. Ricordati di divertirti mentre lo stai facendo e di creare qualcosa a tema ristorante!
  9. A questo punto, seleziona “Aggiorna il design” per salvare le modifiche che hai fatto.

Creare un invito ad ordinare online:

  1. Una volta che hai impostato il contenuto delle tre colonne, aggiungi un altro blocco Colonne sopra di esse e seleziona l’opzione per visualizzare le due colonne come 70/30. Puoi fare questo selezionando il blocco Colonne usando la Visualizzazione in modalità elenco e, usando il menu con i tre punti, seleziona “Inserisci Prima”.
  2. Usando la barra degli strumenti del blocco, imposta la colonna come larghezza piena, in modo che vada da lato a lato del sito.
  3. Nella colonna più larga, aggiungi un blocco Paragrafo con del testo che inviti gli utenti ad ordinare online. 
  4. Nella colonna più piccola, aggiungi un blocco Pulsante che dica “Ordina Online”. Se vuoi, puoi creare una pagina a cui collegarlo, ma per il test va bene anche non avere una pagina effettivamente collegata, se ci atteniamo allo scopo effettivo di questo test.
  5. A questo punto seleziona “Aggiorna il design” per salvare le modifiche che hai fatto.

Personalizza i tuoi colori e pubblica tutte pagine che sono ancora bozze:

  1. A questo punto, personalizza i colori e tutto quello che vuoi all’interno del tuo design! Puoi farlo selezionando l’intero template Header e regolando l’impostazione dei colori nella tua barra laterale. Mentre fai questo, prendi nota di tutto quello che ti sarebbe piaciuto fare ma che non puoi fare. 
  2.  Quando sei soddisfatto di come si presentano le cose, seleziona “Aggiorna il design” per salvare le modifiche che hai fatto. 
  3. Infine, apri Attiva/disattiva la navigazione > Bacheca per vedere la tua bacheca wp-admin. Vai su Pagine > Tutte le pagine e pubblica tutto quello che deve essere pubblicato.
  4. Dai un’occhiata al tuo sito e verifica che quello che hai creato corrisponda a quello che ora vedi. 
  5. 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!

Video del test:

Questo video non va troppo nei dettagli in termini di personalizzazione dei colori, ma mostra comunque passo per passo tutti i passaggi in modo da dare un senso delle azioni principali da intraprendere. Scendi pure nei dettagli durante il tuo test, secondo quanto ritieni opportuno!

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?
  • Hai trovato delle funzioni mancanti durante la creazione dell’header?
  • 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 sul tuo sito?
  • Ha funzionato usando solo la tastiera?
  • Ha funzionato usando uno screen reader?

Lascia un feedback entro l’8 Aprile 2021

Lascia un feedback nei commenti di questo post. Se preferisci, puoi sempre creare delle issuein questo repo GitHub direttamente per Gutenberg edin 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