Chiamata per il test del programma FSE #10: Alla festa dei modelli

Questa è la decima chiamata per il test  all’interno del Full Site Editing Outreach Program! Per sapere di più su questo programma di divulgazione, dai un’occhiata a  queste FAQ con 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.

Ti ricordiamo anche che nel caso volessi suggerire un’idea per una chiamata per il test, ogni proposta è molto gradita e tutte le idee saranno valutate secondo le attuali priorità del progetto per stabilire quale ha più senso affrontare. Puoi anche condividere direttamente idee nel canale Slack  o via DM, scrivendo ad @annezazu

Panoramica della funzionalità

Full Site Editing è una collezione di funzionalità che rende possibile la modifica di sempre più elementi senza la conoscenza del codice, perciò è stato necessario creare dei nuovi blocchi per intervenire su più parti del tuo sito. Questi blocchi sono chiamati generalmente “blocchi tema”, dato che corrispondono a funzionalità che in precedenza erano esclusiva dei temi. Anche se una certa quantità di blocchi tema sono stati introdotti in WordPress 5.8, c’è sempre del lavoro da fare, incluso il rendere disponibili ancora più blocchi tema nelle prossime versioni!

Questo test si concentra nello spingere questi meravigliosi blocchi tema verso i propri limiti, per determinare meglio a cosa dare priorità e quali funzionalità restano da documentare. Per rendere l’esperienza un po’ più divertente e pratica, affronteremo questo test dal punto di vista della creazione di modelli per blog, con l’utilizzo di alcuni di questi blocchi. Se i risultati della tua creazione ti piacciono davvero tanto, ricorda che puoi anche registrarli sul tuo sito 🙂 

Per fare un po’ di ripasso, ecco una panoramica di tutti i blocchi tema pronti per il test, con una nota su quali di questi sono inclusi in WordPress 5.8 nel caso dovessi avere l’ispirazione di usarli sul tuo sito già da ora: 

  • Logo del sito: ti consente di visualizzare e modificare il logo del sito [incluso in 5.8].
  • Motto del sito: ti consente di visualizzare e modificare il motto del tuo sito [incluso in 5.8]. 
  • Titolo del sito: ti consente di visualizzare e modificare il titolo del tuo sito [incluso in 5.8]. 
  • Loop di query: ti consente di visualizzare articoli e pagine in vari formati [incluso in 5.8]. 
  • Titolo dell’articolo: visualizza il titolo dell’articolo the Post Title [incluso in 5.8]. 
  • Contenuto dell’articolo: visualizza il contenuti del tuo articolo [incluso in 5.8].
  • Data articolo: visualizza la data dell’articolo [incluso in 5.8].
  • Riassunto dell’articolo: visualizza il riassunto del tuo articolo [incluso in 5.8].
  • Immagine in evidenza dell’articolo: ti consente di visualizzare e modificare l’immagine in evidenza dell’articolo [incluso in 5.8].
  • Categorie articoli: visualizza le categorie di un articolo [incluso in 5.8].
  • Tag dell’articolo: visualizza i tag di un articolo [incluso in 5.8].
  • Accedi/Esci: visualizza i link per effettuare l’accesso o uscire [incluso in 5.8].
  • Elenco delle pagine: visualizza un elenco di tutte le pagine sul tuo sito [incluso in 5.8].
  • Parte del template: ti consente di visualizzare e modificare varie aree globali del tuo sito (header, footer, ecc). 
  • Commento all’articolo: visualizza un singolo commento.
  • Autore del commento all’articolo: visualizza l’autore di un commento. 
  • Contenuto del commento all’articolo: visualizza il contenuto di un commento.
  • Data del commento all’articolo: visualizza la data del commento. 
  • Commenti all’articolo: visualizza tutti i commenti. 
  • Conteggio dei commenti all’articolo: visualizza il conteggio dei commenti. 
  • Modulo dei commenti dell’articolo: visualizza il modulo dei commenti. 
  • Titolo dell’archivio: visualizza il titolo dell’archivio. 
  • Descrizione del termine: visualizza la descrizione di categorie, tag e tassonomie personalizzate quando si visualizza un archivio.

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: 

In generale, assicurati di usare la versione più recente di ogni parte del setup e tieni presente che le versioni potrebbero essere cambiate da quando questo articolo è stato condiviso.

Passi per il test

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 ed attiva il plugin Gutenberg da Plugin > Aggiungi nuovo. Se è già installato, assicurati che la versione in uso sia come minimo Gutenberg 11.6
  3. Installa il tema TT1 Blocks andando su Aspetto > Temi > Aggiungi Nuovo. Una volta installato, attiva il tema.
  4. Crea almeno otto 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 per Gutenberg creato apposta per questo test (apri il link e fai clic su “Download”) tramite l’importatore di WordPress che si trova in Strumenti > Importa. Puoi anche seguire questa lezione su come utilizzare contenuto demo.
  5. Vai nell’area di amministrazione del sito
  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 generali:

  1. Vai su Pagine > Aggiungi pagina e crea una nuova pagina. Assegnale il titolo che preferisci!
  2. Aggiungi il blocco Loop di query e seleziona qualunque modulo su cui vuoi iniziare a costruire. Puoi anche un blocco contenitore, ad esempio un blocco Colonne o un blocco Gruppo, ed aggiungi al suo interno il blocco Loop di query nel modo che preferisci.
  3. A questo punto, dai un tocco personale al modello usando quanti blocchi tema preferisci tra quelli descritti in precedenza. Ad esempio, potresti creare un modello pieno zeppo di commenti utilizzando i vari blocchi per i commenti o crearne uno particolarmente centrato sulle immagini, grazie ai nuovi miglioramenti del blocco Immagine in evidenza. Cerca di essere quanto più originale possibile e non sentire il vincolo di dover aggiungere i blocchi solo all’interno del Loop di query.

Se ti va di raccogliere la sfida e spingerti un po’ oltre con questo test, prova a creare il tuo modello da zero, crea più modelli, o ricrea quello che hanno fatto i designer di temi di Automattic negli esempi di seguito, aggiungendo qualcosa di tuo:

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 mentre creavi il tuo modello personalizzato per un blog? 
  • Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
  • Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza?
  • Cosa avrebbe potuto rendere più semplice questa esperienza?
  • Credi che quanto creato all’interno dell’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 il 13 ottobre 2021

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

Grazie a @priethor @sparklingrobots e @welcher per le revisioni su questo articolo e per avermi dato la fiducia per pubblicarlo.

#fse-outreach-program, #fse-testing-call, #full-site-editing

Esplorazione per il programma FSE: aiuto con il futuro passaggio tra temi a blocchi

Con l’avvento dei temi a blocchi all’interno dell’ecosistema di WordPress, sono all’orizzonte nuove possibilità, da un più semplice sviluppo di temi per sviluppatori e designer ad una più semplice realizzazione di siti per gli utenti. Ad ogni modo, anziché esaminare in astratto il solo valore dei temi a blocchi, è importante includere e considerare anche ciò che può essere fatto tra diversi temi a blocchi. Ad esempio, immagina un mondo in cui per creare un negozio sia possibile  prendere liberamente un modello di recensione prodotto da un tema, lo stile da un’altro, ed i template con cui visualizzare i prodotti da un tema specifico per l’e-commerce. O immagina di avere la possibilità di cambiare temi mantenendo tipografia e tavolozza colori preferita. Indipendentemente da tutto, è imperativo che l’esperienza sia affidabile, intuitiva e che possa essere ampliata, superando i limiti di ciò che era o non era possibile fare in passato. 

