Gestione e creazione di modelli all'avanguardia

Coloro che padroneggiano i modelli a blocchi saranno fortemente posizionati per guidare il nuovo paradigma di progettazione, costruzione e ridimensionamento di WordPress.

Guarda questa sessione per scoprire come sfruttare le ultime funzionalità dei modelli, oltre a un nuovo entusiasmante strumento che eleva l'esperienza di gestione dei modelli per liberi professionisti e agenzie.

Altoparlanti:

• Michael Day, React Engineer presso WP Engine
• Phil Johnston, Senior Software Engineer presso WP Engine

Slide della sessione:

Trascrizione:

PHIL JOHNSTON: Salve. Mi chiamo Phil Johnston e sono Senior Staff Software Engineer presso WP Engine. E io e il mio compagno di squadra Mike Day parleremo della gestione e della creazione di modelli all'avanguardia in WordPress.

Quindi ci sono molte cose nuove e interessanti che sono state aggiunte a WordPress ultimamente. E uno di questi sono i modelli. E ne parlerò. I modelli sono fatti di blocchi. Quindi tuffiamoci dentro.

Utilizzeresti i blocchi nell'editor di blocchi che è il dashboard di WordPress. Qui è dove andresti a creare qualcosa come un post sul blog o una pagina e dove puoi iniziare a scrivere o creare. Ed è il posto in cui useresti i blocchi.

Quindi sono stato in grado di prendere in prestito alcuni blocchi LEGO dai miei figli per questo discorso. Quindi, per aiutare a illustrare questo, quando guardi la pagina qui dove dice che sono un blocco di intestazione, puoi pensare a quello come a un blocco LEGO. E poi sotto quello dove dice che sono un blocco di paragrafo, puoi pensare a quello come a un altro blocco che hai ritagliato sotto quello e poi così via e così via.

Hai un altro blocco di intestazione lì sotto. Quindi puoi fare clic su di esso. E poi puoi iniziare a costruire la tua pagina come desideri. E puoi riorganizzare quei blocchi semplicemente facendo clic, trascinando o riordinando. E poi puoi riassemblare la tua pagina molto facilmente in questo modo perché sono tutte bloccate.

Mentre questo è molto semplice per qualcosa come un post sul blog, e puoi semplicemente tuffarti direttamente nell'editor e iniziare a farlo senza nemmeno sapere che si tratta di blocchi, ma puoi anche costruire un layout di blocco molto più complesso come quello che stai stai vedendo qui. Quindi qui hai un layout a tre colonne con tre immagini. E soprattutto, hai effettivamente una colonna a larghezza intera. E si estende su tutte e tre quelle colonne. E poi così tre blocchi di immagini, tre blocchi di intestazione di esempio, tre blocchi di paragrafo e poi tre blocchi di pulsanti sotto.

Quindi, ancora una volta, i blocchi di WordPress sono come i LEGO. Puoi unirli insieme per creare un layout semplice come il primo che ho mostrato o un layout più complesso come quello che stai guardando qui. Quindi ho evidenziato in rosso i blocchi che potresti aspettarti di vedere su una pagina come questa. Quindi puoi vedere che il primo ha un riquadro rosso intorno. [SI SCHIARISCE LA GOLA] Mi scusi. E questo rappresenta un blocco. E poi sotto c'è un altro blocco con del testo Lorem ipsum e poi tre blocchi di immagini come ho detto, tre blocchi di intestazione, tre blocchi di paragrafo sotto e tre blocchi di pulsanti.

Potresti pensare che sia tutto ciò che serve per creare un layout di pagina come questo, ma in realtà è un po' più complesso di così. Quindi qui in questa diapositiva, ho evidenziato i blocchi invisibili, i blocchi che non puoi vedere. Questi sono blocchi che devono essere sulla pagina per definire dove dovrebbero stare le cose come il fatto che ci siano tre colonne invece di una colonna.

E quindi i blocchi invisibili, sebbene potenti, sono anche molto difficili da immergere per un utente medio e iniziare a usarli. Mentre muovi il mouse all'interno dell'editor di blocchi, non saprai che ci sono blocchi invisibili lì perché sono invisibili. E tutti questi blocchi hanno anche controlli complessi che li accompagnano. Ad esempio, ecco uno dei blocchi di colonne.

