DE{CODE}: Temi moderni e futuro di WordPress: lavorare con l'editing completo del sito e oltre

WordPress 5.9 ha introdotto il Full Site Editing nel core, indicando un importante cambiamento nel modo in cui costruiamo siti web con WordPress. In questa sessione DE{CODE}, unisciti a Nick Diego, sostenitore dello sviluppatore di WP Engine, mentre decomprime questi cambiamenti, nonché alcuni modi in cui puoi sfruttarli per creare siti Web migliori, il moderno modo WordPress.

Slide della sessione

Trascrizione del testo completo

NICK DIEGO : Ciao e benvenuto a "Lavorare con l'editing completo del sito e il futuro del tema moderno in WordPress". Mi chiamo Nick Diego e sono un sostenitore degli sviluppatori qui a WP Engine. Quindi un po' su di me, quindi ho iniziato a lavorare con WordPress nel 2012. Principalmente ero uno sviluppatore di plug-in e da allora sono passato a fare molto con i temi a blocchi. In realtà sono entrato a far parte di WP Engine nel novembre del 2021, quindi questo è una specie di nuovo concerto per me. Sono appassionato di blocchi e modelli e di tutto l'editing completo del sito, motivo per cui non potrei essere più entusiasta di fare questa presentazione oggi.

Quindi cos'è l'editing completo del sito? Ne abbiamo sentito parlare molto negli ultimi anni. Quindi in realtà è "una raccolta di funzionalità che porta l'esperienza familiare e l'estensibilità dei blocchi a tutte le parti del tuo sito piuttosto che solo a post e pagine". Quindi in realtà è un ombrello di funzionalità, che include elementi come l'editor del sito, gli stili globali, i blocchi tematici, i modelli e, naturalmente, i temi dei blocchi.

Quindi nella nostra conversazione di oggi, tratteremo alcune cose diverse. Inizieremo con le basi. Voglio assicurarmi che siamo tutti sulla stessa pagina, soprattutto dal punto di vista terminologico. Quindi parleremo dell'anatomia di un tema a blocchi, quindi degli stili globali, delle impostazioni interne che includono il file theme.json. E infine, condividerò i miei pensieri sui temi moderni e su come saranno.

Quindi, nella presentazione di oggi, useremo una serie di esempi diversi, e quelli saranno dal tema 2022, che è stato incluso in WordPress 5.9 nel gennaio del 2022. Questo è un tema a blocchi che è stato sviluppato dal Core WordPress team, ed è un ottimo punto di partenza, ed è disponibile nel repository dei plugin, quindi non c'è tema migliore da utilizzare per gli esempi.

Quindi, mentre iniziamo oggi, di nuovo, inizieremo con le basi. E non c'è niente di più semplice di un blocco. Quindi, se hai utilizzato WordPress negli ultimi anni, probabilmente conosci molto bene i blocchi. Sono l'unità fondamentale del contenuto in WordPress. Può essere un paragrafo di testo in una galleria di immagini. Può assumere quasi qualsiasi forma. E l'idea alla base dell'editing completo del sito è che, presto o subito, tutto sul tuo sito web sarà un blocco. Discuteremo di più su come funziona.

Ora qui abbiamo un esempio di un gruppo di blocchi diversi che sono attualmente in WordPress. Le due colonne di sinistra che dovresti conoscere. Abbiamo paragrafi, intestazioni e blocchi di copertina, e così via. Nella 5.9, di nuovo rilasciata quest'anno, ora abbiamo i cosiddetti blocchi tematici. Questi sono blocchi che sono contenuti che, tradizionalmente, non saresti in grado di modificare direttamente da WordPress.

Questi includono cose come il logo del tuo sito, il ciclo di query, l'estratto del post, l'autore del post. Questi sono tutti i tipi di contenuto di cui avresti bisogno per immergerti direttamente nei tuoi file modello basati su PHP e codificare direttamente o utilizzare un plug-in di terze parti che ti ha aiutato a modificare queste aree. E questi sono tutti in arrivo o sono arrivati ​​su WordPress e consentono agli utenti di modificarli direttamente, e assumono tutti la forma di un blocco.