Come risultato, l’attenzione in questa esplorazione è concentrata innanzitutto su una prospettiva più a lungo termine del genere “sarebbe bello se”, iniziando dal guidarvi attraverso un procedimento elementare di passaggio tra temi, chiedendo poi ad ogni partecipante di pensare in modo creativo a ciò che vorrebbe accadesse. Vista la mancanza di procedure, questa non è esattamente una chiamata per il test, perciò ci concentreremo meno sul trovare dei bug (anche se le segnalazioni sono sempre incoraggiate) e più sul ragionare attentamente su cosa vorremmo accadesse o sul modo in cui vorremmo funzionasse. Lo scopo è raccogliere spunti utili che ci aiuteranno contribuendo al modo in cui progettiamo questa esperienza. 

Nota: per il momento ci stiamo volutamente concentrando sul passaggio tra temi a blocchi anziché, ad esempio, sul passaggio da classico a blocchi.

Esplora cos’è attualmente possibile.

I passi seguenti sono intesi come indicazioni generali ed hanno lo scopo di guidare l’impostazione iniziale di elementi relativi ad un tema a blocchi che si vorrebbe mantenere durante il passaggio tra temi. Non è richiesto fare delle prove con questi passi per quanto concerne questo test, dato che molti dei flussi non sono ancora stati costruiti. 

Se non hai il tempo di creare velocemente del contenuto, puoi importare questo contenuto demo (apri il link e seleziona “Download) creato espressamente per questo test tramite l’importatore WordPress disponibile sotto Strumenti >  Importa. Puoi anche seguire questa lezione su come usare il contenuto demo.

  1. Crea un sito di test. Non usare un sito di produzione/live. Puoi seguire queste istruzioni per impostare un’installazione locale o usare uno strumento come questo per impostare un sito di sviluppo
  2. Installa ed attiva la versione più recente di  Gutenberg
  3. Installa ed attiva un tema a blocchi scegliendo fra le opzioni elencate nella directory dei temi
  4. Crea un template personalizzato sotto Aspetto > Template > Aggiungi Nuovo. 
  5. Crea una parte del template personalizzata sotto Aspetto > Parti del Template > Aggiungi Nuova. 
  6. Apri l’Editor del sito e, usando l’interfaccia utente dei Global Styles, scegli alcuni stili di blocco personalizzati e stili predefiniti generali. Salva tutte le modifiche. 
  7. Ora vai su Aspetto > Temi e cambia tema. 
  8. Verifica Editor del sito, Template, e Parti del Template. 

Bonus: Prova ad importare ed esportare contenuti da uno dei tuoi siti attuali ad un sito di test, in modo da rendere il sito di test più realistico e pertinente, anche se il sito non sta usando un tema a blocchi. A questo punto, passa a qualunque altro tema, che sia a blocchi o meno. Questo serve puramente a farti entrare nell’ottica di pensare di più a ciò che vorresti tenere, anche se ci stiamo concentrando in modo specifico sui temi a blocchi. 

Descrivi ciò che vorresti vedere

Commenta di seguito dopo aver riflettuto sulle seguenti domande. Ricorda di condividere ciò che vorresti idealmente vedere, piuttosto che concentrarti su quanto è disponibile in questo momento. Rispondi ad una domanda, rispondi a tutte o non rispondere affatto! Servono solo per farti entrare nell’ordine delle idee, piuttosto che essere delle caselle da spuntare: 

  • Cosa vorresti essere in grado di fare quando passi da un tema all’altro?
  • Quali parti del tema a blocchi ti aspetti di essere in grado di mantenere quando passi da un tema all’altro?
  • Che genere di messaggi di conferma vorresti vedere?
  • Condividi un momento in cui il passaggio ad un altro tema ha fatto succedere qualcosa di inaspettato.
  • Quando passi da un tema all’altro sul tuo sito, puoi condividere il tuo procedimento?
  • Se volessi passare ad un nuovo tema oggi, dove andresti ed in quali posti ti aspetteresti di essere in grado di fare questa operazione?
  • Quali sono alcune delle ragioni che hai avuto per voler passare ad un nuovo tema?
  • C’è dell’altro? Pensa in grande!

Condividi il tuo feedback entro il 29 Settembre 2021

Come sempre, grazie per la tua partecipazione in questo esercizio. Se c’è qualcosa che ti impedisce di partecipare, faccelo sapere su #fse-outreach-experiment, nei commenti a questo articolo, o tramite DM in Slack ad @annezazu (non sono io!). Tieni presente che non tutto ciò che verrà condiviso sarà implementato, data la natura di questa esplorazione, ma sappi che le tue idee serviranno a dare forma a ciò che sarà possibile man mano che andiamo avanti.

Grazie a @poena @kellychoffman @priethor @daisyo per la revisione!

#block-themes, #fse-exploration, #fse-outreach-program, #full-site-editing

Chiamata per il test del programma FSE #9: Occuparsi di Header per delle Università

Questa è la nona chiamata per il test all’interno del Full Site Editing Outreach Program! Per sapere di più su questo programma di divulgazione, dai un’occhiata a  queste FAQ con utili dettagli. Per entrare nel vivo, vai su #fse-outreach-experiment in Make Slack per futuri annunci di test, articoli utili ed altro ancora.

Rispetto alle precedenti chiamate per il test, questa è ancora più orientata alla comunità, dopo il suggerimento di @blake di fare una chiamata che avesse come tema l’Università. Se vuoi suggerire un’idea per una chiamata per il test, sappi che è più che benvenuta e che tutte le idee saranno considerate in relazione alle attuali priorità del progetto, in modo da stabilire quali abbia più senso intraprendere. Puoi condividere idee direttamente nel canale slack o tramite DM ad @annezazu

Panoramica delle funzioni

Per basare questo test su un esempio della vita di tutti i giorni, torneremo a scuola come amministratori e creeremo un header personalizzato per dare il benvenuto a studenti, genitori ed insegnanti alla nostra ipotetica università. Come ispirazione, dai un’occhiata al campione di siti universitari di seguito o cercane qualcuno vicino a te! Dato che questo test si concentra sul costruire la porzione dell’header, l’attenzione è puntata su questo aspetto e sul prendere nota di cosa è stato fatto su ogni sito: 

https://www.kyoto-u.ac.jp/en

https://www.ni.ac.rs/en/student-info

https://engineering.asu.edu/

Come puoi immaginare, questo test ci consentirà di esplorare più in profondità il blocco Navigazione. Per rinfrescare la memoria, è un nuovo, potente blocco che fornisce l’abilità di modificare il menu di navigazione di un sito, sia in termini di struttura che di design. Per aiutarci a prepararlo per l’inclusione in una futura versione di WordPress, il test ha lo scopo di esplorare i limiti di cosa può fare questo blocco.

