 Apposto, buonasera, ok, vediamo, c'è tutto, perfetto, allora questo è lo stesso talk che ho presentato sabato scorso a Milano e i tempi a Milano erano abbastanza stretti quindi alla fine ho dovuto sintetizzare moltissimo, adesso ci possiamo prendere qualche minuto in più e diciamo così trattare un pochettino con più calma quello che è il tema dello sviluppo dei blocchi di Gutenberg. Allora questa prima pagina giusto per dire chi sono e cosa faccio e niente e quindi perché l'ho voluto dire soprattutto perché grazie poi a Kinsta che mi si è aperto questo mondo dei blocchi di Gutenberg perché mi ha dato la possibilità di analizzarli e poi pubblicare del materiale e quindi ho potuto diciamo studiare con una certa tranquillità il tema e adesso andiamo avanti ma non mi fanno andare avanti, come vado avanti? Ok, eccoci qua e quindi che cosa è Gutenberg, il nuovo editor abbiamo detto tante cose di Gutenberg, abbiamo detto che non piace a moltissimi, che moltissimi preferivano l'editor classico e perché ha una sua complessità sia nell'utilizzo sia soprattutto nello sviluppo perché diciamo che è sviluppato su una tecnologia non più nuova ma sicuramente una tecnologia che ha una complessità maggiore rispetto a quello che era diciamo la tecnologia che c'era in perché c'è comunque tuttora e questa tecnologia ovviamente se prima per sviluppare un qualcosa abbastava conoscere PHP e volendo anche JavaScript adesso e invece sono invece necessarie delle competenze abbastanza avanzate di sviluppo backend e queste competenze sicuramente possono essere un po' scoraggianti per chi vuole iniziare sviluppare blocchi perché come vedremo si tratta di conoscere tecnologie come Node.js React e non solo perché dietro lo sviluppo di questi componenti di cui andiamo a parlare ci sono tecnologie come Webpack, Babel e tutta una serie di Te, adesso non sto a fare l'elenco di tutti i termini collegati allo sviluppo di applicazioni React ma effettivamente ci sarebbe tantissimo da sapere. La questione però è che questo enorme, questa enorme quantità di conoscenze non è assolutamente necessaria per iniziare e ovvio che se ne vuoi fare un lavoro allora devi essere in grado di sviluppare prodotti di un certo livello e quindi avere delle conoscenze più avanzate diventa indispensabile ma per sviluppare i propri blocchi non è proprio i blocchi custom diciamo così non avanzatissimi non magari a un livello professionale non è necessario avere conoscenze approfondite di tutte queste tecnologie e quindi la logica di questa serie di interventi e poi delle pubblicazioni che ho fatto sul sito di Kinsta è proprio questo quello di mettere le persone in condizioni di iniziare poi a ognuno si viene lasciata poi diciamo così iniziativa di voler andare avanti oppure fermarsi a quello che questi contenuti offrono. Allora partiamo dall'inizio. Cosa è Gutenberg? Allora ovviamente Gutenberg è l'editor in cui si lavora per creare gli articoli dei pagini WordPress ma dal punto di vista dello sviluppatore possiamo dire che Gutenberg è l'editor punto e basta e come dire Microsoft Word è un programma ho capito alla fine non abbiamo detto granché ma da un punto di vista del sviluppatore Gutenberg è una single page application quindi un'applicazione di una sola pagina basata su React che permette aiutenti di WordPress di creare modificare e cancellare contenuti di WordPress quindi un'applicazione di una sola pagina basata su una tecnologia su una libreria JavaScript che si chiama React quindi non è un normale editor visuale ma è uno strumento che ridefini sce l'intera esperienza di editing di WordPress sapete bene infatti che non si creano soltanto i contenuti con Gutenberg perché la tecnologia che adesso è alla base dello sviluppo di Sidi dell'intero sito quindi Gutenberg ha fatto di WordPress un page build un site builder oltre che un page builder allora detto che cos'è Gutenberg e qual'è la tecnologia principale su cui si basa andiamo a vedere quali sono gli elementi che compongono Gutenberg i contenuti all'interno di Gutenberg vengono suddivisi in blocchi che sono come un po' i mattoncini lego con cui possiamo creare i nostri castelli e quindi quei gli utenti possono utilizzare questi blocchi per creare articoli, pagine e i interi siti web e quindi andiamo sempre a porci di nuovo nell'ottica dello sviluppatore per uno sviluppatore che cos'è un blocco noi vediamo un quadratino pieno di bel contenuti ma da un punto di vista diciamo così più professionale blocco e termine a strato utilizzato per descrivere unità di markup quindi blocchi di codice che composte insieme formano il contenuto o il layout di una pagina perché la differenza tra page builder e site builder è proprio qui quindi con Gutenberg si crea anche il layout della pagina e non solo il contenuto cosa sono questi blocchi a questo punto dal punto di vista dello sviluppatore e andando a considerare la tecnologia react sono titoli paragraficolone immagine eccetera eccetera i controlli della barra degli strumenti tutto quello tutti gli elementi grafici e funzionali che fanno parte dell'interfaccia sono componenti react e quindi a questo punto cos'è un componente react blocchi di codice indipendenti e riutilizzabili blocchi di codice particolare che vi ho scritto hanno lo stesso scopo delle funzioni JavaScript ma lavorano in modo isolato quindi sono indipendenti e restituiscono codici html ora se guardate bene quella quella blocco di codice lì dove si dice export the full function edit sempre austrogoto per il momento però non ve ne dovete preoccupare più di tanto in questo momento andate a guardare invece cosa c'è scritto nel blocco return e blocco return noi siamo andati a inserire un codice particolare che viene definito jsx cioè l'acronimo e jsx extended javascript è un markup un po particolare composto da una specie di html una via di mezzo tra javascript e html ma ha dalla sua un vantaggio enorme la semplicità la chiarezza immediatamente si capisce doğru da quel blocco di codice che cosa succede beh se avete un po di conoscenze di html p è un paragrafo è chiaro evidente no però c'è anche qualcosa di javascript in questo caso i tre puntini con use block props no e c'è ancora codice javascript all'interno, ossia una stringa di testo. Quindi questo che cosa ci fa a capire? Che questo blocco, così piccolo blocco, chiamiamolo blocco, questo blocco di codice, cosa ci restituisce? Un semplice paragrafo con un testo all'interno e quindi questo già vi dice qual è la logica che c'è dietro. Quindi la creazione di un qualcosa attraverso questo codice javascript. Ora è ovvio che andremo a vedere come è in modo un po' più avanzato quello che succede, però già questo ci dà l'idea di che cosa sia un componente, ok? Allora, quindi che cosa, che cosa dire? Adesso torniamo, lasciamo perdere per un momento il codice, il codice del blocco. Torniamo un attimino a quello che è l'editor e passiamo alla modalità al cod editor. Quindi lasciamo l'editor visuale e passiamo all'editor di codice. La prima cosa che ci viene subito ai occhi, ci balza i occhi, sono quei commenti. Quei commenti hanno un significato, un ruolo, un compito, una funzione, ecco trovato la parola giusta. E' fondamentale perché digono a WordPress che cos'è quella roba che è compresa tra il tag di apertura e il tag di chiusura. Si chiamano dei limitatori di blocco. All'interno di questi del limitatori voi vedete delle informazioni che racchiuse tra parentesi graffe che passano a WordPress una serie di dati e di informazioni. In questo caso sono l'edit, site slug, l'edit dell'immagine e le dimensioni dell'immagine, la distringazione del link contenuto. Ora in base a queste informazioni che possiamo già definire attributi, WordPress sa come deve gestire quel blocco e in base a queste informazioni genera il codice html corrispondente. Quindi quello che noi andremo a produrre quando andiamo a creare un blocco è sicuramente codice che è all'interno ma anche e soprattutto i delimitatori di blocco. Ora questo per fare un po' il quadro di quello che stiamo descrivendo. L'editor che è una single page application, i blocchi che lo costituiscono, i componenti che sono quegli elementi React che noi utilizziamo per creare i blocchi. Partiamo sempre così dall'ottica dello sviluppatore. Ora se aveste tutti un computer potremmo già partire ma si vorrebbe un po' di tempo e quindi che cos'è che ci serve adesso per sviluppare il nostro primo blocco? Prima di tutto Node.js. Poi ci serve un ambiente di sviluppo cioè un server installato in locale. È un plugin su cui costruire il blocco. Quindi questi sono gli strumenti essenziali. Quindi per quello che riguarda Node.js c'è poco da dire, non ci sono alternative Node.js. Quindi andate nel sito officiale di Node.js, scaricate il pacchetto che corrisponde al vostro sistema operativo, lanciate il weaver che tra l'altro è semplicissimo da installare e avete Node.js. Node.js vi dà questo ambiente di sviluppo JavaScript server-side. Quindi praticamente vi dà la runtime all'interno della quale poi girerà il vostro codice JavaScript. Quindi non gira nel browser direttamente ma voi potrete fare i vostri test in attraverso Node.js. Questo per quello che riguarda Node.js ed NPM. Adesso le diamo meglio che cosa sono. Subito dopo dobbiamo andare a installare però un server locale. Su cui deve girare poi l'applicazione. Io personalmente li ho provati praticamente tutti e quale più quale meno alla fine io sempre lavorato con MAMP fino a quando però poi non ho cominciato a lavorare con le ultime versioni di DevKinsta perché ha raggiunto un livello di stabilità notevole ed è di una semplicità assoluta. Basta un clic per creare un sito WordPress funzionante e quindi da la possibilità di lavorare con estrema semplicità. E poi l'installazione del plugin del blocco e dopo vediamo anche questo discorso come fare. Quindi Node.js prima di tutto è un runtime JavaScript costruito sul motore JavaScript V8 di Chrome e questo è quello che vi serve sapere niente di più. Insieme a Node.js avete anche NPM che è il gestore dei pacchetti di Node, Node Package Manager ed è considerato il più grande registri di software al mondo. Praticamente serve a installare componenti di Node.js che ci possono servire nello sviluppo dei blocchi. Per i ambienti di sviluppo questi sono solo alcuni ma sapete che ce ne sono anche altri e qui potete comunque liberamente scegliere quello che vi sta più comodo l'importante è che ci giri su WordPress. Quindi fondamentalmente avete bisogno di PHP MySQL. Con DevKinsta basta cliccare su un pulsante e il sito è installato quindi nel caso in cui si si si funziona su Linux, su Windows e su Mac. Allora questo invece non abbiamo ancora finito, abbiamo detto Node.js, abbiamo detto server in locale e il terzo strumento che ci serve è WordPress CreateBlock. Allora è uno strumento che viene installato da linea di comando. Una volta che avete a disposizione Node.js e per installarlo basta eseguire il comando che vedete lì sullo schermo quindi Npx WordPress.createBlock e quel MyFirstBlock è soltanto eventuale perché è il nome e lo slug del vostro blocco. Ora se volete specificarlo lo specificate altrimenti passate alla configurazione manuale. Se specificate lo slug del blocco lui parte e fa tutto in automatico altrimenti vi chiederà una serie di informazioni attraverso la poi una procedura guidata. Questo comando vai seguito all'interno della directory plugins di WordPress che altrimenti lo installate nel posto sbagliato. Alla fine quando ha girato tutto si troverete con una schermata del genere dove avete l'elenco dei comandi più utilizzati quando andate a utilizzare questa applicazione e quindi npm run format lint css lint js eccetera eccetera quindi per utilizzare quei comandi però dovete avere un livello di conoscenza un attimino superiore rispetto a quello che presupponiamo questa sera. Qui ci interessano due comandi fondamentalmente che sono npm start npm run build che qui non vedete perché era sopra builds the code for production sopra cera npm run build e quindi questo è il risultato dell'esecuzione di quel comando che abbiamo visto eccolo qua la stessa cosa può essere fatta in modalità interattiva quindi lì installazione tutta automatica qui invece l'installazione è un pezzettino alla volta quindi voi eseguite solo npx WordPress create block e poi che cosa succede avete tutta una serie di domande a cui rispondere quindi la variante del template cos'è la variante del template non vi ho detto una cosa non vedo detti tantissime ma ci vorrebbe ci vorrebbe davvero una settimana a dire tutto noi stiamo parlando adesso vediamo come installare un blocco statico i blocchi sono fondamentalmente di due tipi statici e dinamici i blocchi statici sono quelli come il blocco paragrafo inserite del testo dentro e alla fine quello rimane i blocchi dinamici invece sono dei blocchi che vengono generati al volo e in base a quelle che sono le varie interrogazioni al database nel senso che il blocco non ti contiene un contenuto digitato una volta che rimane lì ma ogni volta cosa fa viene interrogato il database riportati dati all'interno del blocco e visualizzati nel front end quindi questa è la differenza fondamentale tra blocchi statici e blocchi dinamici in questo caso stiamo partendo dalle basi e quindi parchiamo per forza con i blocchi statici il blocco slug in questo caso cambiato nome example bloc il nome in internal name space for the block qualcosa di unico per i tuoi prodotti il titolo da visualizzare ecco già passiamo alle informazioni ai dati che vengono utilizzati per visualizzare il blocco in questo caso è il titolo del blocco come lo vedete nell'editor una descrizione del blocco anche questa si vede nell'editor la desciicon cioè l'icona che rappresente il vostro blocco all'interno del pannello di inserimento nome della categoria poi altra domanda vuoi personalizzare il plugin di wordpress e tutte le informazioni che andate a inserire qui vengono poi utilizzate per creare l'intestazione del plugin non so se avete mai sviluppato plugin però se avete sviluppato un plugin sapete che la parte superiore della file php principale del plugin è racchiusa all'interno di commenti e contiene tutta una serie di informazioni che dicono a wordpress come deve funzionare quel plugin quindi plugin viene riconosciuto come tale e viene utilizzato in un determinato modo con delle informazioni che vengono di suo tipo l'autore la vicenza e la descrizione eccetera cioè il nome della versione eccetera tutte queste informazioni che vengono poi rese all'interno del backend di wordpress e alla fine la schermata che viene fuori conclusiva dopo che avete inserito tutte queste informazioni è la stessa di prima avete già fatto o meglio avete installato il blocco di partenza my first block allora quella è la descrizione mi sembra che questa quella predefinita quindi stiamo guardando il plugin creato automaticamente la versione è by the wordpress contributors a questo punto lo attivate e siete quasi pronti a partire una volta attivato lo vedete qui my first block vedete la faccina è già lì quindi è già lì è quello che vedete nell'editor my first block e lo from the editor è quello che è quel paragrafo che avete visto prima nel primo nella prima immagine che vi ho fatto vedere è un paragrafo statico non potete modificarlo perché è un tag p ok però già avete visto che è già disponibile quindi non dovete fare niente di complicato per mettere un blocco di avvio all'interno del editor fermiamoci un attimo allora adesso non abbiamo non in cominciamo ancora a programmare ma guardiamo un attemino che cosa ci è stato messo a disposizione dalla community di wordpress il block scaffolding ossia il plugin su cui voi state lavorando è una piattaforma di sviluppo se lo vogliamo definire così dove voi avete una serie di cartelle con migliaia di file adesso io ovviamente la cartella nod modules non l'ho aperta perché altrimenti c'è andavamo giù di diversi piani perché sono centinaia e centinaia di componenti di moduli che sono vivendo e noi quelle che ho aperto sono la cartella source e la cartella build che sono le cartelle forse le cartelle su cui passerete la maggior parte del vostro tempo in particolare non tanto la cartella build ma la cartella source che dove trovate i file che voi andate a modificare per creare il vostro blocco e guardate di bene quali sono bloc jason container js edit js editor sss index js save js e infine un foio di stile dopo vi dirò anche nello specifico cosa servono questi file gli sessi file li trovate in forma compressa nella cartella build che viene fuori quando voi andate a seguire il comando di build altri file importanti sono il example block php che vedete nella root folder del plugin dove c'è dentro il codice php che permette che consente a warpress di riconoscere il vostro codice come un plugin perché fondamentalmente è quello lì e poi ci sono package jason che vale la pena citare di cui però non vi dovete preoccupare all'inizio perché è un file di configurazione solo quando passate a livello successivo come sviluppatori andrete poi a modificare manualmente quello su cui ci concentriamo stasera è il contenuto della cartella sss più il file iniziale example block php mai first block php iniziamo proprio da questo allora lì nei commenti in alto trovate le informazioni di cui vi parlavo prima e quindi il nome del plugin descrizione la versione di warpress minima e la versione di php minima la versione del plugin l'autore la licenza e il text domain per la localizzazione del plugin il pacchetto si chiama mai first block allora questo è quello che serve a warpress per riconoscere il plugin ma adesso lasciando perdere quello concentriamoci invece su questa funzione noi non abbiamo scritto una riga di codice stiamo guardando il codice che ha creato warpress per noi o meglio che ha creato il tool create block allora quello che cosa fa si aggancia alla funzione che vedete mai first block mai first block perché due volte uno il nome del namespace un altro il nome del blocco che anche quello generato automaticamente è quella la funzione che fa questa funzione register block type registra il blocco e un file php e codice php quindi dove lo registra il server perché il blocco va registrato sia sul server che sul client con il file php noi lo registriamo sul server e per il momento basta non sto a dirvi dei argomenti dir e build però dovrebbe essere abbastanza chiaro cioè alla fine noi gli diamo come argomento il percorso del file di file dove si trova questo blocco che ovviamente nella cartella build che abbiamo visto prima il package jason è quello che vi ho detto prima il file di configurazione generale noi per il momento lo guardiamo soltanto non dobbiamo aggiungere niente però se vedete la proprietà script vedete che contiene tutta una serie di altre proprietà che ci dicono quali sono fondamentalmente gli script che noi utilizziamo per far funzionare il nostro software quelli che vedete per esempio sono start e build il primo e l'ultimo notate soltanto quelli ma questo è giusto per prenderne visione il block jason e questo è uno dei file più importanti di un blocco perché è il file dei metadati cioè dice a warpress tutto quello che deve sapere per far funzionare questo blocco schema happy version nome del blocco vedete con name space versione titolo categoria icone tutte le informazioni che abbiamo inserito quando abbiamo lanciato quel comando le keywords sono sono le parole chiave che vengono utilizzate quando noi andiamo a fare la ricerca del blocco all'interno del editor quindi i termini che vengono utilizzati qui dentro vi consentono di trovare il blocco quando utilizzate per esempio il quick insert quindi fate inserire il simbolo di slash in corrispondenza del blocco cominciate a digitare per esempio affidie money allora il blocco viene tirato fuori in base alla parola chiave che è stato digitando gli attributi sono invece i dati che servono a warpress per far funzionare questo blocco e in questo caso c'è abbiamo messo un solo attributo che è quello che individua il contenuto del vostro blocco in questo caso pre che vorpresse andrà a prelevarlo dove da un tag p quindi il contenuto di questo blocco si troverà all'interno di un tag p nel codice html e poi ci sono gli altri che poi diciamo così si sono auto esplicativi le altre proprietà allora e quindi qui due parole sugli attributi io ho fatto l'esempio del contenuto ma non c'è solo il contenuto perché tra gli attributi voi ci potete mettere qualsiasi tipo di dato che può servire per far funzionare questo blocco in questo caso abbiamo un attributo e line che noi utilizzeremo per alineare il testo del blocco a destra sinistro al centro e link perché nell'esempio che proporro quel blocco rinvia ad un collegamento ipertestuale e quindi sarà una stringa e il valore predefinito è questo quindi anche in questo caso le proprietà sono abbastanza auto esplicative possono venir fuori nella barra ma non necessariamente perché tu lo devi specificare qui dove vanno quei quei attributi allora nella dove vedi la proprietà content c'hai un selettore quindi non va nella nella nella nella block del limiter ma se lo devi andare a cercare all'interno di un tag in questo caso altrimenti se non è diversamente specificato vengono infilati nel delimitatore del blocco allora prima abbiamo visto il file php del plugin che serve a registrare il blocco su server il file index js quindi non è più un php ma è un javascript e invece che cosa fa registra il blocco sul client ok quindi il file da cui vengono importate le dipendenze ed è responsabile della registrazione del blocco sul client qui vedete la funzione che ha quasi lo stesso nome register block type questa è cambiata di recente questa funzione perché l'api è in continua evoluzione però più o meno il funzionamento è sempre lo stesso allora voi vedete metadata name metadata name andate a vedere un attimino le clausole import all'inizio vedete import edit from import save from import metadata from ecco noi stiamo in portanto degli script e gli stiamo dando corrispondentemente un nome ok quindi ogni volta che ci riferiamo a quegli script noi ovviamente li richiamiamo attraverso il nome in questo caso metadata punto name che cosa ci dice allora import metadata from block json allora noi abbiamo il block json e mi aspetterei una proprietà name all'interno del block json che è quindi register block time quello il primo argomento che gli passiamo come secondo argomento gli passiamo un oggetto che è composto in questo caso da due proprietà che sono edit e save e adesso vedremo che cosa fanno edit js edit js è il file che genera l'interfaccia di editing del blocco praticamente quello che noi vediamo nell'editor ok cosa vediamo nell'editor prima di tutto import use block props allora questo è fondamentale perché questa funzione genera praticamente le proprietà del blocco se noi non utilizzassimo questa funzione che vedete lì all'interno del tag di apertura p non avremmo tutte le classi e i dati che ci serve che serve una warpress per dare anche uno stile non soltanto lo stile ma anche il funzionamento di quello di quel blocco e quindi è assolutamente indispensabile utilizzare il use block props e quindi andiamo a importarlo prima di tutto come andiamo a importare poi quel file sas che ci consente di assegnare di personalizzare gli stili del blocco e poi il codice sotto invece export default function è lì che noi andiamo a generare a creare il contenuto che poi viene riso a video e quindi attraverso quello che è cosiddetto codice js extend javascript allora oltre file edit js è il file che genera il codice che si vede nell'editor non è quel codice lì che viene salvato ma quello che viene salvato nel database è il codice che viene generato dal file sage js quindi all'inizio visto che questi due file hanno un contenuto diverso allora non torna indietro si index js edit js leggete il contenuto del tag p hello from the editor nel file js hello from the saved content quindi voi nel front end vedrete questo tag p mentre nell'editor vedrete quest'altro ok quindi avevamo visto in una slide precedente questo è quello che voi vedete nell'editor ed è quello che è generato dal file eddif js ok siamo arrivati a ok abbiamo dato un'occhiata generale al tutto questo è quello che abbiamo ottenuto nella fase di installazione cominciamo a programmare allora tornate al terminale e spostatevi nella directory my first block eravamo nella directory plugins ricordate quando abbiamo lanciato create block adesso che abbiamo il nostro plugin ci dobbiamo spostare cd my first block ok entriamo nella directory del plugin in questo caso io consiglio di utilizzare il studio code perché perché voi avete il terminale qui e avete anche i vostri file quindi avete tutto nella stessa schermata e qui io credo che sia molto molto più comodo piuttosto che passare da un programma all'altro quindi avviate il terminale dal menu che qui non si vede e poi vi viene visualizzata qui da finestra di giù e quello che bisogna fare a questo punto avviate e digitate npm start che succede npm start avvia quello che si definisce spe un whatsapp c'è qualcuno in qualcosa che è lì e aspetta che voi scrivete il vostro codice salvate contro l's e automaticamente ce l'avete subito all'interno del sito viene aggiornato immediatamente quindi non dovete stare a riavviare niente avete già tutto pronto quando avete finito tutto il lavoro di sviluppo allora cosa fa npm start npm start e il watcher e guarda tutte le modifiche che vengono fatte ai file contenuti nella cartella source quando invece avete finito con npm run build tutto il contenuto della cartella source viene compresso vengono generati file corrispondenti però minimizzati all'interno della cartella build e quella sarà la vostra cartella di produzione mentre la cartella source sarà la cartella di sviluppo adesso sapete tutto sapete tutto quello che vi serve allora queste sono le conoscenze di noj s che dovete avere per partire è ovvio e queste sono le conoscenze di carattere generale che vi servono per mettere in piedi un plugin per un blocco poi è ovvio da questo poi incomincio lo studio ma parliamo già del codice quindi l'infrastruttura l'impalcatura noi l'abbiamo già tutta e quindi come si aggiunge un componente a un blocco è qui inizia inizia la nostra avventura cinque passaggi allora io tutto il mio investimento di tempo è stato praticamente infiegato per recludere in pochi passaggi tutta l'attività di sviluppo e io ho individuato questi cinque passaggi che sono praticamente quasi sempre gli stessi qualunque cosa voi vogliate creare con i vostri blocchi uno importare i componenti da un pacchetto wordpress le clausole import che avevamo visto prima due includere gli elementi corrispondenti nel codice jsx che abbiamo visto nelle funzioni edit e save 3 definire gli attributi necessari nel file block jason perché dicono a wordpress come funziona quel blocco definire gli event tanglers quindi qui entriamo un po più dentro nel javascript e infine salvare i dati nel file allora il mio esempio era semplicissimo ed è semplicissimo quella tag p che avete visto è un elemento statico della pagina cioè tag p non si muove vi fa vedere sempre la stessa stringa di testo ma l'editor ha più bello questo no che quello che inserite nei blocchi ci potete scrivere dentro potete aggiungere contenuti allora come si fa con un componente che fa questo componente trasforma un qualsiasi elemento di testo statico in un testo editabile ok per fa per utilizzare questo componente noi lo dobbiamo andare a prelevare da un pacchetto perché non ce l'abbiamo lì disponibile ok dobbiamo andarlo a prendere da un pacchetto o modulo che si trova all'interno di bloc editor quindi importiamo rich text dallo stesso pacchetto che contiene il bloc props lo tiriamo dentro e andiamo a sostituire il tag p come lo sostituiamo utilizzando l'elemento rich text ora tutti questi elementi che come vedete una volta capiti quali sono come funzionano sono molto semplici da utilizzare perché il funzionamento è standard per tutti bisogna andarsi a cercare un attimino nella documentazione di gutemberg del plugin gutemberg quindi se voi andate su github progetto gutemberg all'interno del progetto gutemberg troverete documentati non tutti ma la maggior parte dei componenti che sono disponibili all'interno dell'editor quindi per utilizzare rich text potete andare all'interno e nell'articolo che ho scritto per chi sta ho messo dentro i riferimenti quindi di dentro trovate tutti i link su dove andare a trovare la documentazione che riserde ogni elemento contiene una serie di dotato dispone di una serie di attributi a parte bloc props voi avete un tag name quindi con il tag name adesso ditemi voi cosa facciamo col tag name chiaro il tag che viene generato dall'elemento rich text tu potrei vi mettere tranquillamente un h2 un h3 che sì sì sì sì sì sì on change a questo punto on change se masticate un po di javascript dovrebbe ricordarvi qualcosa è un event handler cioè gestisce Ça è un gestore dei venti nel momento in cui si verifica un evento allora cosa fa esegue una funzione di colbettista allora e lì dobbiamo andare a mettere tra parentesi graffe perché stiamo passando il nome di una funzione javascript on change content che poi andremo a definire dopo e la format allora questo invece per andare a inserire i formati di questo elemento pi dovete far riferimento alla documentazione in questo caso core bald e core italic è chiaro vi dice però per i valori avere tutti i valori disponibili dovete far riferimento in questo caso alla documentazione il valore il valore che cos'è il contenuto il testo contenuto da quell'elemento e guardate un po dove andiamo a prendere il content che noi abbiamo definito tra gli attributi del block jason ok playsolder è un testo temporaneo che magari può servire da guida eccetera eccetera l'intero elenco dei degli attributi di questo elemento lo trovate lo trovate ovviamente all'interno della documentazione è questo per ricordarci dove abbiamo messo quel content ok scusate questo era il terzo passaggio definire gli attributi ok adesso uno importare il componente due include degli elementi corrispondenti tre definire gli attributi quattro definire gli event endless abbiamo quasi finito allora anche qui c'è un modo standard di scrivere queste funzioni questo è il modo js next quindi sono le versioni più recenti di javascript e questa è una row function e quindi una struttura javascript molto utilizzata in react è praticamente è una convenzione utilizzare le funzioni scritte in questo modo c'è poco da sapere di javascript sono pochi concetti fondamentali quindi non deve essere un mostro di javascript risolvere gli algorithmi più assurdi importante e conoscere i costruttivi di base e questo cosa ci dice allora noi stiamo passando come parametro new content a questa funzione e poi utilizziamo la funzione set attributes vedete bene che la nostra funzione edit prima qua prima che iniziassemo a scrivere il nostro codice non gli veniva passato nessun attributo nessuna nessun parametro ok adesso gli abbiamo passato un parametro contenente due elementi attributes e set attributes perché altrimenti non potrebbe gestire quello che gli facciamo fare quindi noi che cosa gli stiamo dicendo in questo momento in post set attributes questa funzione imposta il nuovo valore dell'attributo content ok e lo vedete lì content due punti new content ultimo salviamo i dati allora siamo andati nel file state js nel file state js facciamo più o meno le stesse cose andiamo a importare le each text come abbiamo fatto nel file edit js e in più export default function save prima era la funzione era edit adesso è save non passiamo set attributes perché non dobbiamo cambiare il valore dell'attributo perché questa funzione serve soltanto a salvare i dati non a malevolarli mentre siamo in editing ok quindi noi dobbiamo soltanto passare il valore dell'attributo che in questo caso è attributes content ok qui mi sa che ho sbagliato qualcosa no ok il valore attributes content e basta in base a questo WordPress se realizza queste informazioni e genera poi il contenuto che viene salvato nel database ed eccola qua allora mi alzo perché altrimenti faccio fatica a indicare guardate un po che cosa viene generato la use block props tutta questa roba qui allora tutto questo ovviamente viene generato in automatico questo è il contenuto content e adesso come vedete qui è venuto anche il cursore vi fa capire che il blocco adesso è il contenuto del blocco è evitabile mentre tutta questa roba qui viene generata automaticamente da WordPress in base a quelli che erano poi anche gli attributi che noi in questo momento abbiamo messo soltanto dentro il content ma poi ci possono essere le classi altre classi css ci può essere l'alignamento ci possono essere un tutta una serie di dati e questo se non avessimo un serito quello us block props non avremmo tutti questi attributi del tag di e qui ci fermiamo perché questo ora comincia a venire un po di sonno c'era gente vuol vedere la televisione chi vuol mangiare la pizza però la questione è che volevo darvi delle risorse perché parlare di questa roba non basterebbe una settimana per di tutto e poi sarebbe bello comunque farlo con un computer davanti di modo che uno mentre sviluppa il suo progetto poi lo si può guardare insieme però per il tempo a nostra disposizione allora io dico che conviene dare un'occhiata a queste due risorse nella prima è un articolo vi ho dato il link in italiano quindi è stato tradotto e dove praticamente trovate tutto quello che vi ho detto ma molto di più perché ci sono gli esempi pratici c'è un piccolo progettino sviluppato mi sono dovuto soffermare molto sulla fase di installazione configurazione ovviamente per spiegare tutte le varie cose ma nella seconda parte dell'articolo c'è un intero progetto dove faccio vedere come si non soltanto il tag p ma come si utilizzano tutta una serie di altri di altri componenti in particolare anche un componente molto avanzato che si chiama inner blocks che permette di creare un blocco e inserirci dentro tutti i componenti che uno vuole quindi se puoi inserirci dentro tutti i componenti del già del core di warpress ma anche altri e quindi quello serve per creare che può servire per creare blocchi molto molto avanzati per esempio se tu nel tuo blocco fai utilizzo di immagini devi star lì a ricreare tutto da zero perché se vai a vedere il componente che gestisce prende immagine qualcosa di mostruoso invece tu puoi semplicemente utilizzare il blocco core e lo inserisci lì dentro e poi se invece preferite il video lo stesso identico progetto lo spiego a video purtroppo in inglese però il codice è esattamente lo stesso nell'articolo trovate anche tutti i link alle risorse che secondo me sono molto importanti perché in un solo articolo non puoi mai essere soustivo perché è un mondo e praticamente infinito ma il mio consiglio è quello di andarsi a cercare il progetto Gutenberg subito e lì all'interno della cartella dei componenti praticamente c'è l'elenco di tutti i componenti core e all'interno di ogni componente core c'è il ritmi con tutte le specifiche tecniche quindi il componente rich text che abbiamo utilizzato ha molti più attributi quindi uno man mano che fa le cose più avanzate ovviamente può utilizzarli in modo diverso e direi che basta così perché altrimenti bisogna bisogna farlo col computer da per come infarinatura iniziale direi che bandà