 Va bene, come sapete, un talk non è un buon talk se non comincia con una domanda. Chi sa che, anzi, chi non sa cosa sono i pattern di Gutenberg sulle mani. Però non siate timidi, non vi vedo, se fate così, giuro che non vi vedo. Ottimo, perfetto. Lo andiamo a scoprire insieme. Partiamo da lontano perché molto spesso si parte da lontano. Tanti, tanti anni fa c'era una volta l'editor YZ-Wing, come non so mai, come si... Eh? Waiosin, grazie marcarità. Che era un fantastico editor in cui potevamo scrivere i nostri contenuti e rendere meravigliosi i nostri blog quando Warpress era uno strumento per i blogger. Poi Warpress è cresciuto, è diventato maggiorenne, non ancora in realtà, però sicuramente è cresciuto e ha avuto bisogno di trasformarsi. Nella sua trasformazione c'è stata l'esigenza di organizzare i contenuti in un modo un po' più flessibile da quello che permetteva appunto l'editor Waiosin. Mi faranno un meme su questa cosa sicuramente. Quindi, designer si ingegnavano nel impostare dei layout per i loro clienti. Abbiamo fatto i nesti sull'editor per avere preimpostati dei contenuti in modo che il cliente con un click potesse inserire il contenuto formatato in modo giusto e lo stesso riuscivano a rompere il sito. Poi finalmente è arrivato Gutenberg e abbiamo cominciato a tirare un sospiro di sollievo perché abbiamo potuto cominciare a lavorare con dei layout che fossero più flessibili per noi, più comprensibili per il cliente e tutti abbiamo iniziato a divertirci. Poi sono arrivati i pattern e io ho fatto un balzo nell'ottimizzazione del mio lavoro. Non mi sono presentata perché l'ho messo alla fine, però pago le bollette facendo la web designer. Quindi, cosa sono i pattern? I pattern sono layout precostituiti che permettono di inserire sezioni articolate nei blocchi con un semplice click. Alcuni sono già presenti nell'editor, non devi installare nessun componente aggiuntivo. Il mio talk è misto slide moment live, quindi andiamo nel primo momento live. Questa è una pagina di un'installazione WordPress creata solamente con Gutenberg e solamente con i pattern. Quindi, come si va a costruire questa pagina? No, non è quello che volevo dire, ma adesso mi riprendo. Ok, dove troviamo i nostri pattern? I pattern li troviamo andando a fare click sulla pulsante azzurro in alto a sinistra e a fianco alla voce blocchi troviamo pattern. Quindi troviamo questi gruppi e layout di contenuto precostituito e per andare a inserirli basta semplicemente andare a fare click sull'elemento che si vuole inserire. Questo velocizza in maniera esponenziale il nostro lavoro. Ovviamente velocizza il nostro lavoro se il pattern è già preparato, nel momento in cui dobbiamo preparare un pattern, lì ci va del tempo. Ma in questo ci aiuta sempre WordPress perché esiste un reposito riperi pattern. E lo andiamo a vedere più avanti. Perché io li uso? Velocizzo il lavoro di creazione dei contenuti. Ripeto, avendo i pattern già preparati. Evito di installare stensioni non necessarie, a volte dedicando un po' di tempo a capire come è la struttura degli elementi che vuoi inserire nella pagina, ti rendi conto che puoi evitare di andare a installare plug-in aggiuntivi per arrivare a quel risultato. Ci va un po' di pazienza, ci va un po' di lavoro, il tempo che usi quella prima volta, poi lo vai a riciclare su tutte le altre volte. Doi mano ai miei clienti, scusate non so come si si pronuncia. Lascio a nel parlato. Quindi vado a dare uno strumento in più per essere autonomi nella gestione del loro sito. Nell'esempio che vi ho messo, la cliente aveva bisogno di dare delle informazioni rispetto a un evento. Potevo installare un plug-in di eventi. Sì, è pieno di plug-in di eventi. Ma quanto se di quel plug-in di eventi serviva la mia cliente? Quasi niente. Allora, ho preparato un pattern dove lei dà le informazioni che servono per il corso e può andare a modificare molto, molto velocemente. Quindi il sito non si appesantisce di un ulteriore plug-in che potrebbe rallentare le performance. C'è un plug-in in meno di cui preoccuparsi di un eventuario buco di sicurezza. La cliente è contenta. Posso creare una landing page in pochi minuti con i pattern? Lo scopriamo. Prima di tutto, come ho accennato prima, esiste reporitori dei patterns. Nella versione italiana dobbiamo ancora mettere il link diretto ai pattern. Quindi lo si può raggiungere solamente mettendo l'URL. Portate pazienza, giusteremo anche questa cosa. Quindi andiamo a vederlo. Questo è il reppo dei pattern di WordPress. Al momento, come vedete, di pattern ce ne sono diversi perché, se abbiamo 115 pagine, qualcuno si è divertito parecchia a preparare pattern. Sono organizzati per categorie. Quindi qui potete andare a fare una selezione della categoria del macro argomento che vi interessa e quindi andare a scegliere i pattern che volete. Come per ogni altra cosa del repositori, una volta loggati è possibile andare a inserire i pattern tra i propri preferiti. Quindi avere sempre a portata di mano le cose che più ci piacciono. Non mi ricordo qual è la prossima slide. Ok, quindi come si usano in un pattern... Non fare scherzi. Noi andiamo a fare in live. Quindi andiamo sull'URL di pattern. Scegliamo il pattern che vogliamo utilizzare per il nostro layout. Si fa clic su copia. C'è proprio pulsante copia, non ci si può sbagliare. E noi andiamo a incollare nella pagina o articolo. Quindi abbiamo il pulsante copia vicino al nome del pattern. Andiamo dentro il nostro pagina o articolo e facciamo incolla. Facciamo un bel login. Così vi faccio vedere i miei pattern preferiti. Ecco qua. Qui ho una selezione di pattern. Come vedete... Sì, direi che vedete. Sono un periodo dei layout che penso che abbiamo visto tutti su un sito web. Che sono molto usati. Comunque a tenere un layout che già conosciamo all'interno dei nostri siti. Allora, io vado a modificare la pagina preposta. Ok, cominciamo con un header. Copia. In colla. 0,00 niente. Poi i pattern sono ovviamente personalizzabili. Non è che andate a incollare un pattern e così resta. E ve lo dovete far piacere così. Ma andate a modificare il testo. Se volete andate a modificare i colori. Andate poi a usare il blocco di Gutenberg. Nel modo in cui si usa normalmente un blocco di Gutenberg. Ci mettiamo dopo. Ci mettiamo questo. Allora, il pattern risponde alle diverse larghezze dello schermo. Si fa clic sull'immagine del pattern. Quindi si apre un'anteprima. E voi potete vedere. Sponderà il pattern. Per esempio sul mobile. Non andiamo a copiare. Non andiamo a incollare. Questi sono gli immagini che possiamo andare a sostituire. Di nuovo andiamo a sostituire. Sono già preparate sulla nostra libreria. Ovviamente adesso verrà uno schifo. Perché non è una fotorotonda. Ok, meglio. La velocità con cui noi andiamo a realizzare una landing page. Dipende del materiale che abbiamo già pronto per quella landing page. Per il tecnico è così e veloce. Vado a riprendere i miei preferiti. Posso andare a mettere questo che ci piace. Questi sono i renti. Fra di loro, ma la coerenza l'andiamo poi a dare rispetto al rispetto al lavoro che dobbiamo fare. Quindi con pochi clic. Abbiamo ottenuto una struttura. Che può essere lavorata per essere migliorata rispetto al nostro obiettivo. Si vede che faccio l'insegnante per questo punto di dire domande. Ma le domande sono alla fine. Ok. Quindi la risposta alla domanda che abbiamo fatto prima. Posso creare una landing page in pochi minuti con i pattern? Sì e no. Con i pattern in pochi minuti costruisci lo scheletro della tua pagina. Se le deve in chiare sul layout. Devi poi considerare il tempo per le modifiche di testi. Immagine pulsante, folori. Io personalmente rispondo sì a questa domanda. Perché tendenzialmente ci sono di solito in un sito web ci sono già abbastanza contenuti. Di solito una persona in un momento in cui dice faccio una landing page, faccio un on page. Ha già ben chiaro cosa ci vuol scrivere. Però può non essere un... Può non volerci pochi minuti per tutti. Per me il vantaggio più grande dei pattern è che si adattano alle impostazioni del tema. Io ho usato modelli preimpostati di plugin che estendono le funzionalità di WordPress e a volte ho trovato all'interno dei plugin delle formatazioni CSS, quindi delle impostazioni estetiche che poi dovevamo andare a modificare perché non erano in linea con il resto del sito. Quindi mi sono trovata un font piuttosto che quello che avevo di sistema. Un colore che non era coerente con tutti gli altri titoli. Una grandezza del body di nuovo non coerente con tutti gli altri titoli. Quando invece andiamo a utilizzare i pattern e tutti i blocchi nativi di Gutenberg questi si adattano alla grafica del tema che è stata fatta per tutto il tema. Penso di averlo detto malissimo, però ve lo faccio vedere così è meglio. Ok, questa è la nostra pagina. In questo momento è attivo il tema blocchi e noi lo andiamo a cambiare. Ti ho aggiornato stamattina, sei cattivo, sapilo. Ok, adesso attiviamo Astra. Al di là del fatto che ci sia il titolo della pagina che prima non era presente. Qui è cambiato il carattere ed è cambiato il colore. Sul tema Astra ho impostato che ci fosse lo sfondo scuro e quindi lo sfondo scuro resta. Qui prima avevamo un font serif e adesso è diventato un font sans serif. Quindi posso fare delle prove anche rispetto ai temi. I blocchi di Gutenberg sono molto, molto flessibili. E se siamo in una fase in cui stiamo rivedendo il tema o stiamo ancora decidendo che tema utilizzare. Una volta mi fa anche di usare questi i pattern per capire qual è il tema, l'aspetto migliore del tema da usare o il tema migliore da usare. Vado a crearmi o dei pattern con dei contenuti fittizi. Così posso testare dei temi per vedere come può essere l'aspetto migliore e il tema più adatto per quel progetto e per quel cliente. Parliamo di come salvare i pattern. Voi sapete che il progetto Gutenberg va avanti grazie alla comunità, grazie all'aiuto della comunità. Ci sono delle funzionalità su Gutenberg che ancora non sono pronte. Una di queste è il fatto di poter salvare i pattern. Al momento, paradossalmente, per salvare un pattern o vado a copiare e incollare il codice del pattern e meno salvo da qualche parte oppure posso usare un plugin che mi salva il pattern. Io potete, ce ne sono diversi e quindi potete guardare sul repository mettendo la parola chiave pattern né plugin né vengono fuori diversi. Io ho scelto block patterns. Che cosa facciamo? Si installa e attiva il plugin sul sito. Andiamo ad aggiungere un nuovo pattern dalla voce di menu block pattern. Possiamo creare il nostro pattern o modificarne uno. Possiamo assegnarlo a una categoria e salvarlo. Questo è un aspetto che a me serve moltissimo con i clienti perché all'interno dei pattern io vado a creare la categoria con il nome del sito così del qual cliente. I tuoi layout sono qua sotto, non ti puoi sbagliare. Metti questa categoria e trovi tutti le... Ok, grazie mille. Vabbè, rendiamola così. Meglio con me che magari con una persona un po' più timida al suo primo talk che con questo problema tecnico sarebbe andato in palla. Io il plugin l'ho già scaricato, adesso lo vado ad attivare. Magari ingrandiamo un po'... ok, così magari lo vedete meglio. E comparsa la voce di menu block pattern. Io posso andare ad aggiungerne nuovo, ma la cosa su cui volevo portare l'attenzione è la voce directory. Con calma si caricherà. La voce directory non è una directory del pattern del plugin, ma si sta collegando al repository di WordPress. Quindi non abbiamo bisogno di collegarci in un'altra pagina, un'altra scheda al repository di WordPress. Possiamo tranquillamente qui andare a cercare i nostri pattern. Al momento non possiamo andare a richiamare i nostri preferiti, come succede invece quando andiamo a cercare temio plugin. Però comunque è già un bel aiuto. Andiamo ad aggiungere questo. Ok, una volta che è stato scelto il pattern, lui ha creato un nuovo pattern all'interno della nostra installazione fondamentalmente. Infatti lo troveremo poi nel l'enco di pattern che abbiamo salvato. E a questo punto possiamo andare a fare le modifiche che ci servono. Quindi possiamo andare a modificare il testo, possiamo andare a modificare lo sfondo. Che cosa orribile, quando faccio queste presentazioni vengono sempre fuori delle cose orribili. Per quello che mi vergogna di essere davanti, perché è impegnatissimo in questo momento. E torniamo indietro così non si vede questa roborripilante. Ok, meglio. Quindi noi abbiamo andato a importare dal repository di WordPress un pattern, che viene salto all'interno del nostro sito web, della nostra installazione. Qui dove c'è la voce, ci sono le opzioni del blocco. Abbiamo la possibilità di assegnare a una categoria, essendo l'installazione del plugin, non va a leggere le altre categorie degli altri patterns, ma solamente quelle che andiamo a scrivere. Lo pubblichiamo, come facciamo con qualunque altro tipo di contenuto. Riaggiorno questa pagina. Adesso, sotto i pattern... Sì, però questo effetto, Marfi, sto facendo la prova non funzioni, non vai bene. Queste figuracce così a gratis. Ah, non me la presa. Devo aver sbagliato qualcosa. Ok, se non riuscite ad aggiungere una categoria direttamente dal pattern, lo fate dalle categorie del pattern, che fa con tutti gli altri contenuti. Quindi, sotto i block pattern, ho tutto l'elenco dei pattern che mi sono scaricata ed eventualmente ho modificato e a questo punto sono disponibili. Facciamo finta che ci sia qua scritto mia categoria, va? Facciamo finta che funzioni. Cinque minuti, sono tremenda. Sono data lunghissima, ragazzi, lunghissima. E quindi facendo click, dobbiamo aggiungere il pattern all'interno della mia pagina. Ok, vediamo che slide sono rimaste. Viste, vedi che dovremmo cominciare cinque minuti prima? Io però farei il fischio dell'arbitro, mi prenderei quei tre minuti che non mi ha funzionato il microfono. Questo è il trick che abbiamo visto. Quindi, dentro al plugin, il plugin è collegato al repository di WordPress e quindi possiamo andare a sistemare i nostri pattern con un click. Come li andiamo a riusare su un altro sito, i nostri pattern? O andiamo ad attivare la modalità editor del codice, quindi viene fuori il codice dei blocchi di Gutenberg, lo copiamo e lo andiamo a incollare in, io di solito uso, GitHub. Oppure può essere un blocco di test, cioè l'importante è che non sia un Word, perché ve lo formatta tutto e vi rovinate il codice. Altra cosa, invece, se usate il plugin contro block patterns esporta un file JSON dalle impostazioni all'opzione di esportare un file JSON che viene importato ovviamente su un sito che a sua volta ha installato il plugin block pattern. Quindi, puoi salvare come pattern qualsiasi blocco o gruppo di blocchi anche quelli realizzati con plugin che stendono le funzioni native di Gutenberg. Ricorda però che lo stesso plugin dovrà essere presente sulle altre installazioni. Quindi, se voi abitualmente usate plugin che stendono le funzionalità di Gutenberg e preparate un pattern che volete usare su un altro sito, sull'altro sito deve essere presente il medesimo plugin, altrimenti il pattern non funziona. L'ultima cosa è che potete, possiamo condividere i pattern con tutta la community. Ricordatevi solo questo, le repository è un posto di condivisione, non è la vostra libreria personale per salvarvi i vostri pattern. Quindi, prima di pubblicare dovete leggere le linee guida che riguardano cosa si può pubblicare e che cosa non si può pubblicare. Qui nelle slide ho fatto un riassunto poi le slide saranno disponibili perché se non mi sparano perché sono nata lunghissima. Molto brevemente esiste il link crea un nuovo pattern, si apre l'editor di Gutenberg quindi voi usate l'editor come usate normalmente. Se vi è più comodo usare l'editor della vostra installazione lo fate sulla vostra installazione poi lo andate a incollare nell'editor di WordPress. Seguendo le linee guida il titolo del pattern deve essere in inglese quando l'ho andata a pubblicare su repositori. I contenuti devono essere in inglese o in lore mipsum quindi non in italiano. Puoi utilizzare solamente le immagini della libreria di WordPress. Non tutti lo sanno ma da qualche tempo WordPress ha la sua libreria delle immagini. Poi magari ne parleremo in un meetup. Quindi quando si vanno a creare dei pattern si possono utilizzare solamente le immagini di quella libreria. Non potete caricare le vostre. Una volta inviato il pattern questo verrà controllato prima di essere pubblicato. Si paziente perché richiede qualche giorno. In conclusione i pattern fanno parte del progetto Gutenberg che comprende il full site editing per rendere WordPress un sistema completamente personalizzabile. Riducendo al minimo funzionalità aggiuntive tramite plugin for worka miseria. Experimentate. Divertitevi con WordPress. Io mi sono divertita a creare questo layout che utilizza il blocco query loop e ho personalizzato l'anteprima degli articoli. Riesce a capire come ho creato questo layout. Sono gloria. Faccio un sacco di cose nella community come potete vedere dai budget che mi sono conquistata con lacrim e sangue. Mi trovate su Slack e su quasi tutto il web come gloria alchemica e ho fatto i pattern. Quindi trovate anche i miei pattern sulla libreria. Finito. Domande. Certo. Se qualcuna ha una domanda, si possiamo farla. Scusa. I impostazioni che si vedono nella colonna di destra del pattern dipendono dai blocchi che hai utilizzato per creare il pattern. Sì. Devo ripetere le domande, non l'abbiamo detto prima per poterle registrare, altrimenti non si sentono il video. Sì, nel senso che qui sulla destra si apre blocco normale di qualunque blocco WordPress. Quindi se sono questo qui un blocco media e testo e quindi qua sulla destra avrò tutte le impostazioni che riguardano il blocco media e testo. Se utilizzate dei plugin che estendono le funzionalità di WordPress qua sulla destra avrete tutte quelle funzionalità aggiuntive. Prego. Sì, serve per forza un'estensione di Gutenberg. No, nel senso che qui abbiamo comunque sempre la possibilità di vedere come il nostro pattern risponde su i vari dispositivi. Dopodiché ci sono ancora delle limitazioni e a volte bisogna intervenire di CSS. Lì dipende poi dal progetto che stai sviluppando. In quello CSS, gli stili vengono messi in line oppure importati oppure vengono importati entrambi le cose. Nel senso che lui lavora dove caspita è aiuto modifica come HTML. Lui sta comportando come un normale blocco di Gutenberg. Quindi ci sono le cose. Sì, per esempio, il font size è messo in stile. Però altri valori vengono vengono comunque importati in modo generale, altrimenti non avremmo il cambio, per esempio, del font quando andiamo a cambiare tema. Quindi ci sono entrambe le cose. Ok, grazie a Gloria. Grazie a tutti.