In modo simile ai test precedenti, se scegli di sbizzarrirti con la creatività, condividi uno screenshot nei tuoi commenti, in modo che possiamo complimentarci per quello che hai creato. Come ispirazione, ecco il mio esempio di seguito, con più livelli di elementi sottomenu visualizzati:

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: 

In generale, assicurati di usare la versione più recente di ogni parte del setup e tieni presente che le versioni potrebbero essere cambiate da quando questo articolo è stato condiviso.

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ù importanti:

Passi del test per principianti

Questa sezione è indirizzata a chi vuole seguire dei passi specifici per creare un header e potrebbe non avere molto altro tempo per spingersi un po’ oltre con questo 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.

Crea la struttura (parte del template, colonne, etc.)

  1. Naviga fino alla vista “Site Editor (beta)”. Questo  aprirà automaticamente l’editor del template che fa funzionare la tua home page.
  2. Dopo aver aperto la tua home page, rimuovi il blocco Navigazione che trovi all’interno della parte del template Header. Questo serve a reimpostare l’header in modo da poter aggiungerci dei contenuti più avanti. 
  3. Seleziona il blocco Colonne genitore e, usando le impostazioni del blocco nella barra laterale, cambia il numero di colonne da 2 a 3.
  4. Torna al blocco colonne e, usando le impostazioni del blocco nella barra degli strumenti, assicurati che sia impostato su larghezza piena.

Costruisci il branding del sito

  1. Nella prima colonna, inserisci il blocco Logo del sito e carica/usa un logo per il sito. Puoi usare questo logo gratuito di logodust.com se vuoi.
  2. Ora personalizza i blocchi titolo del sito, motto del sito e logo del sito in base ai tuoi gusti (cambia font, colore, allineamento, ecc.)
  3. Nella seconda colonna, inserisci un blocco Pulsanti per aggiungere un avviso a proposito di COVID, collegandolo all’articolo sull’aggiornamento COVID di agosto. Puoi fare questo cercando il titolo dell’articolo. Se non hai ancora importato il contenuto demo necessario, fallo usando questo file di esportazione (apri il link e fai clic sulla voce “Download”). 

Crea un semplice menu per gli elementi principali 

  1. Nella terza colonna, inserisci un blocco navigazione e seleziona l’opzione “inizia vuoto”. 
  2. A questo punto, usa il blocco Link pagina per aggiungere le seguenti pagine dal contenuto importato: Contact, Directions, Make a Donation. Per fare questo, basta iniziare a scrivere il titolo di ogni pagina. A questo punto, noterai probabilmente il bug relativo alla spaziatura che prevediamo di risolvere nella versione 11.3 di Gutenberg. 
  3. Rinomina la voce di menu Make a Donation in Donate per renderla più breve, semplicemente modificando il testo del blocco Link pagina.  
  4. Per completare il menu, inserisci il blocco Ricerca e, usando le impostazioni nella barra laterale, personalizzalo in base ai tuoi gusti (scegli colore di sfondo, colore del test, larghezza, ecc.).
  5. Una volta che le voci del menu sono impostate, seleziona tutto il blocco Navigazione ancora una volta e, nelle impostazioni della barra laterale, sotto “Impostazioni di visualizzazione” attiva l’opzione Abilita il menu responsive. A questo punto puoi, se vuoi puoi anche personalizzare gli stili del blocco.

Creare un menu più complesso per voci specifiche

  1. Seleziona tutto il blocco Colonne che contiene le tue tre colonne (questo è uno dei casi in cui potresti trovare utile la Visualizzazione in modalità elenco). Usando le opzioni aggiuntive all’interno del menu, seleziona “Inserisci prima” per aggiungere un altro blocco. 
  2. Aggiungi un altro blocco Colonne e seleziona l’opzione 30/70.
  3. Da qui, seleziona tutto il blocco Colonne ancora una volta e, usando le impostazioni nella barra degli strumenti del blocco, assicurati che sia impostato su Larghezza piena.
  4. Aggiungi un blocco Navigazione alla colonna più ampia, con larghezza 70%, e seleziona l’opzione “Inizia vuoto”. 
  5. A questo punto, utilizza il blocco Link pagina per inserire le seguenti pagine dal contenuto importato: About, Admissions, Student Life, Research, and News. Per fare questo, puoi iniziare a scrivere il titolo di ogni pagina. 
  6. Una volta che gli elementi principali del menu sono sistemati, seleziona tutto il blocco Navigazione ancora una volta e, nelle impostazioni della barra laterale, sotto “Impostazioni di visualizzazione” attiva l’opzione Abilita il menu responsive.
  7. Da qui, aggiungi le voci dei sottomenu ad About, Admissions, Student Life, e Research. Nel caso ti servisse un aiuto, ecco uno screenshot dell’icona per aggiungere voci sottomenu. 
    1. About dovrebbe avere le seguenti voci come sottomenu: Distinguished Alumni,  Diversity and Inclusion, Faculty, History, Leadership.
    2. Admissions dovrebbe avere le seguenti voci come sottomenu: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition. 
    3. Research dovrebbe avere le seguenti voci come sottomenu: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research. 
    4. Student Life dovrebbe avere le seguenti voci come sottomenu: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services. 
  8. A questo punto, aggiungi voci sottomenu sotto Admissions > Career: Business, Design, Technology. 
  9. Una volta che le voci sottomenu sono state aggiunte, riordina e rinomina le varie voci sottomenu in base alle tue preferenze. Puoi riordinarle usando l’opzione che trovi all’interno del blocco Navigazione quando selezioni tutto il blocco Navigazione, come mostrato in questa GIF
  10. Se vuoi aggiungere delle altre pagine che ancora non esistono, puoi farlo scrivendo un titolo che non esiste ancora all’interno del tuo sito. Facendo questo, vedrai un’opzione per creare la bozza di una pagina. Fai questa operazione per almeno una voce di menu. Ricordati di divertirti e creare qualcosa che sia davvero a tema Università!
  11. A questo punto, personalizza tutto il blocco Navigazione come preferisci (cambia allineamento, colore, dimensione dei font, ecc.). Ricorda che per gli elementi sottomenu puoi usare le impostazioni colore in sovraimpressione per impostare il colore che preferisci.

Salva il tuo lavoro e continua a personalizzare

  1. Fai clic su “Salva” per salvare le tue modifiche e vedere il tuo sito sul frontend. Nota eventuali differenze tra quello che vedi nell’editor e quello che vedi sul frontend. Se hai pagine che sono ancora bozze, assicurati di pubblicarle in modo che siano visibili nel menu. 
  2. Prova a vedere il tuo sito su un dispositivo mobile e verifica se i menu vengono visualizzati in modo responsive con un menu hamburger.
  3. A questo punto, continua a personalizzare in base alle tue preferenze, cambiando allineamento, colore, dimensione dei font, eliminando, rinominando, riordinando delle voci ed altro ancora. Puoi anche inserire dei blocchi aggiuntivi sia al blocco Navigazione, incluso i blocchi Spazio vuoto ed Icone social.

Passi del test avanzati

Questa sezione è indirizzata a chi ha il tempo per spingersi oltre con il test ed è a proprio agio nell’avventurarsi nell’editor del sito senza molte indicazioni.