Successivamente, vogliamo parlare di modelli. I modelli sono una sorta di pietra angolare dell'esperienza di modifica dell'intero sito. I modelli potrebbero essere un'intera conversazione a sé stante, ma ti daremo una piccola anteprima sui modelli se non ti è familiare. Quindi, ancora una volta, un modello è solo una raccolta predefinita di blocchi che forma un layout specifico. Un modello potrebbe essere un singolo blocco con uno stile. Potrebbero essere più blocchi.

I pattern consentono agli utenti, con un solo clic, di inserire un intero design direttamente nel loro sito, piuttosto che dover creare il design manualmente, un blocco alla volta, il che può davvero accelerare lo sviluppo di un sito. È anche molto utile se ricordi: vedi questa bellissima demo del sito Web e contiene tutti questi contenuti. E installi il tema, ed è come, beh, come ottengo quella demo? I modelli lo risolvono per te perché l'autore del tema può fornire un sacco di layout di pagina o singoli design che, con un solo clic, un utente può inserire e ottenere quella demo che ha visto e da cui è stato attratto quando ha scelto il tema.

Quindi diamo una rapida occhiata a uno schema qui. Abbiamo solo una semplice intestazione, del testo e alcuni pulsanti. E questo può essere, ancora una volta, inserito con un solo clic nella pagina, e qui vediamo che è composto da tre diversi blocchi, un blocco di intestazione, un blocco di paragrafo e un blocco di pulsanti.

Ora con 5.9, di nuovo, uscito quest'anno, abbiamo visto l'introduzione di Pattern Explorer. Quindi il tema del 2022, che ho menzionato prima, quello che stiamo usando in tutti i nostri esempi, è chiamato il tema dell'incubatoio: molti uccelli. E puoi vedere qui in Pattern Explorer, abbiamo un sacco di design diversi che gli autori del tema hanno creato.

Quindi, come utente, posso inserire uno qualsiasi di questi direttamente nel sito e ottengo la stessa estetica per cui l'autore del tema ha progettato il tema, quindi la sua serie di altoparlanti, alcuni uccelli fianco a fianco, qualunque cosa tu voglia. E i modelli, e i modelli che vengono serviti con un tema, sono molto importanti per l'esperienza di modifica dell'intero sito.

Successivamente, abbiamo l'Editor. Non possiamo non parlare dell'Editore. Se hai utilizzato WordPress, probabilmente lo conosci molto bene. Ma voglio menzionarlo perché l'Editor ha avuto molti nomi diversi in passato: Block Editor, Gutenberg, The Gutenberg Editor. Ai fini di questa discussione, chiameremo semplicemente l'Editor. Questo è il nome ufficiale, e sarà quello che vedete qui. Ancora una volta, questo è stato introdotto in WordPress 5.0 alla fine del 2018.

Quindi, all'interno dell'Editor, fai semplicemente clic sull'Inseritore e puoi inserire i tuoi blocchi e modelli. Ora, volevo mostrare lo schermo perché ora dobbiamo parlare del Site Editor. Alla fine, il prefisso del sito dell'editor del sito probabilmente scomparirà e avremo solo l'editor. Ma l'editor del sito è un'esperienza coerente che ti consente di modificare e navigare direttamente tra vari modelli, parti di modelli, opzioni di stile e altro ancora.

Quindi, in sostanza, l'editor del sito prende il nostro editor standard a cui ci siamo abituati negli ultimi anni e lo porta al livello successivo consentendo agli utenti di modificare aree aggiuntive del tuo sito Web che ora sono tutte alimentate da blocchi. Quindi WordPress 5.9 ha introdotto l'editing completo del sito e, con esso, il Site Editor. E nella 6.0, che uscirà a maggio, vedremo molti miglioramenti a questo, il che è molto eccitante.

Quindi, se utilizzi un tema a blocchi come 2022, potrai accedere all'editor del sito. Ci sono due modi diversi, la barra laterale in alto e poi sotto la sezione dell'aspetto. Ora, l'editor del sito, di nuovo, perché fa parte del– è molto potente, è disponibile solo per gli amministratori. Quindi non preoccupatevi, editori, non saranno in grado di accedere al Site Editor. Devi essere un amministratore per accedere al Site Editor.