E se guardi sul lato destro, puoi vedere tutti i controlli complessi che ne derivano e che non sono super facili o intuitivi da capire. Cose come i blocchi interni usano la larghezza del contenuto o il riempimento o la spaziatura dei blocchi. L'utente medio non saprà o capirà cosa fanno queste impostazioni. E questo è un po' come me se dovessi entrare in una cucina e vedere un mucchio di spezie.

Non sono una grande cuoca. E quindi avrei un mucchio di spezie sulla griglia in questo modo. E non saprei come combinarli o usarli perché non ho avuto il tempo di diventare uno chef. E proprio come ci vuole tempo per diventare uno chef a cinque stelle e cucinare un ottimo e delizioso pasto, ci vuole tempo e c'è una curva di apprendimento difficile con l'editor di blocchi e capire quali blocchi usare in quale momento per fare qualcosa che abbia un bell'aspetto o un sapore Bene.

E quindi è una specialità. È un mestiere che devi sviluppare. Quindi l'utente medio verrà scaricato nell'editor di blocchi con una lavagna vuota come quella che vedi qui. E non sapranno che hanno bisogno di usare un blocco di colonne, o come usare quel blocco, o cosa mettere dentro quel blocco, fondamentalmente le spezie che devono combinare per creare qualcosa che abbia davvero un bell'aspetto.

Potrebbero trovarlo frustrante. Potrebbero trovare noioso e difficile ottenere ciò che vogliono. E anche se imparassero tutte quelle complessità dei blocchi, potrebbero semplicemente non avere capacità di progettazione. E così, sebbene potenti, i blocchi possono essere difficili da usare. Ed è per questo che è stato inventato il concetto di pattern.

Quindi in WP Engine, abbiamo creato un plug-in chiamato Atomic Blocks. E in Atomic Blocks, fondamentalmente abbiamo ideato il concetto di pattern, ma li abbiamo chiamati sezioni e layout. Ed è esattamente lo stesso concetto. E WordPress Core in realtà si è ispirato agli Atomic Blocks per il concetto di quelli che ora sono in WordPress Core e sono chiamati pattern.

Quindi i modelli sono gruppi predefiniti di blocchi che gli utenti possono sfogliare, come vedi qui. Ci sono un sacco di modelli qui tra cui scegliere. E facendo clic su uno, inseriscono tutto ciò nella loro pagina con un solo clic. Quindi, invece di dover assemblare blocchi come questo, i blocchi LEGO, ottengono qualcosa del genere, un gruppo preassemblato di un gruppo di blocchi che è stato realizzato, si spera, da qualcuno che è già molto bravo nel design e ha impiegato ore in quell'arte di fare blocchi.

E quindi una volta che lo inserisci nella pagina, assomiglia un po' a questo. E proprio così, boom, hai uno schema, un intero gruppo di blocchi preassemblati che hanno un bell'aspetto, che hanno un buon sapore e che funzionano, e che puoi semplicemente inserire e digitare il testo che devi modificare . Quindi cambieresti qualcosa come l'intestazione del campione nel testo univoco per la tua pagina.

Quindi i modelli sono come un enorme vantaggio per l'utente medio. Non hanno bisogno di imparare tutte le complessità dell'editor di blocchi, tutte quelle cose complesse. Non è necessario che siano designer professionisti, ma possono ottenere un design dall'aspetto eccezionale semplicemente inserendo un motivo nella pagina.

Quindi, se sei un'agenzia, qualcuno che costruisce siti web per un'altra persona o un cliente, puoi usare schemi a blocchi per aiutare i tuoi clienti ad aiutare se stessi. Fornendo un sacco di modelli predefiniti al tuo cliente, può creare le proprie pagine.

Quindi diciamo che hanno un evento in arrivo per il quale hanno bisogno di una pagina speciale. Possono prendere uno schema a blocchi che hai creato per loro che corrisponde al loro marchio. Corrisponde alla loro combinazione di colori e a tutto quel genere di cose, e possono semplicemente fare clic e inserirlo nella pagina e decodificare: basta iniziare a digitare in quei blocchi invece di dover conoscere tutte le complessità di quale blocco utilizzare in quale scenario, e anche cosa non fare e come creare un layout che funzioni alla grande su tutti i dispositivi e tutti questi tipi di cose.