I passi per questa sezione sono semplici: trova l’header di un’università e prova a ricrearlo tutto o in parte. Puoi benissimo continuare ad usare TT1 Blocks o utilizzare il tema a blocchi che preferisci (prendi nota se usi un tema diverso). Puoi usare le università elencate in precedenza o puoi trovarne di tue. Quando lasci un commento, condividi uno screenshot di quello che stavi cercando di replicare ed uno screenshot di quello che è stato possibile creare. È molto utile vedere cosa vorrebbe creare chi partecipa, quindi non esitare a condividere i diversi design che vedi. 

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 mentre creavi l’header? Fornisci informazioni più specifiche possibile, specialmente se hai seguiti i passi avanzati
  • 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 dell’editor del sito corrisponda a quello che vedi sul tuo sito?
  • Come ti è sembrato il funzionamento del blocco Navigazione quando visualizzato su formati di schermi più piccoli?
  • Ha funzionato usando solo la tastiera?
  • Ha funzionato usando uno screen reader?
  • Se vuoi, prova ad analizzare il tuo sito di test con uno strumento tipohttps://wave.webaim.org o https://www.accessify.com per vedere come si comporta. 

Lascia un feedback entro il 1 settembre 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.

#fse-outreach-experiment, #fse-outreach-program, #fse-testing-call, #full-site-editing

Chiamata per il test del programma FSE #8: Fiorisci con Theme.json

Un ringraziamento a @daisyo@jffng per l’incredibile quantità di aiuto nello scrivere e perfezionare questa chiamata per i test. 

Nota importante: Rispetto alle precedenti chiamate per i test del programma FSE Outreach, questa è intenzionalmente rivolta più ad un pubblico di sviluppatori, piuttosto che agli utenti finali o a chi utilizza site builder, con lo scopo di raccogliere feedback che abbia un grande impatto su theme.json, un nuovo strumento per gli extender. Potete leggere di più su cosa aspettarvi dalle nostre prossime iniziative qui

Panoramica delle funzionalità

Volendo definirlo in modo generale, theme.json è un file di configurazione usato per abilitare o disabilitare funzionalità ed impostare stili di default sia per un sito che per dei blocchi. Piuttosto che avere a che fare con una miriade di indicatori di supporto dei temi o metodi alternativi, theme.json fornisce un modo consolidato e canonico di gestire tutto. Queste impostazioni includono opzioni come:

  • Quali opzioni di personalizzazione dovrebbero essere rese disponibili o nascoste all’utente.
  • Quali sono colori, font predefiniti, ecc., disponibili all’utente
  • Definire il layout di default dell’editor (larghezza e allineamenti disponibili).

Questo file di configurazione è una grossa parte di ciò che rende i temi basati sui blocchi così potenti, dato che consente un controllo più particolareggiato ed introduce il primo passo nella “gestione degli stili” per future versioni di WordPress. Ecco alcuni dei principali benefici nell’usare questo nuovo meccanismo: 

  • Consente ai temi di fornire impostazioni per singoli blocchi, cosa che non era possibile in precedenza, dato che add_theme_support è rivolto alle impostazioni per l’intero editor. 
  • I temi che utilizzano theme.json avranno automaticamente classi e proprietà css personalizzate accodate per le impostazioni predefinite che dichiarano, anziché doverle gestire separatamente. Inoltre, questo significa che le traduzioni dei nomi delle impostazioni predefinite sono anche gestite per conto loro! 
  • Theme.json coordinerà core, tema e stili dell’utente in un modo che riduce la quantità di CSS che è necessario includere ed aiutare a risolvere problemi di specificità.

Anche se i temi basati sui blocchi non funzioneranno su WordPress 5.8 senza il plugin Gutenberg, dato che alcuni temi basati sui blocchi non erano completamente pronti per essere pubblicati, questa è ancora una importante funzionalità in arrivo nella 5.8 che ha necessità di test ed esplorazione. Se avete avuto delle curiosità sul mondo dei temi basati sui blocchi o avete iniziato a costruire il vostro, questa chiamata per i test è fatta per voi e dovrebbe aiutarvi a continuare ad esplorare cosa è possibile fare con theme.json dandovi allo stesso tempo la possibilità di condividere cos’altro vorreste vedere.

Potete leggere di più riguardo questa funzionalità nella documentazione che trovate qui

Passi del test per principianti

Questa sezione è rivolta a chi vuole avere un’idea di ciò che theme.json può controllare e quale aspetto avrà il risultato.

  1. Vai su https://gutenberg-theme.xyz/. Questo è uno strumento che può aiutarti a generare la sezione delle impostazioni del file theme.json.
  2. Da qui, prova ad attivare o disattivare varie funzioni supportate dal tema. Questo ti aiuterà ad esplorare alcune delle impostazioni che è possibile controllare tramite theme.json. Ad esempio, puoi attivare i controlli relativi a colori personalizzati o link personalizzati. Nota come il codice generato nel browser cambia in base alla tua selezione. 
  3. Usa il bottone + vicino a Palette, Gradients o Font Sizes per esplorare l’aggiunta di personalizzazioni. Ricorda che puoi modificare sia lo slug che delle variabili specifiche quali nome del colore o dimensione del font.
  4. Aggiungi alcune personalizzazioni e verifica quanto viene generato! Se vuoi spingerti un po’ oltre ed usare quello che hai creato, dai un’occhiata a questi passi intermedi. 

Passi del test per utenti intermedi

Questa sezione è rivolta a chi desidera andare più a fondo su theme.json scrivendo il proprio file ed esplorando ciò che varie impostazioni possono controllare. 

Nota: questo si concentra principalmente su funzioni supportate dal tema ed impostazioni predefinite per i blocchi nella sezione impostazioni di theme.json anziché in Global Styles.

Impostare il tuo ambiente di test

  • Crea una nuova installazione di WordPress.
  • Installa ed attiva il plugin Gutenberg accertandoti di utilizzare l’ultima versione (10.9.0 mentre scriviamo).
  • Scarica ed installa TT1 Blocks dalla Directory dei temi
  • Naviga fino alla directory del tema TT1 Blocks ed apri il file theme.json file in un editor di testo o in un IDE.

Come regola generale, usa la versione più recente di tutte le parti che compongono la tua installazione e ricorda che le versioni potrebbero essere cambiate da quando questo articolo è stato condiviso.

Layout

  1. Crea un nuovo articolo.
  2. Aggiungi un blocco copertina con uno sfondo a tinta unita ed alcune linee di contenuto in un blocco paragrafo all’interno dell’articolo.
  3. Aggiungi un altro blocco copertina con uno sfondo a tinta unita ed alcune linee di contenuto in un blocco paragrafo all’interno dell’articolo. Imposta questo blocco come “larghezza ampia”.
  4. Aggiungi un terzo blocco copertina con uno sfondo a tinta unita ed alcune linee di contenuto all’interno dell’articolo ed imposta questo blocco come “larghezza piena”.
  5. Pubblica l’articolo.
  6. Carica l’articolo sul front end e fai caso alla larghezza dei blocchi copertina.
  7. Cambia il valore contentSize con un valore pixel diverso nella sezione Layout di theme.json.
  8. Cambia il valore wideSize con un valore pixel diverso nella sezione Layout di theme.json.
  9. Carica la visualizzazione di modifica dell’articolo creato in precedenza e conferma che le nuove larghezze ora vengono corrispondano nell’editor.
  10. Carica l’articolo sul frontend e conferma che le nuove larghezze corrispondano sul frontend del sito.
  11. Punti bonus: Prova ad impostare i valori di larghezza utilizzando qualcosa diverso da “px”, ad esempio “em”, “rem”, “vh”, “vw”, or “%”