E una volta entrati qui, sembra molto simile all'editor standard, ma noterai qualcosa di leggermente diverso. In alto qui, abbiamo Home. E questo ci dice che stiamo effettivamente modificando il modello home.HTML e abbiamo un paio di diverse aree della pagina che possiamo modificare separatamente. Come puoi vedere qui, abbiamo l'intestazione e il piè di pagina.

Quindi questo è qualcosa che non avresti mai potuto fare prima. Non potresti mai modificare home.PHP, ma ora il modello HTML direttamente dall'interfaccia, non senza qualche altra estensione di terze parti.

E se facciamo clic sulla pagina e sulla visualizzazione elenco, possiamo vedere che abbiamo un ciclo di query. Ancora una volta, quei temi di costruzione familiari sono probabilmente molto, molto, molto familiari con la creazione di loop all'interno di modelli per temi, ma qui possiamo farlo tutto con i blocchi usando il ciclo di query. E possiamo anche vedere alcuni di quegli altri blocchi tematici come il titolo del post, l'immagine in primo piano, l'estratto del post e la data del post. Tutti questi possono essere spostati e modificati dall'utente dall'interfaccia senza alcuna codifica necessaria.

Ora, se fai clic su una piccola icona di WordPress o sull'icona di un sito, possiamo ottenere questa barra laterale. E poi possiamo vedere che abbiamo accesso a tutti i nostri modelli e parti di modelli. Ora, voglio sottolineare che il flusso: tutte queste schermate sono completamente in fase di sviluppo. L'editing dell'intero sito è ancora in versione beta e ci sono molti perfezionamenti e miglioramenti che arriveranno. Quindi quello che stiamo vedendo oggi potrebbe non sembrare lo stesso tra sei mesi, ma è un inizio fantastico.

Quindi, se scendiamo ai modelli, possiamo vedere tutti i modelli inclusi nel 2022. Dovresti vederne alcuni familiari come Pagina e Indice, Home e 404. E poi se andiamo alle nostre parti del modello, possiamo vedere alcuni personalizzati parti del modello che sono state incluse dagli autori del tema. Quindi abbiamo un paio di intestazioni diverse e abbiamo un piè di pagina.

Ora di nuovo, tutti questi sono modificabili dall'utente. Quindi, se vediamo questo puntino qui, possiamo vedere che questa parte del modello di intestazione è stata modificata da me. Ora, quando modifichi una parte del modello o un modello, tali modifiche vengono salvate nel database. In realtà non modificano i modelli nel tuo tema, il che è fantastico perché puoi sempre tornare ai modelli del tema o alle parti del modello.

Ma ancora una volta, se facciamo clic qui, possiamo iniziare a modificare quella parte del modello di intestazione e vedrai che tutti questi sono costituiti da blocchi. Quindi è la stessa esperienza che useresti nell'Editor quando modifichi un post o una pagina. Puoi farlo ora all'interno del Site Editor per tutti i tuoi modelli e parti di modelli.

Questa è stata una breve panoramica del Site Editor e di come funziona, ma ora voglio parlare dell'anatomia di un tema a blocchi, che è il principale componente fondamentale dell'editing completo del sito. Quindi, come funziona l'anatomia di un tema a blocchi? Bene, in realtà è suddiviso in un paio di categorie diverse. Quindi abbiamo temi a blocchi. Abbracciano completamente l'editing completo del sito. I modelli di tema sono composti interamente da blocchi. I modelli e le parti dei modelli sono HTML anziché PHP.

E poi voglio sottolineare che un tema a blocchi può essere molto semplice. Tutto ciò che deve fare è consistere in un file style.CSS e un file index.html, oltre a un file index.PHP. Questo file PHP è una specie di residuo del tradizionale sviluppo del tema WordPress e probabilmente scomparirà in futuro.

Infine, la maggior parte dei temi a blocchi include un file theme.JSON. Ne parleremo separatamente. È un argomento molto importante riguardante impostazioni e stili globali. Quindi diamo un'occhiata alla struttura del file del tema. Quindi questo è il 2022, una versione ridotta della struttura dei file all'interno del 2022. E possiamo vedere i file richiesti proprio qui.