Tuttavia, mentre i modelli di blocco sono facili da usare per l'utente medio, non sono facili da creare. E sono ancora più difficili da gestire nel tempo. E per gli sviluppatori e le agenzie, non ci sono flussi di lavoro o strumenti integrati in WordPress per aiutarti a creare modelli.

Quindi ho spezzato i passaggi per costruire uno schema attualmente in quello che chiamerò nel modo più duro qui in 10 passaggi. E se questo sembra travolgente, è perché in un certo senso lo è. La prima cosa che devi fare è creare un file PHP in un editor di codice come VS Code. Devi inserire un'intestazione di file specifica nella parte superiore di quel file.

Allora hai bisogno di un posto dove costruire. Quindi devi avere un WordPress, probabilmente sul tuo locale, il che è fantastico. Ma poi devi creare una pagina temporanea all'interno di quel WordPress solo in modo da poter inserire blocchi da qualche parte e lavorarci sopra. E poi devi costruirlo. Devi usare quelle abilità, quel mestiere che hai sviluppato e farlo sembrare carino. E poi quando hai finito, devi passare a una vista codice e copiare tutto quel codice in quel file che hai creato nel passaggio uno.

E poi devi salvare quel file in una posizione specifica nel tuo tema. Se stai costruendo un tema e lo consegni al tuo cliente, devi inserirlo nella directory dei modelli. E poi se il tuo modello contiene immagini come in quel layout a tre colonne che ho mostrato, devi assicurarti che quelle immagini funzionino davvero quando lo consegni al tuo cliente. Quindi, poiché l'hai creato sul tuo computer locale, anche a quell'immagine verrà fatto riferimento nel codice come se fosse sul disco rigido del tuo computer locale.

Ovviamente, questo è un problema. Una volta che non è più sul tuo computer, quell'immagine non funzionerà. Quindi devi passare attraverso il codice con un pettine a denti fini, cercare gli URL dei tuoi computer locali e sostituirli con uno specifico tag PHP. E poi devi assicurarti di spostare effettivamente anche quei file di immagine nel tuo tema. Non puoi semplicemente cambiarlo nel codice. Devi anche spostare quel file.

E poi per renderlo ancora più difficile, è qui che diventa davvero, penso che la cosa più frustrante, almeno per me quando stavo costruendo molti schemi, fosse se facevo un errore di ortografia all'interno di uno schema, avrei dovuto iniziare al passaggio tre di nuovo e vai di nuovo fino al passaggio nove ogni singola volta solo per correggere un errore di ortografia. Devi anche, perché devi rigenerare tutto il codice di blocco ogni volta, devi quindi cercare tutti quegli URL di immagine e sostituirli, rimetterli nel file.

È tutta una serie di passaggi ripetitivi e noiosi, soprattutto per la gestione nel tempo. Ad esempio, devi modificare uno schema tra mesi. È molto noioso. E questo è qualcosa in cui ci siamo imbattuti durante la creazione di modelli per la nostra collezione Genesis Pro. Abbiamo fornito molte sezioni e layout o modelli con questo e siamo diventati molto frustrati dal processo di fare queste cose noiose ancora e ancora e ancora.

Ed è quello che ci ha portato a costruire uno strumento per aiutarci a non dover fare queste cose, per eliminare quella noiosità e per renderlo davvero il più veloce possibile. Puoi semplicemente lavorarci sopra, salvarlo e, boom, andrà direttamente al file per te. Metterà il file nel posto giusto. Scrive tutto il codice per te. E così abbiamo deciso di costruire internamente uno strumento per noi stessi che avrebbe portato via tutto questo dolore. E in realtà non abbiamo mai voluto che diventasse qualcosa che avremmo lasciato usare ad altre persone, ma è diventato così utile per noi che volevamo renderlo disponibile anche ad altre persone.

Quindi, di nuovo, come puoi vedere, l'attuale modo difficile di costruire uno schema non è l'ideale e non è un ottimo modo per fare le cose. Ecco perché abbiamo creato Pattern Manager, un'interfaccia utente per creare e mantenere raccolte di pattern all'interno di WordPress. Quindi lo passerò al mio collega, Mike Day, per guidarci attraverso il pattern manager e mostrarci tutte le fantastiche funzionalità al suo interno. Quindi tocca a te, Mike.

