{"id":234013,"date":"2023-02-27T13:22:00","date_gmt":"2023-02-27T10:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234013"},"modified":"2022-11-11T13:53:13","modified_gmt":"2022-11-11T10:53:13","slug":"crea-un-blocco-gutenberg-personalizzato-parte-4-attributi","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/crea-un-blocco-gutenberg-personalizzato-parte-4-attributi\/","title":{"rendered":"Crea un blocco Gutenberg personalizzato – Parte 4: Attributi"},"content":{"rendered":"\n

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<\/a> 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.<\/p>\n

Definizione degli attributi<\/h2>\n

Gli attributi vengono aggiunti come oggetti in una matrice alla attributes<\/code>propriet\u00e0 in registerBlockType()<\/code>. La chiave di ogni attributo \u00e8 il nome dell’attributo e devi avere almeno la propriet\u00e0 type<\/code>.<\/p>\n

La type<\/code>propriet\u00e0 pu\u00f2 essere una delle seguenti; null<\/code>, boolean<\/code>, object<\/code>, array<\/code>, number<\/code>, string<\/code>, o integer<\/code>.<\/p>\n

Puoi facoltativamente fornire la propriet\u00e0 default<\/code>per definire il valore iniziale del tuo attributo. Se non fornisci un valore predefinito, l’attributo verr\u00e0 impostato automaticamente su null<\/code>.<\/p>\n

Un’altra propriet\u00e0 dell’attributo \u00e8 source<\/code>che funziona insieme alla selector<\/code>propriet\u00e0, ma queste sono cose delicate che esamineremo in dettaglio pi\u00f9 in basso.<\/p>\n

Ad esempio, definendo due attributi; exampleText<\/code>come stringa e postIds<\/code>come array, sarebbe simile a questo:<\/p>\n

const { registerBlockType } = wp.blocks;\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        },\n        postIds: {\n            type: 'array'\n            default: []\n        }\n    },\n    edit: (props) => { \n    ...<\/code><\/pre>\n
Tutto ci\u00f2 di cui hai bisogno salvato per il tuo blocco (input dall’utente\/editor) richiede un attributo<\/strong>. Sta a te decidere come strutturare i tuoi dati, definendo attributi separati per ciascuno o raggruppandoli tutti in un oggetto. Sar\u00e0 solo una differenza nel modo in cui recuperi i loro dati e come li aggiorni.<\/p>\n
Ottenere i valori degli attributi<\/h2>\n
Gli attributi sono disponibili come supporto per i blocchi edit<\/code>e le save<\/code>funzioni. Se hai seguito questa serie dal passaggio precedente<\/a>, ricorda che abbiamo aggiornato le funzioni per passare props come parametro.<\/p>\n
\u00c8 comune destrutturare<\/strong> gli attributi dagli oggetti di scena poich\u00e9 di solito ti riferisci spesso a loro. Ad esempio, l’output di un attributo chiamato exampleText<\/code>sarebbe simile a questo:<\/p>\n
edit: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n},<\/code><\/pre>\n
Aggiornamento dei valori degli attributi<\/h2>\n
Per aggiornare gli attributi abbiamo un metodo disponibile in props, chiamato setAttributes()<\/code>. Questa funzione accetta un oggetto in cui puoi aggiungere qualsiasi attributo che desideri aggiornare. Puoi aggiornare solo un attributo, pi\u00f9 o tutti in una volta. Se sono stati definiti pi\u00f9 attributi e si chiama setAttributes()<\/code>per aggiornarne solo uno, gli altri non vengono toccati.<\/p>\n
Se hai esperienza con React, probabilmente riconoscerai immediatamente le somiglianze tra setAttributes()<\/code>e setState()<\/code>. Funzionano esattamente allo stesso modo, ma la differenza \u00e8 che lo stato in React \u00e8 solo qualcosa memorizzato localmente in quel componente e gli attributi vengono effettivamente salvati come dati all’esterno del componente.<\/p>\n
Per aggiornare un attributo, di solito distruggi la funzione dagli oggetti di scena e la chiami in questo modo: Di seguito aggiorniamo exampleText<\/code>l’attributo in modo che sia "Ciao".<\/p>\n
const { setAttributes } = props;\nsetAttributes({ exampleText: 'Hi' });<\/code><\/pre>\n
Naturalmente eseguiresti setAttributes()<\/code>dall’interno di qualche azione. Un esempio comune \u00e8 all’interno del onChange<\/code>prop su una sorta di campo di input utilizzato per memorizzare il valore exampleText<\/code>dell’attributo.<\/p>\n
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.<\/p>\n
Proviamolo in pratica! Inizia npm run start<\/code>se non l’hai gi\u00e0 fatto.<\/p>\n
Visualizzazione di un attributo in un input di testo personalizzato e aggiornamento del valore dell’attributo<\/h2>\n
Nel passaggio precedente abbiamo aggiunto alcuni componenti in edit<\/code>, ad esempio un input di testo, ma non \u00e8 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.<\/p>\n
Aggiunta dell’input di testo e del suo onChange<\/code>prop<\/h3>\n
const { registerBlockType } = wp.blocks;\nconst { TextControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <TextControl \n                    value={attributes.exampleText}\n                    onChange={(newtext) => setAttributes({ exampleText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    save:() => { \n        return <div>:)<\/div> \n    }\n});<\/code><\/pre>\n
Destrutturiamo attributes<\/code>e setAttributes<\/code>da props<\/code>come useremo entrambi. Quindi utilizziamo un componente dal pacchetto TextControl<\/code>di WordPress. wp.components<\/code>Gli passiamo due puntelli; value<\/code>imposter\u00e0 il valore dell’input (sia inizialmente che durante la digitazione) e un’azione sull’evento dell’input onChange<\/code>.<\/p>\n
In value<\/code>lo impostiamo sul valore del nostro attributo; attributes.exampleText<\/code>. Nel onChange<\/code>caso in cui eseguiamo una funzione, passando il valore digitato del nostro input come parametro, newtext<\/code>(il valore di input \u00e8 un prop che viene restituito dal componente). In quella funzione chiamiamo setAttributes()<\/code>e aggiorniamo l’attributo exampleText<\/code>a ci\u00f2 che \u00e8 stato digitato nell’input.<\/p>\n
Questo \u00e8 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\u00e9 questi probabilmente spiegheranno in questo modo meglio di me!<\/p>\n
Aggiorna il tuo editor e guarda come funziona il blocco! Dovresti ottenere un input di testo standard per digitare le cose e verr\u00e0 salvato ogni volta che premi Salva\/Aggiorna nella modifica del post.<\/p>\n
Il risultato nel frontend e nel database<\/h3>\n
Se visualizzi il tuo post nel frontend, dovrebbe comunque fare eco a un div con ":)" perch\u00e9 \u00e8 quello che abbiamo ancora nella nostra save<\/code>funzione. Ma qualcosa \u00e8 successo dietro le quinte! Il blocco dei commenti del nostro blocco ora contiene il valore del nostro attributo in JSON.<\/p>\n
\"Crea<\/a><\/p>\n
Non puoi vedere i blocchi di commenti in un modello che esegue una the_content()<\/code>chiamata normale. Per vedere i blocchi di commenti hai due opzioni. O guarda post_content<\/code>nella tabella del database dei post. Oppure aggiungi echo get_the_content()<\/code>il modello e guardalo nello strumento Ispeziona\/debug.<\/p>\n
Ovviamente abbiamo accesso anche agli attributi save<\/code>, dagli oggetti di scena.<\/p>\n
Visualizzazione del valore dell’input insave<\/code><\/h3>\n
Mostriamo il valore dell’attributo all’interno di un div nella nostra save<\/code>funzione:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n}<\/code><\/pre>\n
Nota: dopo aver apportato questa modifica, riceverai un blocco rotto nel post a cui hai gi\u00e0 aggiunto questo blocco. Ci\u00f2 accade perch\u00e9 l’editor incontra un output diverso save<\/code>da 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.<\/p>\n
E questo \u00e8 il succo della cosa in realt\u00e0. Decidi tu quali attributi ti servono per salvare ci\u00f2 che vuoi nel tuo blocco. In edit<\/code>verr\u00e0 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 save<\/code>estrai gli attributi salvati e esegui il rendering dell’output come desideri.<\/p>\n
Toccheremo componenti e attributi molto pi\u00f9 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\u00e0 dell’attributo source<\/code>.<\/p>\n
RichText e la propriet\u00e0 dell’attributosource<\/code><\/h2>\n
Il componente di WordPress RichText<\/code>ti 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 RichText<\/code>deve essere gestito in modo leggermente diverso poich\u00e9 ci sono diversi oggetti di cui devi essere consapevole e c’\u00e8 una differenza nel modo in cui otteniamo il valore nella nostra save<\/code>funzione.<\/p>\n
Aggiunta di un RichText<\/code>componente<\/h3>\n
La forma pi\u00f9 semplice RichText<\/code>\u00e8 implementarlo come faresti con un input di testo:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    attributes: {\n        myRichText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <RichText \n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    ...<\/code><\/pre>\n
Destrutturiamo il RichText<\/code>componente dal wp.blockEditor<\/code>pacchetto, ma per il resto quanto sopra \u00e8 identico a quello che abbiamo fatto con l’input di testo standard.<\/p>\n
Gestire save<\/code>conRichText<\/code><\/h3>\n
Tuttavia nella save<\/code>funzione \u00e8 necessario utilizzare RichText<\/code>nuovamente il componente per ottenere il valore dell’attributo. Chiamiamo RichText.Content<\/code>e impostiamo l’elica value<\/code>sul nostro attributo:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
Questo produrr\u00e0 tutto ci\u00f2 che \u00e8 stato digitato RichText<\/code>nell’editor direttamente senza alcun HTML avvolto.<\/p>\n
Quando lavori con RichText<\/code>te molto probabilmente vuoi controllare il wrapper HTML attorno al testo, ad esempio a <p><\/code>o a <h2><\/code>, sia nel frontend che nell’editor. Per questo possiamo usare un oggetto chiamato tagName<\/code>.<\/p>\n
Il componente RichText<\/code>consente anche molti altri oggetti di scena. Puoi definire un testo segnaposto che viene mostrato (sbiadito) quando \u00e8 vuoto con l’ placeholder<\/code>elica. Il componente consente inoltre di controllare quali opzioni di formattazione consente il campo (quali pulsanti mostra nella barra degli strumenti).<\/p>\n
RichText<\/code>insieme atagName<\/code><\/h3>\n
Con il prop tagName<\/code>puoi predefinire in quale tag HTML viene racchiuso il suo output. Quando lo usi tagName<\/code>dovresti usare lo stesso tagName<\/code>prop e lo stesso valore in entrambi edit<\/code>e save<\/code>.<\/p>\n
Supponiamo di voler inserire il valore del tuo attributo in a <h2><\/code>, che nell’editor forzer\u00e0 qualsiasi input a essere un h2. In edit<\/code>puoi fare:<\/p>\n
<RichText \n    tagName=\"h2\"\n    placeholder=\"Write your heading here\"\n    value={attributes.myRichText}\n    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n\/><\/code><\/pre>\n
E in save<\/code>:<\/p>\n
<RichText.Content \n    tagName=\"h2\"\n    value={attributes.myRichText}\n\/><\/code><\/pre>\n
Quanto sopra ora produrr\u00e0 tutto ci\u00f2 che \u00e8 stato digitato RichText<\/code>nell’area all’interno di un <h2><\/code>tag.<\/p>\n
Usandosource<\/code><\/h3>\n
Ovviamente puoi combinare pi\u00f9 richtext per un blocco, ad esempio uno per l’intestazione e uno per un paragrafo. Ricorda solo che ognuno avr\u00e0 bisogno del proprio attributo. Per esempio:<\/p>\n
attributes: {\n    myRichHeading: {\n        type: 'string'\n    },\n    myRichText: {\n        type: 'string'\n    }\n},\nedit: (props) => { \n    const { attributes, setAttributes } = props;\n    return (<div>\n            <RichText \n                tagName=\"h2\"\n                placeholder=\"Write your heading here\"\n                value={attributes.myRichHeading}\n                onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n            \/>\n            <RichText\n                tagName=\"p\"\n                placeholder=\"Write your paragraph here\"\n                value={attributes.myRichText}\n                onChange={(newtext) => setAttributes({ myRichText: newtext })}\n            \/>\n        <\/div>\n    );\n},\nsave: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                tagName=\"h2\"\n                value={attributes.myRichHeading}\n            \/>\n            <RichText.Content \n                tagName=\"p\"\n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
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\u00e0 salvato. Quando visualizzi il post nel frontend, uscir\u00e0 semplicemente come h2<\/code>e un p<\/code>, senza alcuna formattazione che hai fatto (corsivo, grassetto, link). Nemmeno il blocco commenti per il tuo blocco contiene la formattazione. Questa \u00e8 la cosa difficile con RichText<\/code>. Per risolvere questo problema, dobbiamo lavorare con la propriet\u00e0 dell’attributo source<\/code>.<\/p>\n
La source<\/code>propriet\u00e0 che consente a WordPress di estrarre e interpretare il contenuto direttamente dal contenuto del post. Se un attributo non ha source<\/code>set, verr\u00e0 salvato ed estratto dal blocco commenti HTML.<\/p>\n
Quando si lavora con RichText<\/code>di solito si imposta source<\/code>su html<\/code>, che utilizza la libreria di WordPress per analizzare il markup HTML. La propriet\u00e0 source<\/code>funziona insieme a un’altra propriet\u00e0 dell’attributo; selector<\/code>che definisce da quale tag HTML deve essere estratto.<\/p>\n
Ad esempio, impostiamo source<\/code>come html<\/code>nel nostro paragrafo RichText<\/code>e impostiamo selector<\/code>come p<\/code>(altrimenti il \u200b\u200bvalore predefinito \u00e8 root of block the block).<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n        source: 'html',\n        selector: 'p'\n    }\n},<\/code><\/pre>\n
Ora il nostro secondo RichText<\/code>dovrebbe salvare con successo tutta la sua formattazione del testo. Noterai anche che il blocco dei commenti ora mostra solo l’ myRichHeading<\/code>attributo in JSON. L’attributo myRichText<\/code>\u00e8 completamente scomparso dal blocco commenti. Questo perch\u00e9 con source<\/code>WordPress ora analizza il contenuto del post anzich\u00e9 il blocco dei commenti per il valore dell’attributo.<\/p>\n
\"Crea<\/a><\/p>\n
Ad essere assolutamente onesto, non ho lavorato molto con l’ source<\/code>attributo e consiglierei di evitarlo se possibile. La documentazione di WordPress spiega qualcosa in pi\u00f9 sull’origine e sugli attributi<\/a> di cui si desidera verificare di persona.<\/p>\n
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\u00f9 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).<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
In questa lezione di Gutenberg per principianti vedremo come definire gli attributi, recuperarne i valori e aggiornarli.<\/p>\n","protected":false},"author":1,"featured_media":151358,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[939,939,1110,814,814,844,844,865,865],"tags":[1168],"class_list":["post-234013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-6","category-n-a","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/234013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=234013"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/234013\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/151358"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=234013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=234013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=234013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}