Poi notiamo anche che ci sono alcune cartelle, vale a dire Templates e Template Parts. All'interno di ciascuna di queste cartelle, sono presenti tutti i file HTML per ogni modello e parte del modello. Ciò che non è visibile qui, che in realtà è davvero eccitante, quindi volevo introdurlo di nascosto, Gutenberg, il plug-in Gutenberg, dove viene eseguito tutto questo sviluppo futuro dell'editing completo del sito, in realtà ha introdotto di recente una nuova cartella chiamata Patterns. Quindi puoi effettivamente posizionare i tuoi file di pattern direttamente all'interno della cartella Pattern e WordPress li registrerà per te. Solo un'anteprima. Ti incoraggio vivamente a dare un'occhiata a Gutenberg e a tutte le nuove funzionalità.

Ma torniamo alla diapositiva qui. Abbiamo i nostri modelli e parti di modelli. E puoi vedere i singoli file HTML per ciascuno. Ora, per capire meglio come funziona, daremo un'occhiata al file 404.HTML. Questo è un file o una pagina nel tuo sito che non potresti mai modificare direttamente a meno che tu non ti sia immerso nel codice o tu abbia utilizzato una risorsa di terze parti che ti consenta di modificare questo modello.

Quindi, tornando al Site Editor, possiamo vedere che la nostra pagina 404 è proprio qui. Se facciamo clic su questo, l'utente può ora modificare i diversi componenti di quel modello. Tuttavia, diamo un'occhiata a quale codice HTML effettivo costituisce questo modello, il codice che è effettivamente nel tema.

Quindi qui, possiamo vedere che abbiamo il nostro file 404.HTML, e ha un sacco di markup. Partendo dall'alto e dal basso, vediamo che abbiamo le specifiche per un blocco parte modello. Quello che sta facendo è fare riferimento alle nostre parti del modello registrate e inserirle nel modello. Quindi, se torniamo indietro qui, possiamo vedere che abbiamo una parte footer.HTML e una parte header.HTML. Ed è a questo che si fa riferimento qui.

Quindi questo è un blocco unico che ti consente di inserire modelli composti da altri blocchi. Ora, ovviamente, potresti semplicemente includere tutti i blocchi che compongono un'intestazione e tutti i blocchi che compongono un piè di pagina, ma facendo riferimento alla parte del modello, puoi fare tutto in un unico posto e quindi applicare la stessa parte del modello su tutti i tuoi modelli, in modo simile a quello che faresti in un WordPress tradizionale con PHP.

Ora, mentre guardiamo oltre, abbiamo un markup, solo un markup principale, e poi abbiamo un div. Non ho intenzione di entrare troppo in profondità in questo. Ci sono alcune cose interessanti in corso qui, vale a dire il layout qui, vero, che sta facendo alcune impostazioni di layout, ma questo è solo markup generale per la pagina, il pattern 404.

Ora, ho menzionato lo schema. Il 404 in questo tema è in realtà raggruppato in un modello. Quindi tutti i blocchi che compongono il contenuto 404 sono in uno schema. E poi abbiamo un blocco di pattern che in realtà fa riferimento a quel pattern e quindi inserisce quei blocchi. Ora, ovviamente, di nuovo, potresti semplicemente includere tutti i blocchi che compongono la pagina 404 qui, ma inserendoli in uno schema e poi facendovi riferimento, rende solo un po' più facile la gestione.

Quindi, quando torniamo al Site Editor, abbiamo i nostri contenuti e possiamo vedere le diverse sezioni. Quindi la parte superiore è quella parte del modello di intestazione che viene inserita. E poi, ovviamente, la sezione principale è il modello 404 che viene inserito. E ora, poiché questi sono tutti blocchi, tutto ciò che dobbiamo fare è modificarli come faremmo normalmente . Possiamo renderlo audace. Potremmo cambiare il colore. Potremmo rimuovere blocchi, aggiungere blocchi e così via.