MIKE DAY: Ciao. Sono Mike. Sono un ingegnere del software presso WP Engine. I pattern sono un potente strumento per la creazione di layout che ha il potenziale per cambiare il gioco per i costruttori di WordPress. Ma come ha appena dimostrato Phil, l'esperienza nell'uso effettivo di questi schemi in termini di creazione e gestione è a dir poco carente. Pattern Manager mira a portare la gestione dei file di pattern in prima linea nel design di WordPress in modo semplice tramite un plug-in che può scorrere nel tuo flusso di lavoro. Facciamo un salto.

Per gli scopi iniziali di questa demo, lascerò la finestra dell'editor di codice aperta qui a destra. Questo è un vero e proprio file di pattern salvato direttamente sul mio disco. E voglio davvero portare a casa il punto che quando lavori con Pattern Manager, stai effettivamente manipolando e creando file fisici salvati sul tuo disco. Nello specifico, vengono salvati nella directory dei temi corrente. Quindi puoi vedere proprio qui questi due file PHP o file di pattern, rappresentano i pattern che sono attualmente attivi in ​​​​questa vista Patterns.

Inoltre, prendi nota di questa directory delle immagini. Phil ha sollevato un punto davvero interessante che in questo momento quando lavori con i pattern, diciamo che hai un mucchio di immagini salvate in un pattern. Tutti quegli URL per quelle particolari immagini punteranno alla tua installazione locale. Questo è un grosso problema ogni volta che arriva il momento di condividere effettivamente il tuo lavoro.

Tutte quelle immagini verranno interrotte. Quindi ci avviciniamo a questo in modo leggermente diverso. In realtà salviamo copie di queste immagini direttamente nella cartella del tema stesso. Questo è un punto di svolta per il controllo della versione, ad esempio. Supponiamo che tu e i tuoi collaboratori utilizziate Git. Ora puoi essere certo di avere tutti accesso alle stesse immagini mentre lavori.

OK. Quindi passiamo effettivamente all'interfaccia. Questa è la vista dei modelli. E subito qui, puoi vedere entrambi i modelli che sono registrati per il mio tema. Quando passi il mouse sopra l'anteprima di un motivo, nota i pulsanti di azione che si aprono. Abbiamo opzioni per modificare, duplicare o eliminare un determinato motivo. Ci sono anche alcune opzioni di filtro qui a sinistra, ma tornerò su questo tra poco. Per ora, entriamo e modifichiamo un pattern.

Quindi, sono sicuro che riconoscerai immediatamente un'interfaccia utente molto familiare. Questo è l'editor di blocchi di WordPress, in questo caso riproposto per fornire uno spazio specifico per lavorare con i pattern. E qui sulla destra, vedrai queste varie proprietà dell'intestazione. Ora, prima di addentrarmi in questi, voglio dare un po' più di contesto e utilizzare effettivamente del testo preso in prestito dalla documentazione per gli sviluppatori di WordPress.

La proprietà del titolo è abbastanza autoesplicativa. Questo è un ID frontale leggibile dall'uomo, se vuoi, che gli utenti vedranno quando interagiscono con il tuo modello su un sito. Le categorie sono realmente utilizzate per raggruppare i modelli insieme. Questa sarà una serie di categorie registrate in cui puoi aggiungerne una, o molte o addirittura nessuna, se lo desideri. Ma qui c'è un problema con il modo attuale in cui funziona in WordPress Core.

Non c'è davvero un ottimo modo per dire quali categorie sono effettivamente disponibili. Non c'è un punto ovvio per trovare effettivamente queste categorie di pattern di blocchi registrati ovunque sul tuo sito, almeno per quanto ne so. Ora le parole chiave possono essere considerate come termini di ricerca simili. In sostanza, puoi inserire questi alias descrittivi per descrivere il tuo modello in modo che qualunque cosa gli utenti stiano cercando nell'inseritore, possano trovare facilmente ciò di cui hanno bisogno. E la descrizione è una specie di estensione di quell'idea tranne che è un testo visivamente nascosto. Questo è davvero utile per gli utenti ipovedenti che potrebbero utilizzare uno screen reader.

