 Non sapevo come presentare Maurizio perché lo conosco da più di dieci anni, quindi ormai siamo WordPress Badness, lui lavora con WordPress da tantissimi anni, da 2005, ha intratosato e ha organizzato Work on Bologna nel 2012, in cui credo sia lì che ci siamo conosciuti, e che dire, oggi ci parlerà di come costruire da zero un tema che usa il full set editing con Gutenberg quindi, e quindi facciamo un bel applauso a Maurizio. Allora, iniziamo, bella questa voce robotica eh, uo, uo, prova, prova, prova. Allora ragazzi, oggi io vindicherò la via, ok? Oggi io vindicherò la via. Che voi siate Jedi e usate PHP in purezza, o che siate Sit passati al lato oscuro di Elementor, oggi parleremo di quella che è la via. Va beh, la presentazione, me l'hanno già fatta, lavoro con WordPress, voglio, faccio finta di essere un maker, la domenica suona la chitarra, cagate. Allora è un tolco introduttivo, ok? Perché non si diventa mandalo piano in venti minuti, quindi arrivati a casa, iniziate a lavorare e studiare. Cos'è full set editing? Allora, la definizione così, capiamo un pochino, un insieme di funzionalità che potenzialmente, perché dipende dello sviluppatore che ha fatto il tema, permette la modifica di tutte le parti di un sito web e non solo dell'area attraverso l'uso dei blocchi Gutenberg. Quindi, con Gutenberg noi lavoriamo all'interno di un box, che è il nostro content, con full set editing portiamo Gutenberg nel leather, il footer, nella sidebar, un po' dove vogliamo. E non è che full set editing è uscito l'altro giorno, sono già tre anni che lo sviluppano dal 2021, ma diciamo solo adesso incomincia a diventare usabile. Dico incomincia perché qua spero che non ci sia nessuno di automatic e ancora un po' acerbo, ma dobbiamo incominciare a utilizzarlo, perché se vogliamo poi proporlo ai nostri clienti, se vogliamo conoscerlo a fondo, allora non aspettiamo che lo usino già tutti. Facciamo noi qualcosa di figo, innovativo, incominciamo a costruire dei temi che usano questa tecnologia e così saremo avanti ad altre persone. Ma quindi full set editing è un page builder, sì e no, nel senso che Gutenberg ha introdotto all'interno di WordPress un sistema basato sulla modifica dinamica del DOM, usando delle librerie che si chiamano React, lui semplicemente ha esteso questo approccio anche quello che è appunto l'area di contenuto. Ma mentre un page builder lavora all'interno della pagina, adesso poi qua lo vedremo, noi qua lavoriamo sempre con la struttura di WordPress, quindi header, footer, sistemi di template, ma lavoreremo con il sistema che Gutenberg ci ha insegnato a utilizzare. Quindi è un page builder no, prende alcuni dei dei page builder e secondo me potenzialmente le può migliorare. Da dove partiamo? Sì, il nuovo tema di WordPress 2023 in parte lo utilizza. Ci sono in realtà dei ragazzi che hanno già fatto delle cose abbastanza fighe con full set editing e qua io vi do tre template che possono darvi un'idea di quelle che sono le funzionalità. Con queste tre siti già qualcosina si può incominciare a fare e soprattutto stanno continuando a sviluppare. Quindi questa roba qua è ferma un mese fa, magari sono già migliorati rispetto a come gli ho visti io e soprattutto domani sicuramente c'è il quarto tema ancora più bello che io non conosco. Ma nella pratica che cosa succede no? Io adesso ho detto tante parole. Allora fondamentalmente quando noi abilitiamo un tema full set editing questo quello succede. C'è sotto aspetto ci sparice tutto ok? Abbiamo solo più temi ed editor. Temi per poterli cambiare. Editor se schiacciamo editor andiamo in questa seconda schermata che è la schermata appunto del designer dove funziona il site builder. Quindi ragazzi niente più personalizzatore, niente più widget, niente più menu classico, quasi niente più HP, quasi perché poi vedremo un po' come come metterci un po' le mani. Queste robe a me hanno spaventato tantissimo, bisogna prenderci la mano ma ripeto questa è la via. Quindi o noi cominciamo a entrare in quest'ottica oppure continuiamo a rimanere come quelli che usano il backery page builder ancorati a city di 5-10 anni fa. Come funziona? Allora si arriva in questa schermatina no? Con l'editor e vi dicevo rispetto ai page builder lui comunque ti propone la sua logica cioè quella dei template quindi quella dei template gerarchici e quella delle parti di template e quindi noi avremo la possibilità se il tema lo consente di modificare tutti i file di template quindi se voi siete degli sviluppatori di temi sapete che queste sono in realtà i nomi delle pagine che voi andate a creare all'interno del tema perché le cose funzionano in determinati modi no? Quindi abbiamo la 404 quando succede quando non troviamo la pagina abbiamo l'archivio per mostrare l'elenco dei posto delle tassonomie la pagina l'indice che cosa succede nella pagina? La pagina di ricerca, il singolo articolo, single product, se c'è v-commerce quindi noi qua abbiamo diciamo così tutte le pagine a disposizione quando partiamo da un tema da zero questo lo dobbiamo creare noi però questo è come questo è uno dei temi che vi ho fatto vedere prima che ha già predisposto una serie di layout mentre nelle parti di template che sono quindi quelle che si ripetono in ogni pagina abbiamo adesso qua due esempi footer header, header sticky perché hanno fatto due template diversi per far in modo che l'aspetto se rimane sticky fermo sia diverso da quello normale ma non la civietta poi di aggiungere o un template personalizzato e dopo lo vedremo o delle parti di template che andremo a riutilizzare in tutti i blocchi e in tutti i template cioè io mi posso fare una sidebar piuttosto che mi posso fare che ne so l'elenco degli ultimi articoli piuttosto che il box autore da mettere in fondo cioè posso devo cercare come ogni buon programmatore di evitare di ripetere 50 volte il codice tutto ciò che è ripetibile due o più volte tanto vale a fare un template parte così semplicemente lo includiamo e quando lo modifichiamo viene cambiato in tutte le parti facciamo un esempio ok io ho cricato su indice lui mi diceva beh questo è l'utilizzato come template alternativo per tutte le pagine quando non è definito un template più specifico quindi il tema minimale per vedere una index e che cosa succede che qua si attiva guttenberg quindi se noi siamo già abituati a utilizzare guttenberg in realtà siamo abbastanza a casa si possono modificare i template di pagina di default del tema che cosa vuol dire se il tema ha previsto una index io col full site editing la posso modificare lo vedremo si possono carare delle nuove parti di template vabbè qua io ho già fatto lo spoiler anche se non sono gestire al tema si possono usare dei blocchi extra o personalizzati allora sì un'altra cosa figa quindi del full site editing e questo suo approccio a overload cioè io ti propongo un default ma tu poi lo puoi personalizzare e cambiare ok quindi se il tema ha una pagina singola che mi piace abbastanza ma mi manca un blocco devo toglierne un pezzo allora io tramite direttamente l'interfaccia di guttenberg mi posso andare a modificare quel template me lo faccio come voglio e lui lo gestisce specio come overload quindi non devo più andare nel tema modificare la parte del codice di piac ap utilizzeri del lucro faccio direttamente da qua da dove partiamo allora adesso facciamo un esempio di un tema minimale ma questo è solo l'inizio ok questo non vuole essere un tema definitivo non è assolutamente a livello di quei tre che vi ho fatto vedere però adesso non passati dieci minuti praticamente io ancora cinque minuti poi abbiamo fare le domande quindi non è che allora questo è il mio tema minimale abbiamo il nostro function e il nostro style ho creato un index html sotto la cartella template importante la naming convention sotto template ci vanno i file del tema sotto parts ci vanno le parti che riutilizziamo function e un file standard nei temi di warpress style pure c'è un nuovo file teme.json che mi da tutta una serie di configurazioni sul tema mi dice che ne so la tipografia i set di colori posso configurare davvero un sacco di cose già solo parlare di questo di questo te ci potremmo stare qua due ore guardando la documentazione quindi ragazzi io questa roba la devo saltare ma andate a vederla la documentazione gestita probabilmente da quella ragazza di prima cioè hanno fatto veramente un lavoro grandioso c'è veramente tanto da leggere con tanti esempi io mi fermo sul teme punto gson giusto per farvi un esempio devo scrivere due cose quindi imposto un po il layout quindi dico che di base a 980 ma se con le opzioni che mi dà guttenberg lo voglio fare wide arrivo fino a 106 quindi la configurazione del teme punto gson è un file gson che oggi andiamo a editare almeno io sono andato a editare con un note pad ma non ne escludo che domani arriverà un plugin o un configuratore per cui mi dirà quali parametri vuoi che cosa vuoi che faccia pum sputato il file gson allora qua adesso ragazzi non vi sfaventate non la diché allora riga 1 uso il codice di guttenberg no dico senti riga 1 per favore mi può includere la parte che si chiama eder nella riga 2 aggiungimi per favore le categorie in cominci a creare il blocco faccio un blocco query dove giro tutti i post chiudo la mia query e aggiungo il footer questo è il nostro header inizio sezione fine sezione uso i paragrafi normali di guttenberg questi pezzi di codice se avete provato a giocare un po con guttenberg teoricamente li dovreste vedere mi sono andato nel del function ad aggiungere due cose importanti ok cioè quindi dobbiamo aggiungere il supporto per i blocchi ed è quella la magia che fa scattare il tema full site editing e poi mi sono andato ad aggiungere ovviamente il foglio di stile altrimenti andavo non andavo da quanti da da da da nessuna parte questo è il risultato quindi ho detto solo una stupidata prima scusate questo questo site title e la tagline e il titolo del blog ovviamente nel leader cosa che poi noi vediamo qua ok quindi questo è il mio esempio inizio sezione eder fine sezione eder con il con con il nome del blog e qua ho fatto un loop quindi quanto codice php utilizzato giusto due cose per dire a warpress guarda che questo tema supporta full site editing e guarda che mi debbi andare a prenderlo stile cosa che io non ho usato perché avete visto praticamente qua di stile non c'è non c'è niente che cosa succede quando noi ne vediamo solamente uno e questo è il risultato perché avendo usato il il loop standard di warpress lui sa che quando sono dentro la pagina singola me ne deve prendere solamente uno quindi io con l'index ho risolto sia sia la parte di listing che domani potrei chiamare archive e gestirmi un po meglio e fare due così un pochino più carine sia la parte del singolo articolo che potrei spostare in single e andarmi a gestire un po meglio allora ma io io che sono gedi e col php mi piace sporcarmi le mani dico no ma io non posso fare tutte queste cose solo così no allora come facciamo a creare dei template hybridi siete ancora in tempo uscire se volete allora mi sono creato un template mio ok template test dove renderizza un blocco e utilizzo che è del che futer standard di warpress questo che è del che futer vanno semplicemente a prendere effettivamente i template di full site editing che ho creato prima io sono proprio andato a fare un blocco ma qual era così importante e che io nella riga setto nella riga 15 posso aggiungere tutto il codice php che voglio e fare tutto ciò che voglio cioè io qua ho solo io solo fatto vedere si possono fare delle cose anche un po un po questo è ledder quindi che io ho creato quindi vedete block header area quindi lui va a prendere proprio la parte che ho creato col full site editing nel futer bloc futer area con il mio vp futer così sono diciamo più all'interno di una situazione standard ho creato anche la parte di content ok quindi che cosa si vede all'interno dell'articolo torno indietro vedete io ho creato vp post content dove ho creato come si deve vedere il contenuto e quindi io sono andato sotto parz a disegnare come è il mio contenuto quindi vedete ci deve essere l'immagine non ci deve essere il link sul titolo del post e ci deve essere il contenuto ho fatto poi leggendo un po di più ho detto aspetta un attimo facciamo una versione ancora più figa invece di quel invece di questo due bloc dove ho fatto il gruppo dove ho fatto tutto sto schifo possiamo migliorarlo sì possiamo migliorare dicendo proprio esegui un blocco che si chiama content che è quello che ho creato prima e quindi vado nel mio nel mio singolo seleziono il mio template perché io ho creato un template custom quindi andiamo a selezionare e questo è il risultato ma il mio customizer cioè voglio dire c'erano dei temi che avevano un customizer io ci ho perso davvero le giornate sul customizer gli temi grazie perché posso rinunciare i menu posso rinunciare i wicket ma diciamo per il momento ci sono davvero troppe cose nel customizer utili in tanti temi e quindi ho cercato un modo per riattivarlo siamo 17 minuti quindi siamo assolutamente in orario due reference allora due link ma in realtà se ci chiedete a google vi vomita decine decine di ragazzi che hanno incominciato a fare esperimenti c'è anche un bellissimo sito che proprio full site editing che addirittura ha proprio fatto pensato a una specie di corso che gli sviluppatori possono eseguire passo passo in cui vediamo pezzettino pezzettino le cose come come crearle e seguendo i suoi esempi io mi sono trovato bene e ho capito molte cose perché c'è proprio l'esempio pratico mentre la documentazione ti dà ti dice guarda c'è anche quell'opzione puoi fare anche questo su questo full site editing dot com c'è qualche esempio un pochino più pratico allora io avrei finito adesso passiamo alle domande ma prima vi dico questo allora chi di voi abbandonerà elementor per passare al full site editing avrà questo meraviglioso oggetto chi di voi si farà convincere a non utilizzare solo php e quindi sarà algeri della situazione avrà questo belissimo oggetto che cosa sono lo faccio vedere poi partiamo con le domande questo è il preventivatore perché voi adesso non sapete come vendere full site edit no ok allora attenzione questa è tecnologia mandala mandaloriana e questo è stampato in bar in bar berser barker come non mi ricordo il materiale allora vanno tirati allora due due dati se il tema non è particolarmente complicato tre dati se quello che vendete è complicato dopo di che decidete se moltiplicare per mille o per cento e poi questo è ragazzi allora fate le domande e chi di voi si convertirà avrà questo meraviglioso oggetto la mia stampante ne ha stampati quasi venti quindi forza vai allora tu sei gd o sit io per ora prova prova io per ora sono agnostico mi riservo di provare a fare le prove sull fse poi bene per ora rimango dell'elementor mentre rimane elementor allora non te lo posso dare questa ascolta no in realtà è già parzialmente risposto alla mia mordace curiosità perché la mia domanda è riguardare il costo miser non mi è chiaro però se con quella stringa di php riattiviamo il customizer dal menu tutte le sue funzioni ovviamente al netto che ritema le supporti cioè non è che il customizer si inventa delle cose però anche solo warpress nel customizer ci permette di inserire un pezzo di css custom modificare due o tre cose quindi quelle le troviamo però questo è un'elimitazione di warpress nel senso che io css posso inserirlo direttamente nel functions biazzi dovresti far dovresti farlo però il customizer diciamo ci dà anche solo la possibilità di selezionare qual è la pagina con cui parti cioè ci dà due o tre cose esattamente era la mia unica va bene vado ha detto che ci prova ha detto che ci pro è da sit quelli vai altra domanda ciao intanto grazie mille per il tolke io non uso elementore non lo voglio usare allora lui il primo g di signori bravo uso guttenberg con soddisfazione fino a quando do in mano il progetto al cliente e vede che può fare mille cose con guttenberg e se il sito è stato progettato con un layout con wireframe mock up è stato sviluppato un tema custom poi dice posso fare questo lo faccio e manda le out in vacca e sto quindi sono ancora legato ad a cf per questa cosa e ho valutato anche di bloccare tutti i blocchi guttenberg e lasciare disponibili solo alcuni ti chiedo se però non ho mai sviluppato un tema con il full site editing ti chiedo se hai esperienza diretta di come eventualmente limitare poi le aggiunte del cliente allora il mio approccio più che limitare è formarlo quindi fargli capire che cosa può fare che cosa sarebbe meglio non facesse quando però in una pagina ci sono diversi blocchi guttenberg che quindi basta che tocchi una cosa e si monta tutto io o due approcci che sono gli creo un insieme di blocchi un pattern in modo che se lo smonta se lo reinseriscełucia oppure gli creo un blocco custom dove gli do solo i due o tre parametri che mi serve e poi l'interno del mio blocco scrive del codice mio oppure riutilizzo i blocchi fatti tra l'altro acf ha un ottimo sistema di gestione dei blocchi quindi in una pagina complessa è ovvio che limitare il numero di blocchi e la possibilità di far casino e diciamo una cosa che può andare bene se chi hai davanti è una persona che smanetta e dice vediamo che cosa succede quindi teniamoci un backup nel senso creati dei template di pagina dei pattern per poter rimontare il tutto tra l'altro creare il pattern semplicissimo una volta che ti sei fatto tutti blocchi ti copi l'html insomma esattamente blocco riutilizzabile vai tu gedi o sit tu sei vicino al tuo amico sit sarai sit anche tu per forza hai vero è vero allora scegli cosa ma noi qua tentiamo comunque la mia domanda è molto più banale perché devo studiarla sta sta cosa non l'ho mai provata e ho visto che hai messo html però c'era della parte commentata il senso della parte commentata qua non ho qua questo allora questi in realtà non sono commenti cioè o meglio in html sono commenti ma per guttenberg in realtà sono dei tag che fanno delle cose quindi il parser di guttenberg va proprio analizzare questo tipo di tag e fa delle cose per esempio alla riga tre quel commento che non è un commento dice buttami la feature simmage stampami la feature simmage esattamente come in php sarebbe del feature simmage se allora guttenberg ti presenta un'interfaccia grafica ma in alto a destra c'è un pulsantino che ho scritto vista codice e questo è quello che lui scrive con e sì io praticamente sfrutto ciò che lui scrive sotto il cofano e lo devo utilizzare per creare le mie pagine o le mie cose tutto super documentato e cioè tutti questi blocchi cioè quindi riga 4 vp post title è esattamente il post title cioè esattamente quello il funzionamento quindi se mi creo un blocco custom io poi avrò un commento che posso inserire si devi utilizzare come ho fatto io il do block per andarlo a eseguire è un po come un do shortcode cioè devi dare a warpress il devi dire guarda che devi interpretare ciò che ti scrivo come se fosse un blocco vai un'altra domanda la giù due due allora ragazzi qua se lo lancio però li siano di formare a qualcuno quindi c'è la valletta che vi riporta grazie e la mia più che altra una richiesta su qual è il miglior approccio perché nell'ultimo progetto in azienda siamo passati appunto al full site editor con esiti attrati disastrosi perché fondamentalmente cioè sostanzialmente anche noi partivamo da wife frame mock up e dovevamo scrivere parti molto customizzate componenti con markup molto customizzate così via e quindi cosa abbiamo fatto considerando che le nostre competenze sono principalmente rientrata il php ci siamo messi per ogni componente per ogni elemento a sviluppare in php usando a cf come ponte sviluppare blocchi in php quindi senza andare nella parte react rimanendo su php aggiungendo tutta una serie di campi ai nostri blocchi e paravanti abbiamo fatto i template html ovviamente su codice perché ci dobbiamo passare all'interno del team da repo già lì è stato un delirio perché perché se incomincia di ci blocchi con data il file che ti passi si si incrociano gli occhi e invece mi sembra di capire dalla presentazione che hai fatto che l'approccio che suggerisci te non fare mille blocchi per tutti i componenti che poi piazzi tutti all'interno di template template html ma se vuoi utilizzare il php è meglio fare diciamo sviluppare le le le le le template in php richiamando ad esempio i parzi che invece noi effettivamente abbiamo usato abbiamo usato poco cioè siinä quindi quello che consigli tu è questo che poi poi allora parliamo di con usare la parola consiglio insomma faccio non sono di tutto sicuro che questo sia un buon consiglio perché, ripeto, io non ho anni di esperienza e un full site editing quindi questo è quello che nella mia fase di studio pre-talk e per preparare il talk ho pensato fosse la cosa più furba, cioè la mia prima esigenza è stata sì ma io non voglio fare solo blocco, voglio continuare a usare un po' di PHP. Come faccio? Allora ho risposto alla mia esigenza e mi sono trovato la mia via, ok? Non so se questa è la strada giusta che va bene per tutti. Siamo in una fase, in un momento in cui è pura sperimentazione e ancora acerbo come sistema. Io personalmente anche qua c'è qualcuno di automatic qua, ma puoi uscire un secondo? Allora per un sito di produzione grosso io ci penserei dieci volte, ok? Ma questo non vuol dire che non devo iniziare a usarlo, sperimentarlo, ok? Perché magari per il mio blog personale o per un progetto più semplice che una landing page, in cominciò a buttarlo oggi, faccio esperienza. Quindi il consiglio è iniziamo a capire come funziona, capiamo le logiche, cerchiamo di vedere come utilizzarlo per assurdo anche in maniera più ibrieda possibile rispetto al passato e poi le cose col tempo, insomma, diventeranno teoricamente sempre meglio. Ricordo la prima versione di Gutenberg che era da mettersi le mani i capelli. Adesso, boh, ci mi diceva, ma io con Elementor faccio delle robe che, no, no, le faccio anche io con Gutenberg. Va bene, comunque tu sei G di, no, hai detto PHP, eh? Valletta, dove è la Valletta? Valletta distratta? C'era un'altra domanda lì? Vieni, Valletta lì con un'altra. No, solo una precisazione. Qualcuno prima ha detto, nel customise ci manca CSS delle possibilità. Da WordPress X.2 ci sono queste opzioni nei global styles. Ok. For site editing global styles in altra destra. C'è un menu un po' nascosto ma si può aggiungere global CSS per il sito. Non lo sapevo. E l'ho appena scritto nello Slack italiano di WordPress sul canale FSI. Grazie. E poi cos'è anche, ah sì, per diciamo, come limito il cliente che fai danni c'è anche block locking, il template locking e quindi questa è un'altra cosa che ho messo nel canale, sempre è un successo il canale Slack. Potrebbe aiutare magari non limita tutti i danni però sicuramente permette per mettere per esempio di non fare certe modifiche a layout e solo cambiare il contenuto di un block. Tutto qui, solo una precisazione, nessuna domanda. Grazie. Ora devo riuscire a prendertene uno anche per te. Gli hanno dati tutti. Una finta domanda anche. Finta. Per avere il preventivatore mandaloriano. Sì, volevo chiedere se i preventivatori sono disponibili anche per chi traduce Sì, sì, sì, fino a che sono fino a che ce ne sono l'importante è passare al nuovo credo e questo è importante. Io volevo solo dire una cosa Maurizio, volevo solo dire una cosa facendo faccio parte della dell'organizzazione di WorldCamp Europe siccome è elemento uno sponsor importante e non ancora pagato se possiamo tagliare tutta la parte perché non hanno ancora pagato e se non il WorldCamp Europe quest'anno potrebbe saltare perché sono uno sponsor importante, quelli di elementi. Sì, io ragazzi ho preso un po' in giro alcune cose però ce voglio dire sono comunque ottimi progetti e in alcuni contesti sono assolutamente delle soluzioni funzionali, importanti ed essenziali poi è ovvio che si fa un po' di ironia però deve rimanere intesa come tale. Sì, fate una plaza Maurizio che è stato anche l'ensidio se stesso