Abbastanza facile e non abbiamo avuto bisogno di modificare alcun codice. Avevamo bisogno di capire come funzionava il codice, ma non avevamo bisogno di toccare alcun codice. Quindi, quando siamo soddisfatti, facciamo semplicemente clic su Salva. Ancora una volta, queste modifiche vengono salvate nel database, quindi non stai effettivamente modificando i file del tema. Quindi, se dovessimo annullare le modifiche, torneremo a qualunque cosa il tema stia fornendo.

Una delle grandi cose anche dell'editor del sito - e ancora una volta, questo è ancora in fase di sviluppo - è che puoi aggiungere nuove parti del modello. Quindi, ancora una volta, questo tema aggiunge una serie di intestazioni e piè di pagina diversi, ma se volessimo aggiungerne altri? Forse volevamo una barra laterale. Forse volevamo diverse sezioni di contenuto. Possiamo farlo direttamente all'interno del Site Editor.

E ancora, questo flusso verrà migliorato: più caratteristiche, più funzioni. Ma al momento è funzionante e puoi aggiungere tutto qui. Una cosa da notare è che non puoi ancora aggiungere modelli all'interno del Site Editor. Puoi farlo all'interno di un'interfaccia diversa all'interno dell'editor di WordPress ma non ancora nell'editor del sito. Ma arriverà.

Quindi l'ultimo pezzo di questo è che abbiamo parlato di apportare tutti questi cambiamenti. E se potessi semplicemente esportare tutte le tue modifiche come un singolo tema che sta effettivamente arrivando ed è davvero interessante vedere come ciò influirà sullo sviluppo del tema. Quindi, con l'ultima versione di Gutenberg, ora puoi esportare tutte le tue modifiche, oltre al tema originale.

Vengono uniti e puoi esportarlo come tema nuovo di zecca con tutte le tue modifiche applicate ai file all'interno del tema. Quindi potresti immaginare di prendere il 2022. Lo carichi. Fai tutte le tue modifiche. Puoi modificare alcuni modelli e quindi esportare un tema completo. Ha alcune implicazioni molto interessanti per lo sviluppo futuro del tema.

Ora dobbiamo parlare di impostazioni e stili globali. Questo è il file theme.JSON. Questo è nuovo di zecca per WordPress ed è tanto eccitante quanto complicato. Quindi, se guardiamo indietro al tema del 2022, possiamo vedere quel file in cima. E quando saltiamo nel file theme.JSON, sono davvero cinque sezioni, una è solo il numero di versione.

E parlerò brevemente di modelli personalizzati e parti di modelli. Quindi è qui che, se avevi un modello personalizzato, un modello completamente personalizzato, uno che WordPress non riconoscerebbe naturalmente, è lì che puoi registrarlo qui. Qui è anche dove registri tutte quelle parti del modello come intestazioni e piè di pagina. Qualsiasi modello tradizionale, come Indice, Pagina, Post– quei modelli che WordPress generalmente riconosce– non è necessario inserirli qui, solo quelli personalizzati e, ovviamente, le tue parti del modello.

Ma la carne di theme.JSON è la sezione delle impostazioni e dello stile. Quindi, se guardiamo prima alle impostazioni, c'è molto da fare qui. E ancora, questo è molto ridotto. Ma la parte superiore sono le impostazioni globali. Queste sono impostazioni che influiscono sull'editor del sito e sull'editor nell'intero sito. Questi includono cose come bordo, colore e tipografia. Qui è dove imposteresti la tavolozza dei colori per il tuo tema, le impostazioni tipografiche per il tuo tema, i caratteri e così via.

E poi abbiamo anche impostazioni a livello di blocco, in cui potresti, ad esempio, impostare una tavolozza di colori per l'intero sito ma poi impostare una tavolozza di colori più piccola e una tavolozza di colori completamente diversa, ad esempio per il blocco di paragrafo o il blocco di pulsanti. Quindi offre un'enorme quantità di flessibilità, ma le impostazioni sono le funzionalità disponibili per un utente all'interno dell'Editor o all'interno di un blocco.