Ora tornando a Pattern Manager, modifichiamo queste meta proprietà. Il titolo del modello è un semplice input di testo. Basta iniziare a digitare per rinominare il modello. Ma nota una caratteristica nascosta qui. Pattern manager mi dice che esiste già un pattern con questo titolo nel tema. Non voglio distruggere accidentalmente quel file, quindi lascerò solo il titolo.

OK. Scegliamo alcune categorie. Quindi, subito, nota che abbiamo reso questo elenco di categorie solo in un menu a discesa. Altrimenti, è difficile sapere dove trovare effettivamente questi dati. Ma questo elenco viene popolato dinamicamente tramite una chiamata API. Ciò significa che non solo tutte le categorie di schemi di blocchi registrati per il tuo tema, ma qualsiasi categoria che potresti aver registrato mostreremo qui. Scegliamo solo in primo piano per ora.

OK. E aggiungiamo alcuni termini ricercabili. Per gli scopi di questa demo, userò solo un modello di esempio. Ma ricorda che qui è dove potresti aggiungere termini che descrivono questo modello per gli utenti che stanno cercando nell'inseritore. E nota che qui ho usato un termine composto da più parole. Quelli sono supportati in Pattern Manager.

OK. E aggiungiamo una descrizione. Ricorda che questo è un testo visivamente nascosto. Quindi, secondo me, l'intento principale qui è quello di assistere gli screen reader. Quindi descriviamolo come tre colonne con i colori invertiti. OK. Perfetto. Mi sento come se fossimo a buon punto adesso. Possiamo effettivamente salvare il nostro lavoro. Ma prima di farlo, voglio che presti molta attenzione all'intestazione di questo file sulla destra. Ora, non appena premo Update Pattern, all'improvviso ci sono molti più dati qui. La descrizione, le categorie e le parole chiave che stavamo modificando sono apparse tutte qui senza che io debba toccare questo file.

OK. Diamo un'occhiata alle restanti meta proprietà. Quindi, prima di tutto, abbiamo una proprietà piuttosto interessante nella larghezza del viewport. Questo deve essere un numero intero che rappresenta la larghezza in scala per l'anteprima di questo motivo. Quindi, per impostazione predefinita, ogni volta che crei uno schema, diciamo che crei qualcosa di larghezza intera o forse anche molto stretto. Le impostazioni predefinite per questo in un WordPress Core potrebbero rendere il ridimensionamento un po' strano nelle anteprime.

Quindi tipi di post. Questo è semplicemente un array di slug di tipo post con cui il pattern deve essere utilizzato. Nota che l'aggiunta di valori qui limiterà effettivamente il modello, quindi funziona solo con quei tipi di post. Si noti inoltre che lasciare questo spazio vuoto farà sì che il pattern funzioni con tutti i tipi di post.

Successivamente abbiamo i tipi di blocco. Questo è un altro array, ma questa volta di tipi di blocco con cui il modello deve essere utilizzato. Ora devo ammettere che ogni volta che ho iniziato a utilizzare questi tipi di blocchi, l'ho trovato un po' confuso. Sembra che l'utilizzo sia davvero destinato a essere multiuso, ma secondo me l'intento alla base non è molto chiaro.

Infine, abbiamo la proprietà inserter. Ora, per impostazione predefinita, tutti i modelli appariranno nell'inseritore, ma supponiamo che tu voglia cambiarlo. Dovresti semplicemente aggiungere un valore booleano di false per questa proprietà e sarà nascosto dall'uso nell'inseritore.

Quindi, tornando a Pattern Manager, vediamo come gestiamo queste restanti meta proprietà. Prima di tutto, chiuderò questi altri pannelli. E diamo un'occhiata alla larghezza del viewport. Ora ricorda che questo è un valore intero che controlla semplicemente le anteprime ridimensionate per il tuo motivo nell'inseritore. Una cosa che è un problema con l'attuale implementazione di questo è in realtà vedere i risultati del tuo lavoro.

Quindi diciamo che modifico l'intestazione nel mio file di pattern e cambio la larghezza del viewport. L'unico modo per vedere effettivamente come appare è, ad esempio, creare un nuovo post. Questo diventa un po 'contorto. È solo un po' troppo complicato saltare avanti e indietro. È un po' un dolore. Quindi il modo in cui ci siamo avvicinati è semplicemente passare il mouse sopra il dispositivo di scorrimento e viene immediatamente mostrata un'anteprima. E mentre trascino e provo dimensioni diverse, posso vedere come questo modello si ridimensiona. Questo è davvero utile e un enorme risparmio di tempo. Scegliamo 1.200 per ora. E passiamo ai tipi di post.

