In questa parte vedremo come definire gli attributi, recuperare i loro valori e aggiornarli. Con gli attributi possiamo accettare l’input dall’editor, salvarlo ed emetterlo come vogliamo. Nel passaggio precedente abbiamo esaminato i componenti di WordPress, dove trovarli e come implementarli. In questo post aggiungeremo gli oggetti di scena per effettuare la connessione agli attributi: i dati salvati.
Definizione degli attributi
Gli attributi vengono aggiunti come oggetti in una matrice alla attributesproprietà in registerBlockType(). La chiave di ogni attributo è il nome dell’attributo e devi avere almeno la proprietà type.
La typeproprietà può essere una delle seguenti; null, boolean, object, array, number, string, o integer.
Puoi facoltativamente fornire la proprietà defaultper definire il valore iniziale del tuo attributo. Se non fornisci un valore predefinito, l’attributo verrà impostato automaticamente su null.
Un’altra proprietà dell’attributo è sourceche funziona insieme alla selectorproprietà, ma queste sono cose delicate che esamineremo in dettaglio più in basso.
Ad esempio, definendo due attributi; exampleTextcome stringa e postIdscome array, sarebbe simile a questo:
Tutto ciò di cui hai bisogno salvato per il tuo blocco (input dall’utente/editor) richiede un attributo. Sta a te decidere come strutturare i tuoi dati, definendo attributi separati per ciascuno o raggruppandoli tutti in un oggetto. Sarà solo una differenza nel modo in cui recuperi i loro dati e come li aggiorni.
Ottenere i valori degli attributi
Gli attributi sono disponibili come supporto per i blocchi edite le savefunzioni. Se hai seguito questa serie dal passaggio precedente, ricorda che abbiamo aggiornato le funzioni per passare props come parametro.
È comune destrutturare gli attributi dagli oggetti di scena poiché di solito ti riferisci spesso a loro. Ad esempio, l’output di un attributo chiamato exampleTextsarebbe simile a questo:
Aggiornamento dei valori degli attributi
Per aggiornare gli attributi abbiamo un metodo disponibile in props, chiamato setAttributes(). Questa funzione accetta un oggetto in cui puoi aggiungere qualsiasi attributo che desideri aggiornare. Puoi aggiornare solo un attributo, più o tutti in una volta. Se sono stati definiti più attributi e si chiama setAttributes()per aggiornarne solo uno, gli altri non vengono toccati.
Se hai esperienza con React, probabilmente riconoscerai immediatamente le somiglianze tra setAttributes()e setState(). Funzionano esattamente allo stesso modo, ma la differenza è che lo stato in React è solo qualcosa memorizzato localmente in quel componente e gli attributi vengono effettivamente salvati come dati all’esterno del componente.
Per aggiornare un attributo, di solito distruggi la funzione dagli oggetti di scena e la chiami in questo modo: Di seguito aggiorniamo exampleTextl’attributo in modo che sia "Ciao".
const { setAttributes } = props;
setAttributes({ exampleText: 'Hi' });Naturalmente eseguiresti setAttributes()dall’interno di qualche azione. Un esempio comune è all’interno del onChangeprop su una sorta di campo di input utilizzato per memorizzare il valore exampleTextdell’attributo.
Assicurati di salvare gli attributi nel tipo che hai definito nell’attributo. Ad esempio, non avrai fortuna a provare a salvare oggetti in un attributo di stringa.
Proviamolo in pratica! Inizia npm run startse non l’hai già fatto.
Visualizzazione di un attributo in un input di testo personalizzato e aggiornamento del valore dell’attributo
Nel passaggio precedente abbiamo aggiunto alcuni componenti in edit, ad esempio un input di testo, ma non è stato memorizzato nulla. Aggiungiamo un attributo e un input di testo per esso nel nostro blocco. Ci assicureremo entrambi che l’input di testo mostri il valore corrente e ogni volta che l’input viene modificato aggiorniamo l’attributo.
Aggiunta dell’input di testo e del suo onChangeprop
Destrutturiamo attributese setAttributesda propscome useremo entrambi. Quindi utilizziamo un componente dal pacchetto TextControldi WordPress. wp.componentsGli passiamo due puntelli; valueimposterà il valore dell’input (sia inizialmente che durante la digitazione) e un’azione sull’evento dell’input onChange.
In valuelo impostiamo sul valore del nostro attributo; attributes.exampleText. Nel onChangecaso in cui eseguiamo una funzione, passando il valore digitato del nostro input come parametro, newtext(il valore di input è un prop che viene restituito dal componente). In quella funzione chiamiamo setAttributes()e aggiorniamo l’attributo exampleTexta ciò che è stato digitato nell’input.
Questo è React di base, a parte il fatto che lavoriamo con gli attributi e non con lo stato. Se quanto sopra ti ha confuso, ti consiglio di guardare un breve tutorial in React, poiché questi probabilmente spiegheranno in questo modo meglio di me!
Aggiorna il tuo editor e guarda come funziona il blocco! Dovresti ottenere un input di testo standard per digitare le cose e verrà salvato ogni volta che premi Salva/Aggiorna nella modifica del post.
Il risultato nel frontend e nel database
Se visualizzi il tuo post nel frontend, dovrebbe comunque fare eco a un div con ":)" perché è quello che abbiamo ancora nella nostra savefunzione. Ma qualcosa è successo dietro le quinte! Il blocco dei commenti del nostro blocco ora contiene il valore del nostro attributo in JSON.
Non puoi vedere i blocchi di commenti in un modello che esegue una the_content()chiamata normale. Per vedere i blocchi di commenti hai due opzioni. O guarda post_contentnella tabella del database dei post. Oppure aggiungi echo get_the_content()il modello e guardalo nello strumento Ispeziona/debug.
Ovviamente abbiamo accesso anche agli attributi save, dagli oggetti di scena.
Visualizzazione del valore dell’input insave
Mostriamo il valore dell’attributo all’interno di un div nella nostra savefunzione:
Nota: dopo aver apportato questa modifica, riceverai un blocco rotto nel post a cui hai già aggiunto questo blocco. Ciò accade perché l’editor incontra un output diverso saveda quello che abbiamo definito ora. Rimuovere il blocco e aggiungerlo nuovamente. Inserisci qualcosa nel tuo input di testo, aggiorna il post e visualizzalo nel frontend.
E questo è il succo della cosa in realtà. Decidi tu quali attributi ti servono per salvare ciò che vuoi nel tuo blocco. In editverrà eseguito il rendering dei modi per l’immissione dell’utente, facendo attenzione che i valori correnti vengano visualizzati e aggiornandoli ogni volta che cambiano. E in saveestrai gli attributi salvati e esegui il rendering dell’output come desideri.
Toccheremo componenti e attributi molto più diversi mentre andiamo in questa serie di tutorial. Ma diamo un’occhiata a un altro componente in questo post per vedere di cosa tratta la proprietà dell’attributo source.
RichText e la proprietà dell’attributosource
Il componente di WordPress RichTextti offre un’area di testo "senza bordi" con supporto per la formattazione del testo. Potresti preferire usare questo invece di un (brutto?) input di testo standard o textarea. Ma tieni presente che RichTextdeve essere gestito in modo leggermente diverso poiché ci sono diversi oggetti di cui devi essere consapevole e c’è una differenza nel modo in cui otteniamo il valore nella nostra savefunzione.
Aggiunta di un RichTextcomponente
La forma più semplice RichTextè implementarlo come faresti con un input di testo:
Destrutturiamo il RichTextcomponente dal wp.blockEditorpacchetto, ma per il resto quanto sopra è identico a quello che abbiamo fatto con l’input di testo standard.
Gestire saveconRichText
Tuttavia nella savefunzione è necessario utilizzare RichTextnuovamente il componente per ottenere il valore dell’attributo. Chiamiamo RichText.Contente impostiamo l’elica valuesul nostro attributo:
Questo produrrà tutto ciò che è stato digitato RichTextnell’editor direttamente senza alcun HTML avvolto.
Quando lavori con RichTextte molto probabilmente vuoi controllare il wrapper HTML attorno al testo, ad esempio a <p>o a <h2>, sia nel frontend che nell’editor. Per questo possiamo usare un oggetto chiamato tagName.
Il componente RichTextconsente anche molti altri oggetti di scena. Puoi definire un testo segnaposto che viene mostrato (sbiadito) quando è vuoto con l’ placeholderelica. Il componente consente inoltre di controllare quali opzioni di formattazione consente il campo (quali pulsanti mostra nella barra degli strumenti).
RichTextinsieme atagName
Con il prop tagNamepuoi predefinire in quale tag HTML viene racchiuso il suo output. Quando lo usi tagNamedovresti usare lo stesso tagNameprop e lo stesso valore in entrambi edite save.
Supponiamo di voler inserire il valore del tuo attributo in a <h2>, che nell’editor forzerà qualsiasi input a essere un h2. In editpuoi fare:
E in save:
Quanto sopra ora produrrà tutto ciò che è stato digitato RichTextnell’area all’interno di un <h2>tag.
Usandosource
Ovviamente puoi combinare più richtext per un blocco, ad esempio uno per l’intestazione e uno per un paragrafo. Ricorda solo che ognuno avrà bisogno del proprio attributo. Per esempio:
Tuttavia, a questo punto inizierai a riscontrare alcuni problemi. Anche se puoi eseguire la formattazione del testo nell’editor, nulla (o parte) della tua formattazione non verrà salvato. Quando visualizzi il post nel frontend, uscirà semplicemente come h2e un p, senza alcuna formattazione che hai fatto (corsivo, grassetto, link). Nemmeno il blocco commenti per il tuo blocco contiene la formattazione. Questa è la cosa difficile con RichText. Per risolvere questo problema, dobbiamo lavorare con la proprietà dell’attributo source.
La sourceproprietà che consente a WordPress di estrarre e interpretare il contenuto direttamente dal contenuto del post. Se un attributo non ha sourceset, verrà salvato ed estratto dal blocco commenti HTML.
Quando si lavora con RichTextdi solito si imposta sourcesu html, che utilizza la libreria di WordPress per analizzare il markup HTML. La proprietà sourcefunziona insieme a un’altra proprietà dell’attributo; selectorche definisce da quale tag HTML deve essere estratto.
Ad esempio, impostiamo sourcecome htmlnel nostro paragrafo RichTexte impostiamo selectorcome p(altrimenti il valore predefinito è root of block the block).
attributes: {
...
myRichText: {
type: 'string',
source: 'html',
selector: 'p'
}
},Ora il nostro secondo RichTextdovrebbe salvare con successo tutta la sua formattazione del testo. Noterai anche che il blocco dei commenti ora mostra solo l’ myRichHeadingattributo in JSON. L’attributo myRichTextè completamente scomparso dal blocco commenti. Questo perché con sourceWordPress ora analizza il contenuto del post anziché il blocco dei commenti per il valore dell’attributo.
Ad essere assolutamente onesto, non ho lavorato molto con l’ sourceattributo e consiglierei di evitarlo se possibile. La documentazione di WordPress spiega qualcosa in più sull’origine e sugli attributi di cui si desidera verificare di persona.
In questo post abbiamo appreso le nozioni di base sugli attributi; come definirli, aggiornarli ed emettere i loro valori. Nei passaggi successivi esamineremo componenti più diversi e come aggiungere impostazioni al di fuori del contenuto del blocco stesso; nella barra degli strumenti e nella barra laterale dell’editor (denominata Inspector).