Quindi, se guardiamo, ancora una volta, al colore, qui abbiamo definito la nostra tavolozza. Abbiamo un colore di primo piano, uno di sfondo e poi il primario, il nero, il bianco e una specie di verde bosco. E poi se entriamo nell'Editor, possiamo vedere che quando appare il nostro selettore di colori, abbiamo quei colori definiti per un utente da cui selezionare.

Ora entriamo nello stile. Quindi gli stili sono fondamentalmente come il tuo CSS. Quindi, tradizionalmente, dovresti sommare tutti i tuoi CSS in un file styles.CSS o in qualche altra configurazione. Ma la sezione Stili di theme.JSON ti consente di impostare lo stile a livello di blocco e anche a livello globale nell'intero tema. Pensa a questi come valori predefiniti, giusto, perché l'Editor: il punto è che gli utenti possono entrare e iniziare a modificare e apportare modifiche e progettare il loro sito come preferiscono usando i blocchi.

Ma ci deve essere un valore predefinito, e questi sono impostati nella sezione style di theme.JSON è quello predefinito. Quindi, di nuovo, abbiamo gli stili globali, un po' come i nostri colori globali, la tipografia globale, e poi possiamo anche impostare gli stili a livello di blocco. Quindi la cosa sugli stili globali è qui dove impostiamo il colore di sfondo del nostro tema. Qui è dove imposteremmo le dimensioni dei caratteri per le nostre intestazioni, le diverse opzioni di tipografia per i collegamenti, il testo, le intestazioni e tutto quel genere di cose. E a livello di blocco, possiamo fare lo stesso, ma in modo specifico per i blocchi.

Ora, una delle cose interessanti della sezione delle impostazioni di cui abbiamo appena parlato è che ogni volta che crei un'impostazione, WordPress definirà una variabile. Quindi, quando stavamo guardando quella tavolozza di colori, abbiamo definito lo sfondo, il primo piano e il primario. WordPress genererà effettivamente una variabile che si associa a quel codice esadecimale, qualunque sia il codice esadecimale impostato per primario, primo piano, sfondo.

Negli stili, possiamo usare queste variabili per definire gli stili sia per gli stili globali che per quelli a livello di blocco. Il vantaggio di questo è che se un utente dovesse mai cambiare qualunque sia il colore di sfondo, allora passerà attraverso la specifica dello stile in theme.JSON. Ora, se diamo un'occhiata alla sezione del blocco, qui abbiamo il nostro blocco dei pulsanti, e lo abbiamo da un designer di temi.

Volevo che i miei pulsanti avessero un colore predefinito verde con del testo bianco. Puoi vedere che nella sezione dei colori del blocco pulsanti, definiamo il colore di sfondo come primario, che è quel verde bosco, e il nostro testo è lo sfondo, che è bianco. Quindi possiamo usare queste variabili in theme.JSON per definire gli stili per i nostri blocchi e per il sito stesso.

Ora, questo si lega agli stili globali, a cui ho accennato prima. Quindi, tornando all'editor del sito, se clicchiamo su questo piccolo cerchio bicolore in alto, apriremo il pannello degli stili globali. Ora, c'è molto da fare qui, quindi farò solo una rapida dimostrazione di come funziona. Ma sappi che ti incoraggio a scaricare il tema 2022 o un altro tema a blocchi ed esplorare veramente gli stili globali.

E se entriamo qui e guardiamo i colori, facciamo clic su di essi, ora possiamo vedere che la tavolozza dei colori è lì, quella fornita dal tema, così come alcuni elementi diversi, come il nostro sfondo, il testo e i collegamenti . Ora, in questo pannello che stiamo guardando qui, stiamo modificando gli elementi globali del sito. Quindi, ad esempio, abbiamo parlato dello sfondo del sito. In questo momento, è bianco. Quindi, se clicco su Sfondo, posso entrare qui e posso vedere che è selezionato come bianco. Questo è il colore che impostiamo in theme.JSON.

Ma cosa succede se mi piace davvero questo color pesca? Bene, con un solo clic, posso fare clic e ci siamo. Il nostro colore di sfondo del nostro sito è ora pesca. Quindi questo offre all'utente un controllo senza precedenti per modificare completamente il proprio sito in base alle proprie esigenze. Ma ancora una volta, theme.JSON fornisce l'impostazione predefinita che, come sviluppatore di temi, fornisci all'utente, e quindi possono prenderlo da lì.