La prima cosa da notare di questo pannello è la presenza di questi tooltip. Questi sono solo piccoli bocconcini di informazioni per cercare di guidarti sulla tua strada mentre usi l'app. Quindi, prima di tutto, questo è solo ribadire qualcosa che ho già discusso. Se non ci sono selezioni, se non ci sono tipi di post aggiunti all'intestazione del tuo file di pattern, il tuo pattern funzionerà per tutti i tipi di post. Ma nota in basso che c'è questa impostazione chiamata Visibilità modale.

Questa è una caratteristica nascosta davvero interessante. In sostanza, se hai il tipo corretto di tipo di blocco nell'intestazione del tuo file di pattern, ogni volta che gli utenti creano un nuovo post del tipo mirato, vedranno apparire un modale. E possono scegliere il tuo modello direttamente da quel modale. E ti mostrerò esattamente cosa intendo in un momento. Ma voglio che tu noti come questo interruttore sia effettivamente disabilitato. E questo perché le impostazioni di visibilità modale non funzioneranno a meno che non ci sia un tipo di post popolato.

Quindi il modo in cui ci avviciniamo è semplicemente disabilitando l'interruttore fino a quando non è presente un tipo di post. OK. Ora posso attivarlo. E il display e l'inseritore si alternano, fa quello che potresti immaginare. Se dovessi disattivarlo, questo assegnerebbe un valore di false nell'intestazione del tuo file. E questo schema non apparirebbe più nell'inseritore. OK. Andiamo avanti e aggiorniamo questo.

Ora vediamo come funziona effettivamente tutto questo in un post. Quindi passerò e creerò effettivamente un nuovo post. Ora subito questo è quel modale di cui parlavo in azione. Poiché il tipo di blocco e il tipo di post corretti vengono entrambi aggiunti al file, ora lo vedo subito quando creo un nuovo post. E posso semplicemente fare clic sull'anteprima del pattern e, boom, il mio pattern è proprio lì.

È piuttosto interessante, ma vediamo come funziona effettivamente il tagging. Quindi ecco la categoria che ho scelto, la caratteristica. E l'altro modello nel mio tema ha le categorie di colonne e testo, quindi funziona alla grande. E i miei termini di ricerca? Il mio termine di ricerca con modello di esempio. Funziona alla grande. E il mio testo nascosto è iniziato con tre colonne, anch'esse funzionanti esattamente come previsto. È fantastico.

OK. Quindi torniamo indietro e copriamo un'altra meta proprietà rimanente. Questo è un po' strano da spiegare. Sento che è più facile se invece te lo mostro. Quindi andiamo avanti e creiamo un nuovo schema. Tutto quello che devi fare è premere questo pulsante Crea nuovo modello. Ed eccomi di nuovo in redazione. In questo caso, sceglierò il blocco di codice. E in questo blocco di codice, incollerò del codice di esempio.

Ora questo è effettivamente preso dalla documentazione di WordPress. Questo è il modo in cui registreresti una trasformazione di blocco usando PHP. Quindi prenderesti questo codice e forse lo incolleresti in un file di funzioni, qualunque cosa tu preferisca. Lascia che ti mostri come ci avviciniamo a questo. In questa sezione del tipo di blocco trasformato, c'è un menu a discesa. Questo menu a discesa viene popolato dinamicamente proprio come i tipi di post e le categorie tramite una chiamata API.

Quindi posso semplicemente cercare il mio tipo mirato - eccolo, core/codice - e sceglierlo. Ora, solo per illustrare ancora una volta, la differenza sta nel modo in cui potresti farlo ora rispetto all'utilizzo di pattern manager. Per farlo ora, devo dare la caccia a questo blocco di codice, capire esattamente di quale contenuto potrei aver bisogno, capire il mio tipo di blocco e incollarlo da qualche parte, invece in Pattern Manager, ho appena scelto questo campo. Ho scelto questo valore da un menu a discesa. OK. Aggiorniamo questo. E creerò un nuovo post. E usciamo dal nostro modale.