Tipografia

  1. Imposta come true le seguenti opzioni di tipografia in theme.json:
  • customFontWeight (Blocco Titolo)
  • customFontSize (Blocco Paragrafo)
  • customLineHeight (Blocco Paragrafo)
  • dropCap (Blocco Paragrafo)
  • Verifica la visibilità delle impostazioni di tipografia in un blocco paragrafo (dimensione font, peso del font weight, altezza della linea and capolettera)
  • Verifica la visibilità delle impostazioni di tipigrafia in un blocco Titolo (dimensione font, peso del font weight, altezza della linea)
  • Prova che ognuna delle impostazioni venga applicata al blocco sul frontend
  • Cambia le impostazioni di tipografia come false in theme.json
  • Conferma che ognuna delle impostazioni personalizzate di tipografia nel blocco paragrafo non siano più presenti nell’editor a blocchi (Nota che le impostazioni di tipografia applicate precedentemente potrebbero essere ancora valide per i blocchi esistenti)
  • Crediti aggiuntivi: Aggiungi una o più famiglie di font e dimensioni di font alla sezione tipografia del file theme.json. Verifica le tue famiglie di font e dimensioni personalizzate usando un blocco pulsante. 
  • Bordi

    1. Imposta come true le seguenti impostazioni dei bordi su true in theme.json:
    • “customColor”: true
    • “customRadius”: true
    • “customStyle”: true
    • “customWidth”: true
  • Crea un blocco gruppo che contenga un blocco paragrafo con varie righe di testo. 
  • Verifica la visibilità delle impostazioni dei bordi in un blocco gruppo (stile, larghezza, raggio, colore personalizzato).
  • Verifica che le impostazioni siano applicate al blocco sul frontend.
  • Imposta come false le impostazioni dei bordi in theme.json.
  • Conferma che le impostazioni dei bordi nel blocco gruppo non siano più presenti nell’editor a blocchi.
  • Colore

    1. Imposta come true le seguenti impostazioni per  custom e customGradient in theme.json:
    • “custom”: true
    • “customGradient”: true
    • “link”: true
  • Aggiungi un blocco copertina con uno sfondo a gradiente personalizzato ed alcune righe di contenuto in un blocco paragrafo all’interno dell’articolo
  • Aggiungi un link al blocco paragrafo ed assegna un colore personalizzato al colore del link.
  • Aggiungi un altro blocco copertina con un’immagine di sfondo ed alcune righe di contenuto in un blocco paragrafo all’interno del post. Assegna allo sfondo della copertina uno degli effetti bicromia predefiniti.
  • Cambia i colori di bicromia dell’immagine di sfondo in modo che usino colori personalizzati per le impostazioni di ombre e alte luci dell’effetto bicromia.
  • Crediti aggiuntivi: Aggiungi uno o più colori addizionali alla tavolozza dei colori ed alle impostazioni predefinite bicromia o gradiente. Per maggiori informazioni a proposito dei gradienti CSS dai un’occhiata a queste risorse di CSS Tricks e CSS Gradient.
  • Nel caso possa aiutare, ecco un esempio di @daisyo del genere di risultato che dovresti ottenere alla fine.

    Passi del test (molto) avanzati

    Questa sezione è rivolta a chi ha esperienze di sviluppo di temi e vuole creare un tema basato su blocchi più robusto tramite l’utilizzo di theme.json. Questa è una cosa per tutti! 

    Se ti senti più a tuo agio con i temi basati sui blocchi ed hai del tempo per esplorare in profondità theme.json, prova a replicare un tema classico. Ecco due opzioni che dovrebbe essere interessante esplorare, ma ricorda che qualsiasi tema di default dovrebbe funzionare bene:

    Mentre provi a fare questo, prendi nota di quali sono i limiti attuali, quali sono le cose più difficili da fare, e quello che invece è sorprendentemente facile! Condividi le tue impressioni nei commenti di seguito, in modo che possiamo imparare dalla tua esperienza. Questa richiesta è volutamente aperta ed avanzata, per cui non preoccuparti se non ti senti di raccogliere la sfida. Se vuoi invece seguire qualcun altro che esplora il modo in cui fare questo, segui il video dell’esperimento di @mkaz su come imparare a creare un tema basato su blocchi.

    Cosa notare:

    Queste domande sono specificamente per le sezioni intermedia ed avanzata: 

    • Al passaggio del mouse, i colori aggiunti tramite il file theme.json vengono mostrati assieme ai nomi assegnati sulla tavolozza dei colori per i vari blocchi?
    • Le dimensioni dei font aggiunte tramite il file theme.json file sono visualizzate assieme a nomi e dimensioni assegnate nei menu a discesa per la selezione della dimensione dei font nei blocchi?
    • I colori e le dimensioni dei font sono visualizzate correttamente quando utilizzate assieme ai blocchi nell’editor? 
    • I colori e le dimensioni dei font sono visualizzate correttamente quando utilizzate assieme ai blocchi sul frontend?
    • Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
    • Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza? 

    Lascia un feedback entro il 14 Luglio

    Lascia un feedback (domande, commenti, perplessità) nei commenti di questo articolo e prendi nota della sezione che hai seguito. Se preferisci, puoi sempre creare delle issue in questo repo GitHub direttamente per Gutenberg, ma è improbabile che tu debba farlo per questo test. In ogni caso, Se lasci un feedback in GitHub, commenta di seguito indicando il link. 

    Unisciti alla nostra chiacchierata sui test di theme.json il 7 luglio.

    Per aiutare chi vorrebbe esplorare in gruppo questo test e theme.json, @daisyolsen sarà la moderatrice di una chiacchierata informale specifica su questo esercizio. Se non hai mai partecipato ad una delle nostre chiacchierate in corridoio, puoi leggere di più sull’argomento qui. In fin dei conti, sono pensate per essere delle occasioni di collaborazione informale che fanno incontrare chi ha interessi simili. 

    Speriamo di vederti lì. 

    #fse-outreach-program, #fse-testing-call, #full-site-editing

    Chiamata per il test del programma FSE #7: Portfolio di un certo livello

    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:

    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.

    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:

    Idee per il Template Portfolio:

    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

    Chiamata per il test del programma FSE #6: Un atterraggio perfetto (sulla pagina)

    Questo articolo riguarda l’annuncio della sesta call per i test come parte del Full Site Editing Outreach Program, un passo davvero importante sulla strada verso la 5.8! Se non hai potuto ancora partecipare, questo è un’ottima occasione per farlo. Se ti piace l’idea di contribuire agli sforzi futuri, dai un’occhiata ai prossimi appuntamenti nel calendario del programma

    Per maggiori informazioni riguardo questo programma sperimentale, dai un’occhiata a queste FAQ per ulteriori 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à

    È cambiato molto da quando la prima call per i test si era concentrata sulla modifica dei Template quindi, se ti preoccupa che questa possa essere un’esperienza ripetuta, non esserlo. 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. Quando questa funzione è stata rilasciata inizialmente, era possibile modificare solo un template ma non era possibile crearne uno nuovo o assegnare un articolo o una pagina ad un template specifico. Adesso, invece, puoi creare un nuovo template, modificare quelli esistenti, e scegliere quale template usare per pagine ed articoli. A questo proposito, l’interfaccia è stata aggiornata per rendere più chiaro quando ti trovi effettivamente nella modalità di modifica del template. 

    Per rendere tutto questo un po’ più realistico, faremo finta di creare il sito per un WordCamp con una landing page che ha lo scopo di attrarre visitatori di un altro evento e farli partecipare al WordCamp che stai organizzando.

    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: 

    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

    Nota importante: 

    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. 

    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. 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.6.
    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. Non fare clic su questa voce, dato che per questo test non stiamo esplorando l’editor del sito!

    Creare delle pagine 

    1. In Pagine, seleziona “Aggiungi pagina” e, una alla volta, crea tre pagine a cui dare i titoli “Chi siamo”, “Contatti” e “Codice di condotta”. Pubblica tutte le pagine. Non serve che abbiano del contenuto, dato che saranno semplicemente link per un futuro menu. 
    2. Crea una quarta pagina, scegli un titolo divertente per portare gente al tuo evento e non aggiungere ulteriore contenuto. Ad esempio, io ho intitolato la mia “Senti l’ispirazione di WordCamp Divano?”.
    3. Pubblica la pagina e tienila aperta.

    Creare 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 dovessi bloccarti.
    2. Intitola il tuo nuovo template “Promozione WordCamp”.
    3. A questo punto, entrerai direttamente nella modalità di modifica del template.

    Personalizzare il template

    1. Rimuovi i blocchi Titolo del sito, Tagline del sito e Separatore nella parte alta del template.
    2. Inserisci un blocco Copertina sopra il blocco Titolo dell’articolo ed usa un’immagine a piacere. Io ho scaricato questa mentre creavo questo test. Potrebbe essere necessario usare l’opzione “Inserisci prima” nella barra degli strumenti del blocco Titolo dell’articolo.
    3. Una volta che hai aggiunto l’immagine, seleziona il blocco Copertina ancora una volta, anziché il blocco Paragrafo al suo interno, ed usa le opzioni di larghezza per rendere il blocco a larghezza piena.
    4. Trascina e rilascia il blocco Titolo del’articolo all’interno del blocco Copertina.
    5. Centra il blocco Titolo dell’articolo usando le impostazioni di allineamento e cancella il blocco paragrafo che si trova sotto di esso.
    6. Seleziona il blocco Copertina ancora una volta ed applica ad esso un filtro Bicromia. Ecco uno screenshot dell’icona ti serve. Nota che selezionando  Note that by selecting “Ombre” e “Highlights” puoi scegliere i tuoi colori personalizzati!
    7. Aggiungi un blocco Spaziatore sotto il blocco Copertina ed impostalo a 50px.
    8. Aggiungi un blocco Colonne sotto il blocco Spaziatore e scegli 50/50.
    9. Una volta inserito, scegli il blocco Colonne genitore ed imposta la larghezza a “Larghezza piena”.
    10. Aggiungi delle brevi informazioni sul tuo evento nella prima colonna, ed imposta l’allineamento che preferisci.
    11. Nella seconda colonna, aggiungi due pulsanti che dicono alle persone “Candidati come speaker” e “Candidati come sponsor”. Per questo test, va bene se i pulsanti non sono davvero collegati a qualcosa. Puoi comunque personalizzarli come preferisci!
    12. Sotto il blocco colonne, aggiungi un altro blocco Copertina e scegli un colore di sfondo
    13. Una volta che hai impostato il colore, seleziona nuovamente il blocco Copertina invece del blocco Paragrafo al suo interno ed usa le opzioni di larghezza per renderlo a larghezza piena.
    14. All’interno del blocco Copertina, aggiungi un messaggio riguardo un codice sconto ed un blocco Pulsante sotto di esso, per incoraggiare le persone ad acquistare i biglietti. Personalizza il testo a piacere, sia in termini di allineamento che di colori personalizzati, o altro ancora

    Creare un footer personalizzato

    1. Sotto il secondo blocco Copertina, aggiungi un blocco Parte del Template e seleziona “Nuova parte del template” per creare un footer personalizzato per questo template. 
    2. Una volta creato, vai sulle impostazioni del blocco nella barra laterale per aggiungere un titolo all’interno della sezione Avanzate. Assegna all’area il nome “Footer” all’interno dell’area Avanzate ed attiva l’opzione “Eredita il layout predefinito” all’interno della sezione Layout.
    3. Una volta fatto questo, aggiungi un blocco colonne all’interno della Parte del template e scegli 30/70.
    4. Nella prima colonna, aggiungi un blocco Logo del sito. Se ti serve un logo da usare, eccone uno gratuito che puoi scaricare da http://www.logodust.com
    5. Nella seconda colonna, aggiungi un blocco Navigazione ed inizia vuoto. Da notare, è probabile che riscontrerai questo bug che è stato già segnalato qui
    6. Usando l’opzione Link della pagina, aggiungi le tue pagine “Chi siamo”, “Contatti” e “Codice di condotta”. Personalizza il blocco Navigazione come preferisci!
    7. Una volta fatto questo, seleziona “Aggiorna” e salva le tue modifiche.

    Crea una nuova pagina ed assegna il nuovo template

    1.  A questo punto, torna alla tua bacheca wp-admin e, all’interno di Pagine, crea una nuova pagina.
    2. Come titolo, scegli qualcosa che abbia un riferimento ad un altro possibile evento di fantasia a cui qualcuno potrebbe partecipare. Ad esempio, “Senti l’ispirazione di WordCamp Veranda?”
    3. Nelle impostazioni dell’articolo, all’interno della sezione Template, seleziona il template che hai appena creato e pubblica la pagina. 
    4. Visualizza la tua pagina ed accertati che stia usando lo stesso template della tua prima pagina!

    Passi avanzati

    Se ti va di provare qualcosa più tecnico e vuoi cimentarti con idee per il futuro, dai un’occhiata a questa Pull Request. Tieni a mente che puoi sempre scaricare qui la versione del plugin Gutenberg specifica per questa PR in modo da rendere la cosa più facile da esplorare. Per darti un contesto, questa PR ha lo scopo di aiutare a differenziare meglio quando stai modificando il contenuto di un articolo da quando invece stai modificando il template, oscurando l’abilità di modifica dei contenuti dell’articolo quando ti trovi nella modalità di modifica del template. Condividi liberamente i tuoi pensieri su questa PR nel commenti di seguito o direttamente nella PR.

    Video del test

    Nota che sono stati aggiunti tre capitoli al video, che corrispondono ai passi di cui sopra.

    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 26 Maggio 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

    Programma FSE: Risposte dal secondo round di domande

    Traduzione italiana dell’articolo “FSE Program: Answers from Round Two of Questions”, pubblicato da Anne McCarthy, @annezazu il 13 maggio 2021 su make.wordpress.org.

    Questo articolo è parte di una serie più ampia che fornisce risposte a domande raccolte attraverso il Programma FSE Outreach. Questo giro di domande è stato iniziato il 28 Aprile e ora viene riunoto in un unico articolo, dato il numero notevolmente inferiore di domande. Grazie a chi ha inviato delle domande, facendo quindi in modo che la nostra conoscenza possa aumentare. Restate sintonizzati per nuovi round di domande.

    1) Come si intende gestire il “CSS aggiuntivo” nel caso in cui la funzione Personalizza dovesse sparire? Non tutti possono né vogliono gestire tutto all’interno dei blocchi. Secondo me i “normali” builder di siti internet hanno necessità di un modo semplice di fare dei cambiamenti al CSS di un tema.

    Ne stiamo discutendo proprio in questo momento dato che ci si aspetta che la funzione Stili Globali coprirà una gran parte dei casi che potrebbero richiedere del CSS, ma ci si aspetta che ci siano altre situazioni in cui sia necessario del CSS personalizzato.

    2) Posso scegliere di usare la modifica di articoli/pagine standard al posto del full site editing, ed usare Personalizza per fare degli aggiustamenti a tutto il mio sito?

    È piuttosto difficile dare una risposta dato che l’esperienza specifica che sperimenterai dipende dal tuo tema e da quanto possa essere stato adattato al full site editing. Se non stai usando un tema basato su blocchi o un tema che ha iniziato ad adottare delle funzionalità full site editing, puoi continuare a modificare il tuo sito come hai sempre fatto usando Personalizza. C’è comunque un sacco di lavoro in corso per aiutare i temi basati sui blocchi ad avere parità a livello di Personalizza, così come per fare in modo che i temi classici abbiano modi di optare per l’utilizzo di aspetti delle funzionalità del full site editing, come pure l’idea di temi “universali” che funzionino sia con strumenti di modifica del sito classici (Personalizza/Menu/Widget) che con il nuovo editor del sito

    3) I vari blocchi che fanno parte del Full Site Editing saranno inclusi anche nelle schermate di modifica di articoli/pagine?

    In preparazione per 5.8, stiamo valutando ognuno degli oltre 20 blocchi per temi che sono stati creati per Full Site Editing per decidere se saranno inclusi nei temi classici. Potete verificare il progresso di questa iniziativa in questa panoramica riepilogativa.  

    4) Arriveremo a creare un sito con Full Site Editing invece che tramite la schermata articoli/pagine?

    Bella domanda! Poiché molto di questo dipende dal tuo tema e da quanto questo abbia optato per l’utilizzo di FSE, dipende. Ad ogni modo, diciamo che tu stia usando un tema basato su blocchi, il che significa che ha optato per l’utilizzo delle funzionalità Full Site Editing. In questo caso, nel lungo periodo, puoi aspettarti di costruire il tuo sito utilizzando l’esperienza dell’Editor del sito (vari template, il tuo header, i tuoi menu, ecc…) ed i contenuti usando l’editor degli articoli. Questo potrebbe significare che come prima cosa creerai alcune pagine, ad esempio una pagina About ed una pagina Contatti, prima di proseguire con l’Editor del sito per fare le migliorie che vorresti vedere sui template usati da queste pagine. Non aspettatevi comunque l’arrivo dell’esperienza dell’Editor del sito già in WordPress 5.8, dato che questo non fa parte dell’elenco dei progetti di cui è stata definita l’inclusione

    5) Come gestiremo tutte le diverse variazioni derivate da blocchi riutilizzabili, modelli, template di pagina e template Full Site Editing?

    Ci sono state tre domande relative a questo argomento, per cui ho deciso di far rappresentare il mucchio da questa domanda! Iniziamo innanzitutto dal definire ognuno, in modo da avere un allineamento comune sui loro diversi utilizzi. Le seguenti definizioni sono state prese dal Glossario nel caso in cui vogliate esplorare altri di questi termini: 

    • Blocco riutilizzabile: un blocco che è stato salvato e che può essere condiviso come un pezzo di contenuto riutilizzabile e ripetibile. Scopri di più sulla creazione e sull’uso di questi blocchi
    • Modelli del blocco: i modelli sono layout predefiniti di blocchi che possono essere inseriti come contenuto iniziale inteso per essere modificato dall’utente ogni volta. Una volta inseriti, esistono come salvataggio locale e non sono globali. Scopri di più riguardo la creazione dei modelli
    • Template: un template è una disposizione predefinita di blocchi, possibilmente con attributi predefiniti o contenuto segnaposto. 

    Per pensare a come questi possano lavorare assieme, facciamo un esempio mostrando quando potreste utilizzare ognuno di questi, usando come punto di vista quello di un sito che si occupa di cucina:

    • Per le nuove ricette su cui stai lavorando e che stai ancora migliorando, puoi creare facilmente un blocco riutilizzabile che renda facile alle persone inviare un sondaggio riguardo la loro esperienza. Questo blocco riutilizzabile potrebbe essere aggiunto ad ogni ricetta, rendendo semplice l’avere un ottimo flusso di feedback.
    • Per ogni ricetta su cui stai lavorando, puoi usare un modello del blocco per impostare velocemente la struttura dei contenuti della tua ricetta, modificando quello che è stato aggiunto dal modello, sapendo che qualunque cambiamento fatto dopo il suo inserimento influenzerà solo quell’articolo. Questo ti fa risparmiare del tempo ed aiuta a creare consistenza quando condividi le tue deliziose ricette. 
    • Stai iniziando una nuova serie di ricette focalizzata sulla cucina durante la quarantena e, per differenziare gli articoli in questa serie, crei un nuovo template per questi articoli, in modo da offrire un’esperienza più personalizzata quando i tuoi lettori stanno vedendo queste ricette anziché le altre solitamente pubblicate.

    Come puoi vedere da quanto sopra, ci sono un sacco di strumenti inclusi nel Full Site Editing ed è fondamentale sia distinguerli che mostrare come possano essere usati assieme. Proprio in questo momento sono in corso sia una discussione che la progettazione relativa al posizionamento finale per molte di queste funzioni. La buona notizia è che siccome c’è una sovrapposizione, è possibile creare una consistenza nell’esperienza di ognuno. Ad esempio, questa issue mostra come i designer stanno pensando a ciò che si può imparare dall’esperienza di modifica dei blocchi riutilizzabili per influenzare l’esperienza della modifica isolata della Parte del template. Attualmente, c’è un bug che fa sì che i Blocchi riutilizzabili non possano essere inseriti all’interno dell’Editor del sito. Nel lungo periodo questo dovrebbe essere tuttavia risolto. 

    6) Gutenberg avrà mai funzioni di builder di pagine, come colonne e paginazione? Qualcosa che posso già fare usando  Kadence Blocks.

    Gutenberg possiede già un blocco Colonne e, con l’Editor del sito, avrà un blocco Paginazione. Attualmente non è previsto che il blocco Paginazione sia comunque incluso nei temi Classici quindi dovrai usare un tema basato sui blocchi per poter avere accesso a questa funzione in futuro. 

    7) È possibile convertire i template per farli diventare blocchi riutilizzabili o modelli o viceversa?

    Attualmente, stiamo discutendo qui della conversione di un blocco riutilizzabile in modello ma, in generale, questo non è ancora qualcosa su cui si sta effettivamente lavorando. Piuttosto che vedere la conversione tra questi elementi, è più probabile che i modelli siano integrati all’interno delle parti di template ed in altri vari blocchi come il blocco Query

    8) Ci sarà qualcosa che somiglia a Full Site Editing nella 5.8?

    Come promemoria, Full Site Editing consiste in una serie di funzionalità che include vari progetti, da Stili Globali fino a nuovi temi basati su blocchi, ed altro ancora. Come risultato ci sono parecchie cose che faranno parte della 5.8 e che somiglieranno al Full Site Editing. Potete leggere di più riguardo queste funzionalità pianificate qui. Nel contesto di questa domanda, tuttavia, immagino che vi stiate riferendo a cambiamenti visibili all’utente che somigliano all’esperienza di uso dell’Editor del sito. In quel caso, la funzionalità più vicina in arrivo è la modalità di modifica dei template ed i corrispondenti, utili blocchi di tema che è possibile utilizzare in questa modalità, ad esempio il blocco Navigazione. Se hai la curiosità di scoprire di più riguardo questa funzione, dai un’occhiata alla più recente call per i test!

    9) Quale nuovo CSS front-end sarà generato da WordPress per supportare FSE? Questi stili saranno separati dai fogli di stile per i blocchi esistenti?

    Gutenberg sicuramente genererà del nuovo CSS. Ad esempio, Gutenberg ora può fornire nuovo codice front-end per allineamenti a larghezza massima e a piena larghezza, per la spaziatura interna e molte altre personalizzazioni dei blocchi. La maggior parte del CSS fornito da Gutenberg sarà personalizzabile via theme.json. Lo scopo è che i temi debbano modificare o sovrascrivere poco o niente di tutto questo con CSS nel lungo periodo.

    Dato che tutto il tema è composto da blocchi, tutto quanto descritto sopra sarà composto da fogli di stile di blocchi. In termini di personalizzazione del tema, questo sarà reso possibile soprattutto tramite i controllo in theme.json. Se un tema vuole ulteriormente incrementare questo con ulteriori stili specifici (ad esempio animazioni, stati hover, etc) possono comunque utilizzare CSS. Ad ogni modo, nella maggior parte dei casi, le personalizzazioni saranno possibili all’interno di theme.json.

    Un ringraziamento a @kjell per avermi aiutato a rispondere a questa domanda specifica.

    10) Quali sono i temi raccomandati attualmente disponibili che funzioneranno bene con FSE?

    Il posto migliore per trovare dei temi basati su blocchi è il Repository Theme Experiments. Tenete a mente che sia FSE che questi temi sono sperimentali e tutt’ora in fase di sviluppo! In particolare, raccomanderei l’uso del tema T1 Blocks, che è poi quello utilizzato per i test del programma FSE Outreach. 

    11) Avete in programma di aggiungere in futuro delle funzionalità alla vista elenco?

    Sì. C’è un riepilogo che tratta dei miglioramenti alla Vista elenco. Questo include di tutto, dall’attivazione lo spostamento dei blocchi fino alla possibilità di comprimere elementi nidificati. 

    12) C’è un modo più chiaro per fornire della documentazione agli autori dei temi che non siano impegnati a fondo nello sviluppo del progetto FSE?

    Giusto alcune settimane fa, è stato creato un nuovo manuale per sviluppatori come introduzione a Full Site Editing, che include una sezione per fornire maggiori informazioni agli autori dei temi. Questo è uno sforzo iniziale per iniziare a rendere maggiormente disponibile questa documentazione, unitamente agli sforzi di un incontro bimensile riguardo i temi basati sui blocchi ed il Gutenberg + Themes Roundups. Accettiamo sempre volentieri feedback su cos’altro vorreste vedere!

    #fse-answers, #fse-outreach-program

    Proposta di discussione del termine “setup”

    Ciao a tutti,
    propongo la discussione di “setup” per l’inserimento nel glossario.
    Il motivo principale è che in “consistency” trovo 8 traduzioni diverse, alcune delle quali mi sembrano inappropriate.

    Proposta di discussione di “builder”

    Ciao a tutti.
    Propongo la discussione di “builder” (generico editor visuale) per l’inserimento nel glossario.

    #glossario

    Programma FSE : Fate le vostre domande – Secondo Round

    (traduzione dell’articolo di Anne McCarthy @annezazu, Developer Relations Wrangler di Automattic, già pubblicato a questo indirizzo)

    Con i prossimi passi Go/No Go delineati prima del rilascio di WordPress 5.8 a luglio 2021, approfittiamo del tempo a disposizione per rispondere a qualsiasi altra domanda di carattere generale possiate avere riguardo il Full Site Editing! Se possibile, concentratevi nello specifico sulle questioni riguardanti WordPress 5.8, dato che rivolgerci a quelle avrà l’impatto maggiore. Inviate pure le vostre domande usando il modulo di seguito, o lasciatele come commento a questo articolo, o la sua versione originale, entro il 12 Maggio:

    Invia Domande

    Tenete presente che, a seconda delle domande, è probabile che alcune delle risposte potrebbero somigliare più a “ci stiamo lavorando per capire meglio la questione ed ogni feedback a riguardo sarebbe utile”, piuttosto che ad una risposta definitiva. Questo è specialmente vero per funzionalità/milestone pianificate per il rilascio di 5.9.

    Dove saranno condivise le risposte? 

    Condividerò un articolo riassuntivo su questo blog (Make Test). Le domande saranno raggruppate assieme alle risposte corrispondenti in modo che sia facile esaminarle. Potete vedere quale sarà il risultato prendendo ad esempio il primo round, che trovate qui. Raccoglierò le risposte ad ogni domanda e condividerò il mio lavoro man mano che procedo, creando un documento Google collaborativo in cui chi vuole può aiutare a trovare le risposte o semplicemente osservare come il lavoro si evolve. Ogni collaborazione è più che mai benvenuta!

    Anche se il risultato principale sarà una gran bella lista di risposte, questo sforzo collettivo sarà anche utile per l’aggiornamento della documentazione futura e per possibili tutorial. Appena l’articolo sarà pubblicato, risponderò tramite mail a chiunque abbia lasciato una domanda e la propria mail tramite il modulo. Chi invece lascerà una domanda come commento a questo articolo, verrà citato come @ al proprio nome utente nell’articolo di riepilogo, in modo che non perda nessun aggiornamento!

    Per maggiori informazioni riguardo questo programma sperimentale, consulta queste FAQ per avere altri dettagli utili. Se poi vuoi divertirti, visita #fse-outreach-experiment in Make Slack per annunci di test futuri, articoli utili ed altro ancora che sarà condiviso lì. Per aiutarti nel pianificare la tua partecipazione, puoi dare un’occhiata al calendario degli appuntamenti attuali e prossimi per il programma FSE Outreach, qui.

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