Quindi questa è stata una breve panoramica dell'editing completo del sito, dell'editor del sito e dei temi di blocco. Ma voglio prendermi un po' di tempo e parlare dei miei pensieri sul futuro della tematizzazione moderna. Quindi, quando pensiamo alla tematizzazione moderna, la tematizzazione moderna, credo, enfatizzerà il design rispetto allo sviluppo. Ora, potresti pensare, beh, progettare temi riguarda sempre il design.

Ma se ripensi allo sviluppo del tema tradizionale, c'era molto codice da fare. Tutti i file modello erano PHP, il che richiedeva una notevole conoscenza di WordPress e dello sviluppo PHP per essere eseguiti correttamente. Beh, questo sta cambiando. Vediamo che ora che con l'editor puoi progettare temi direttamente all'interno dell'interfaccia utente dell'editor del sito e dell'editor tradizionale.

E questo avrà un ruolo importante nel modo in cui progettiamo i temi. Quindi sono uno sviluppatore sostenitore di WP Engine e nel nostro team stiamo costruendo un tema sperimentale chiamato Frost. E quando creiamo un nuovo modello o vogliamo modificare un modello, non entriamo nei file e modifichiamo i file. Entriamo nel Site Editor o entriamo nell'Editor e modifichiamo quel pattern, o costruiamo un pattern, o costruiamo un template. E poi ne siamo contenti, lo esportiamo e poi lo inseriamo nel tema.

Quindi in realtà non stiamo codificando. In realtà stiamo facendo tutto visivamente. E il vantaggio di ciò è che sappiamo che un utente, le persone che useranno il tema, saranno anche lì a modificare il modello oa modificare il modello. E quindi ha senso, mentre stiamo costruendo il tema, stiamo facendo lo stesso processo che farebbe un utente per usare il tema, che penso sia semplicemente magico.

E questo porterà a un metodo di sviluppo del tema low-code o addirittura no-code. Ora, ovviamente, siamo a una conferenza per sviluppatori, giusto? E quindi stiamo parlando di no code e low code. Ma il mio ultimo punto, parleremo di dove penso si trovi lo sviluppo. Ma penso che questo sia davvero eccitante perché porterà una nuova generazione di utenti, persone che vogliono creare il proprio tema, personalizzare il proprio tema, ma forse non conoscono PHP, forse non conoscono JavaScript .

Possono farlo tutto ora all'interno del Site Editor, che penso sia una specie dell'etica di WordPress, democratizzare l'editoria. E penso che l'editing completo del sito stia davvero cercando di raggiungere questo obiettivo. E negli ultimi due anni o l'anno scorso, francamente, abbiamo assistito a tali progressi con l'editing completo del sito. Sta diventando piuttosto eccitante. Quindi credo davvero che l'editing completo del sito sia il futuro del WordPress tradizionale.

Ora, potrebbe non essere per tutti. Voglio che sia molto chiaro. E c'è ancora molto sviluppo che è ancora necessario. Quindi, quando parliamo di diversi tipi di persone che utilizzano WordPress, abbiamo di tutto, dall'utente standard fino alle agenzie. E le agenzie potrebbero voler fornire un'interfaccia molto pulita e molto strutturata che i loro clienti possano utilizzare e lavorare sui loro siti web. Potrebbe non essere la modifica dell'intero sito. Penso che vada bene.

Ma come stiamo vedendo nell'economia, abbiamo Squarespace, Wix, Element o altri costruttori di pagine. C'è un enorme contingente della comunità web di utenti che desidera uno strumento che consenta loro e consenta loro di modificare e progettare il proprio sito. E penso che WordPress sia davvero carente in WordPress, specialmente in Core. E penso che questo sia lo scopo dell'editing completo del sito e questa sia una specie di promessa dell'editing completo del sito.