Questa volta sceglierò anche il blocco di codice. Ma invece di popolarlo effettivamente con il contenuto, posso semplicemente scegliere questa opzione dalla barra degli strumenti. E nota questa selezione di modelli. Quando scelgo modelli, c'è il mio modello. E facendo clic su di esso, immediatamente questo blocco è stato trasformato nel mio modello di destinazione.

Un'altra cosa da trattare con i tipi di trasformazione è l'idea di ciò che viene chiamato pattern di blocchi semantici. Questi sono simili a una trasformazione del blocco ma mirati alle parti del modello. Ad esempio, intestazioni e piè di pagina. Ma c'è un trucco lì dentro. Una cosa da sapere sulla selezione del tipo di blocco della parte del modello di destinazione è che devi avere anche il tipo corretto di tipo di post assegnato o semplicemente non funzionerà. Quindi il modo in cui ci siamo avvicinati è semplicemente assegnando questo tipo di modelli per te. Ed è bloccato. E rimarrà bloccato fino a quando questo tipo di blocco non verrà effettivamente rimosso.

Quindi è tutto per la demo iniziale di questa vista dell'editor, ma ho bisogno di cambiare i temi in background qui. E ora tornerò alla visualizzazione Pattern. Il punto qui è mostrarti come si comporta Pattern Manager con molti pattern. Questo particolare tema ha oltre 50 modelli registrati.

Ora nota mentre clicco su queste varie categorie quanto immediatamente questi modelli vengono filtrati. Questo è davvero utile quando sto cercando di trovare ciò di cui ho bisogno tra una serie di schemi. Ma diciamo che vuoi un controllo più granulare. Basta iniziare a digitare. Questo filtro funziona in modo molto simile all'Inseritore. È davvero utile e davvero scattante. E parlando di scattante, un'altra cosa da sottolineare è quanto sia veloce questa interfaccia utente.

Nota come queste anteprime non vengono caricate fino a quando non le scorro effettivamente. Questa è un'implementazione personalizzata che è davvero ottima per risparmiare risorse del browser. E rende questa app veloce e molto scattante, indipendentemente dal numero di schemi che usi. Va bene. Abbiamo coperto molto terreno in questa presentazione, quindi ricapitoliamo rapidamente. I pattern rappresentano un'interessante intersezione tra la cura dei singoli elementi di contenuto e il design della pagina intera.

Come costruttore di WordPress, la possibilità di creare elementi di layout più grandi e riutilizzarli in un tema è un'idea interessante. Intestazioni, piè di pagina, testimonianze, riquadri delle funzionalità. Questi sono tutti tratti distintivi di ogni sito web. E ora puoi progettare facilmente l'intero sito con i modelli.

Ora, nonostante l'emergere di pattern come componente chiave dei temi a blocchi, lo stesso WordPress non ha un'interfaccia ufficiale per creare o gestire effettivamente questi pattern, né c'è nulla sulla roadmap. Invece, i costruttori devono creare modelli manualmente nel loro editor di codice, copiando e incollando il codice avanti e indietro dozzine di volte, lasciando molto spazio agli errori.

Il nostro prodotto, Pattern Manager, è progettato per inserirsi nel tuo flusso di lavoro. Installa e attiva semplicemente il plug-in e otterrai un'interfaccia utente moderna per filtrare modelli, creare, duplicare, modificare, eliminare e tutto questo insieme all'esperienza di modifica dei contenuti nell'esperienza familiare dell'utilizzo dell'editor principale di WordPress. Inoltre, molte complessità più difficili da comprendere relative alla corretta codifica di un file di pattern, ad esempio, l'aggiunta di categorie, parole chiave o forse anche la limitazione a lavorare solo con determinati tipi di post personalizzati, sono tutte astratte nella nostra interfaccia utente. I costruttori hanno il controllo completo su queste impostazioni tramite controlli della barra laterale facili da usare.

Pattern Manager è stato rilasciato ed è ora disponibile per il download all'URL riportato di seguito. Fai un giro e facci sapere i tuoi pensieri. E per favore sentiti libero di contattarmi personalmente e fammi sapere cosa ne pensi. Ci auguriamo che tu provi Pattern Manager. E speriamo che ti aiuti nello stesso modo in cui ha aiutato il nostro team di costruttori di WordPress. Grazie.