Chiamata per il test del programma FSE #2: Costruire una homepage con i blocchi per la modifica del sito

Questa è la seconda chiamata per il test all’interno 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 annunci di test futuri, articoli utili ed altro che verrà condiviso attraverso questo canale.

Panoramica delle funzionalità

Prima di tuffarci nei dettagli dei test, fermiamoci un momento per parlare della parte più importante di questa chiamata. Con la Modalità di modifica completa del sito (FSE) che apre le porte alla possibilità di modificare tutte le parti del tuo sito, arriva anche la necessità di nuovi blocchi che aiutino a facilitarne l’esperienza. Potresti aver già visto alcuni di questi blocchi! Per esempio, c’è un blocco Titolo del sito che puoi incorporare ovunque ed aggiornare automaticamente ogni volta che cambi il titolo del tuo del sito.

Per questo test in particolare, esploreremo l’uso di alcuni di questi blocchi per costruire una semplice home page con una barra laterale:

  • Blocco Titolo del Sito
  • Blocco Logo del sito
  • Blocco Elenco articoli
  • Blocco Tag Articolo
  • Blocco Navigazione
  • Blocco Parte del template

Pensa a questa come un’opportunità per esplorare cosa è attualmente possibile utilizzare per costruire qualcosa di semplice, ma anche come un’occasione per prendere familiarità con questi nuovi blocchi. Alla fine, a questi blocchi sarà assegnata una categoria specifica nello strumento di inserimento, definita per la modifica del sito.

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 un flusso 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 al 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.6.1. È 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 tre articoli finti con alcuni tag OPPURE usa il contenuto dimostrativo di Gutenberg che puoi trovare qui. Ecco un breve video che spiega come impostare questo contenuto.
  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.0.
  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.

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.

  1. Naviga su “Editor del sito (beta)”. Questo aprirà automaticamente l’editor del sito al template che fa funzionare la tua homepage.
  2. Usando la Visualizzazione in modalità elenco, verifica se il Blocco Query è presente. Nel caso dovesse esserci, selezionalo e cancellalo. Si tratta solo di pulizie di primavera per contenere un po’ le cose. 🙂

Modifica il tuo header:

  1. Vedrai probabilmente un Header creato per te che puoi modificare direttamente. Aggiorna il testo all’interno del blocco Titolo del sito. Divertiti a modificarlo! Alcune idee per iniziare: Scegli una nuova dimensione per l’header, cambia i contenuti, o modifica direttamente le impostazioni del blocco.
  2. Quando hai finito con le modifiche che vuoi fare, seleziona “Aggiorna il design” ed esamina il flusso di salvataggio per salvare tutte le modifiche.
  3. Apri Attiva/disattiva la navigazione e vai su Parti del template  > seleziona “Header”. Questo ti mostrerà una visualizzazione isolata della porzione dell’Header del tuo sito. Mentre sei su questa visualizzazione, aggiungi un blocco Logo del sito e configuralo in base ai tuoi gusti.
  4. Quando hai finito con le modifiche che vuoi fare, seleziona “Aggiorna il design” ed esamina il flusso di salvataggio per salvare tutte le modifiche.
  5. Apri nuovamente Attiva/disattiva la navigazione e vai su Template > Indice per tornare alla tua homepage.
  6. Una volta lì, vai al Blocco navigazione che controlla il menu nell’Header (qua laVisualizzazione in modalità elenco potrebbe tornarti utile!). Esplora il blocco navigazione facendo delle modifiche direttamente agli elementi del menu o nelle impostazioni del blocco per cambiare font, colore, etc.
  7. Usando la Visualizzazione in modalità elenco, seleziona la Parte del template Header e, usando il menu con tre punti nella barra degli strumenti, scegli l’opzione “Inserisci dopo” per aggiungere un blocco fuori dall’Header.

Aggiungi il tuo contenuto:

  1. Aggiungi un blocco colonna 70/30 oppure 30/70. Nella colonna più grande, usa il Blocco Titolo per scrivere “Il mio contenuto”. Nella colonna più piccola, usa il Blocco Titolo per scrivere “La mia barra laterale”.
  2. Nella colonna più grande, aggiungi  un blocco Elenco degli articoli e seleziona la configurazione che preferisci (Titolo e data, Titolo e riassunto, etc.)
  3. Mentre sei lì, aggiungi un Blocco tag dell’articolo ad uno degli articoli visualizzati nel Blocco elenco degli articoli. Fai caso a come, se aggiungi il blocco ad un articolo, questo viene visualizzato anche per tutti gli altri!

Ripeti il punto precedente con il Blocco Autore dell’articolo, prima di decidere se preferisci tenere o eliminare qualunque altro blocco aggiuntivo.

Creare una barra laterale:

  1. Nella colonna più piccola, crea la tua barra laterale come meglio preferisci. Ad esempio, prova con il Blocco Icone social, il Blocco Ultimi articoli o un semplice Blocco Immagine.
  2. Quando hai finito con le modifiche che preferisci, seleziona “Aggiorna il design” ed esamina il flusso di salvataggio per salvare tutte le modifiche.
  3. Condividi la tua esperienza nei commenti sottostanti o direttamente su GitHub. Puoi completare questo test tutte le volte che vuoi per raccogliere feedback aggiuntivo!

Video con la procedura del test passo per passo :Questo video mostra il flusso del test dopo che la configurazione iniziale è stata impostata e si sta usando il contenuto demo di Gutenberg che trovi qui. Rendi comunque unico il tuo flusso con le tue modifiche e ritocchi.

Cosa notare:

  • L’esperienza si è bloccata ad un certo punto?
  • L’esperienza di salvataggio ha funzionato correttamente?
  • Ti è capitato di voler fare qualcosa con un blocco in particolare ma non è stato possibile?
  • 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 5 marzo 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. Se lasci feedback in GitHub, commenta comunque di seguito indicando il link. Se vedi che qualcun altro ha già segnalato un problema, lascia comunque una nota riguardo la tua esperienza di seguito, 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