Quindi molto da fare. Ancora un sacco da fare. Ancora molte cose che dobbiamo capire, vale a dire cose come controlli reattivi e come limitare diversi componenti dell'interfaccia utente in modo che alcuni utenti non rovinino i progetti o modifichino cose che non dovrebbero. Quindi molte cose da capire ancora.

Ma una delle aree che penso sia davvero entusiasmante è lo sviluppo per l'editing completo del sito. Ora che disponiamo di questo strumento che consente agli utenti di progettare il proprio tema o progettare il proprio sito, dobbiamo iniziare a pensare a come possiamo portarlo al livello successivo. Come sviluppatori, come possiamo basarci su questo? Se ripensiamo al WordPress tradizionale, prendiamo la schermata dei widget, i widget in generale. WordPress ha fornito un livello molto base di widget e funzionalità e gli sviluppatori sono usciti e hanno creato tutti i tipi di estensioni.

E penso che la stessa idea debba essere applicata all'editing completo del sito. Al momento, ci sono pochissime estensioni e plug-in che sfruttano davvero l'editing completo del sito e lo portano al livello successivo. WordPress continuerà a ripetere l'editing dell'intero sito e arriverà a un punto. Ma non farà mai tutto ciò che tutti vogliono, e penso che ora sia il momento di fare sul serio con l'editing completo del sito e iniziare a pensare ai modi in cui possiamo costruirci sopra come sviluppatori e portare davvero questa esperienza al prossimo livello.

Quindi sfido tutti a uscire, esplorare Gutenberg, provare il tema 2022 e installarlo, iniziare a imparare lo sviluppo dei blocchi. C'è un'incredibile quantità di opportunità per i blocchi di nicchia. E prova a costruire il tuo tema. Prova a prendere 2022. Prova a modificarlo. Prova a costruire il tuo tema di base. È davvero divertente e c'è così tanto potenziale là fuori per questa roba.

Quindi voglio fermarmi qui e dire grazie per essere intervenuto. E prima di andare, voglio parlare di un paio di risorse che penso siano davvero importanti, specialmente se questa presentazione, se sei nuovo nell'editing completo del sito e vuoi saperne di più. Quindi, di nuovo, puoi, ovviamente, seguirmi. Twitto su questo tutto il tempo.

Ma ci sono un paio di risorse. Quindi il primo è Frost. Ho accennato a questo prima. Quindi questo è un tema che le relazioni con gli sviluppatori di WP Engine stanno costruendo. Ed è un prodotto sperimentale. Non dovrei dire prodotto. È un esperimento, in cui stiamo cercando di usarlo per istruire la comunità su come costruire temi a blocchi. Stiamo imparando lungo la strada. Stiamo apportando molte modifiche e aggiornamenti lungo il percorso, cercando di tenerci aggiornati con WordPress, ma è un'ottima risorsa. Inoltre, ancora una volta, quel tema del 2022: un posto fantastico per iniziare e imparare.

Successivamente, voglio collegare Learn WordPress. Questo è learn.wordpress.org. Il team di formazione di wordpress.org sta facendo molto lavoro per cercare di educare e portare molti di questi concetti al pubblico. Quindi, se sei interessato e vuoi saperne di più, è un posto fantastico. Abbiamo workshop e tutti i tipi di contenuti diversi laggiù, inclusi spazi di apprendimento sociale. Questi si tengono settimanalmente, dove parliamo di diversi argomenti, approfondimenti su come codificare un blocco a come costruire un tema di blocco, e così via.

E poi, ovviamente, se sei interessato allo sviluppo, inizia sempre con il manuale dell'editor di blocchi. È da lì che ho iniziato e ci sono così tante grandi risorse. E infine, Gutenberg. Se non hai familiarità con Gutenberg, ti incoraggio a familiarizzare con Gutenberg, soprattutto se sei interessato allo sviluppo di WordPress. Ed è un ottimo posto per immergersi, esplorare come viene costruito l'editing completo del sito, come vengono costruiti diversi blocchi e come puoi applicarlo ai tuoi flussi di lavoro.

Quindi grazie mille per essere intervenuto. Spero che tu ne abbia ricavato molto da questa presentazione e ti invitiamo a continuare a esplorare l'editing completo del sito. Grazie mille.