{"id":229144,"date":"2022-10-18T11:48:00","date_gmt":"2022-10-18T08:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229144"},"modified":"2022-11-09T05:42:13","modified_gmt":"2022-11-09T02:42:13","slug":"utilizzo-delleditor-blocchi-di-wordpress-gutenberg-con-lapi-rest","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/utilizzo-delleditor-blocchi-di-wordpress-gutenberg-con-lapi-rest\/","title":{"rendered":"Utilizzo dell’editor blocchi di WordPress (Gutenberg) con l’API REST"},"content":{"rendered":"\n

Nel mio precedente articolo ho parlato di come scorrere i post e i tipi di post personalizzati all’interno di Gutenberg<\/a>. In questo post parlo della ricezione e dell’utilizzo di dati personalizzati all’interno di Gutenberg dagli endpoint dell’API REST di WordPress.<\/p>\n

In questo esempio andremo a:<\/p>\n

L’API REST non \u00e8 sempre la strada giusta.<\/strong><\/p>\n

*Utilizziamo get_option<\/code>solo nell’API REST come esempio. Se hai solo bisogno dell’accesso a un’opzione e non intendi cambiarne lo stato, puoi invece utilizzare wp_localize_script<\/code>per passare le opzioni in JavaScript.<\/p>\n

Se vuoi accedere a un’opzione E cambiarne lo stato, ti consiglio di leggere la mia guida sulla memorizzazione di impostazioni e dati nella tabella delle opzioni con Gutenberg utilizzando l’API delle impostazioni<\/a> .*<\/p>\n

Creazione di un endpoint API REST<\/h2>\n

Creeremo un semplice endpoint API REST che restituisca il valore di un’opzione WordPress (usando get_option<\/code>).<\/p>\n

function wcltd_get_option() {\n    register_rest_route(\n        'wcltd\/wholesome-plugin\/v1',\n        '\/get\/option\/(?P<option>([A-Za-z0-9_])+)\/',\n        array(\n            'callback'            => function ($request) {\n                $option = isset( $request['option'] )? esc_attr( $request['option'] ): null;\n                $value  = get_option( $option, '' );\n                return $value;\n            },\n            'methods'             => 'GET',) );\n}\nadd_action( 'rest_api_init', 'wcltd_get_option' );\n<\/code><\/pre>\n
Dopo aver creato questo endpoint, assicurati di salvare nuovamente i tuoi permalink<\/strong> in modo che si attivino. Nota che ci sono modi migliori per farlo (come usare flush_rewrite_rules()<\/code>su register_activation_hook<\/code>), ma per questo esempio sar\u00e0 sufficiente un rapido salvataggio.<\/p>\n
Ora, quando passiamo l’URL \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/test\/<\/code>(ovviamente dopo il tuo dominio) nel nostro browser, restituir\u00e0 un valore, che pu\u00f2 essere una stringa vuota ''<\/code>o il valore dell’opzione se impostata.<\/p>\n
Il nostro endpoint, restituendo una stringa vuota<\/a> Il nostro endpoint, restituendo una stringa vuota<\/p>\n
Nota che ho commentato di proposito le righe 12-14, il che assicurerebbe che solo qualcuno che ha edit_post<\/code>i diritti possa eseguire il codice se lasciato dentro. Tuttavia con questo commento non possiamo testare il codice nel nostro browser.<\/p>\n
Prova ad aggiungere del codice per dare un valore alla tua opzione e guarda cosa restituisce. Ad esempio, se dovessi eseguire il seguente codice prima della mia funzione:<\/p>\n
update_option( 'wcltd_example_option', 'Hello World' );\n<\/code><\/pre>\n
Ora se raggiungo l’endpoint \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/wcltd_example_option\/<\/code>otterr\u00f2 il seguente output:<\/p>\n
Il nostro endpoint, restituendo alcuni dati.<\/p>\n
Registrazione di un archivio dati<\/h2>\n
Ora che abbiamo un endpoint API REST, possiamo creare un datastore con registerStore<\/code>.<\/p>\n
registerStore<\/code>fornisce un datastore simile a Redux, che ci consente di gestire lo stato nella nostra applicazione. Supporta anche i resolver, che ci consentono di popolare lo stato da un’origine esterna (come la nostra API REST).<\/p>\n
Puoi leggere di pi\u00f9 sullo stato REACT nella documentazione ufficiale<\/a>.<\/p>\n
Ecco come possiamo creare un negozio (come store.js<\/code>nel nostro progetto che ci consentir\u00e0 di estrarre i dati dal nostro endpoint API REST.<\/p>\n
Dipendenze<\/h3>\n
Avremo bisogno di estrarre apiFetch<\/code>e registerStore<\/code>dalle nostre dipendenze di WordPress.<\/p>\n
import apiFetch from '@wordpress\/api-fetch';\nimport { registerStore } from '@wordpress\/data';\n<\/code><\/pre>\n
Selettori<\/h3>\n
La prima cosa che vogliamo fare \u00e8 creare una funzione di selezione, in un oggetto chiamato ‘selettori’.<\/p>\n
Tutto ci\u00f2 che fa \u00e8 estrarre l ‘"opzione" dallo stato e restituirla.<\/p>\n
const selectors = {\n    getOption( state, optionKey) {\n        const { option } = state;\n        return option;\n    },\n};\n<\/code><\/pre>\n
Risolutori<\/h3>\n
Il resolver \u00e8 un effetto collaterale del selettore e fa un po’ di pi\u00f9.<\/p>\n
Qui creiamo la nostra funzione che prende la nostra optionKey e passa un endpoint API REST alle nostre azioni (che definiremo in seguito).<\/p>\n
Questo quindi imposta l’opzione, con un altro invito alle nostre azioni.<\/p>\n
const resolvers = {\n    *getOption( optionKey) {\n        const option = yield actions.getOption(\n            '\/wcltd\/wholesome-plugin\/v1\/get\/option\/' + optionKey + '\/',\n        );\n        return actions.setOption( option );\n    },\n};\n<\/code><\/pre>\n
Azioni<\/h3>\n
Le due funzioni in un oggetto denominato actions<\/code>che abbiamo chiamato in precedenza sono definite qui.<\/p>\n
Indicano quale controllo o riduttore utilizzeremo per impostare o ottenere il valore.<\/p>\n
const actions = {\n    setOption( option) {\n        return {\n            type: 'SET_OPTION',\n            option,\n        };\n    },\n    getOption( path) {\n        return {\n            type: 'GET_OPTION',\n            path,\n        };\n    },\n};\n<\/code><\/pre>\n
Controlli<\/h3>\n
Nei nostri controlli abbiamo GET_OPTION<\/code>che effettua la chiamata API utilizzando apiFetch<\/code>e il percorso che abbiamo definito in precedenza.<\/p>\n
const controls = {\n    GET_OPTION( action) {\n        return apiFetch( { path: action.path } );\n    },\n};\n<\/code><\/pre>\n
Riduttore<\/h3>\n
Nella nostra funzione riduttore abbiamo SET_OPTION<\/code>che prende il nostro valore (in questo caso option<\/code>, e ne imposta lo stato.<\/p>\n
function reducer( state = { option: '' }, action) {\n    switch (action.type) {\n        case 'SET_OPTION':\n            return {\n                ...state,\n                option: action.option,\n            };\n    }\n    return state;\n};\n<\/code><\/pre>\n
Registrazione del negozio<\/h3>\n
Infine, registriamo un negozio, gli diamo uno spazio dei nomi in modo da potervi accedere e passiamo un oggetto di tutti gli oggetti e le funzioni sopra indicati.<\/p>\n
const store = registerStore(\n    'wcltd\/wholesome-plugin\/data',\n    {\n        actions,\n        controls,\n        reducer,\n        resolvers,\n        selectors,\n    }\n);\n\nexport default store;\n<\/code><\/pre>\n
esporta il negozio predefinito;<\/p>\n
Utilizzo dei dati con un blocco<\/h2>\n
Espandiamo il blocco creato dallo @wordpress\/create-block<\/code>script, di cui ho scritto in precedenza<\/a> per consentirci di connetterci a un endpoint API REST.<\/p>\n
Crea un file nella \/src<\/code>cartella chiamata store.js<\/code>e copiaci tutto il codice sopra:<\/p>\n
import apiFetch from '@wordpress\/api-fetch';\nimport { registerStore } from '@wordpress\/data';\n\nconst selectors = {\n    getOption( state, optionKey) {\n        const { option } = state;\n        return option;\n    },\n};\n\nconst resolvers = {\n    *getOption( optionKey) {\n        const option = yield actions.getOption(\n            '\/wcltd\/wholesome-plugin\/v1\/get\/option\/' + optionKey + '\/',\n        );\n        return actions.setOption( option );\n    },\n};\n\nconst actions = {\n    setOption( option) {\n        return {\n            type: 'SET_OPTION',\n            option,\n        };\n    },\n    getOption( path) {\n        return {\n            type: 'GET_OPTION',\n            path,\n        };\n    },\n};\n\nconst controls = {\n    GET_OPTION( action) {\n        return apiFetch( { path: action.path } );\n    },\n};\n\nfunction reducer( state = { option: '' }, action) {\n    switch (action.type) {\n        case 'SET_OPTION':\n            return {\n                ...state,\n                option: action.option,\n            };\n    }\n    return state;\n};\n\nconst store = registerStore(\n    'wcltd\/wholesome-plugin\/data',\n    {\n        actions,\n        controls,\n        reducer,\n        resolvers,\n        selectors,\n    }\n);\n\nexport default store;\n<\/code><\/pre>\n
Ora modifica il nostro \/src\/index.js<\/code>file per includere il store.js<\/code>file:<\/p>\n
\nimport store from '.\/store';\nimport Edit from '.\/edit';\nimport save from '.\/save';\n<\/code><\/pre>\n
Dobbiamo anche assicurarci di aver incluso withSelect<\/code>nella parte superiore del nostro file:<\/p>\n
import { withSelect } from '@wordpress\/data';\n<\/code><\/pre>\n
Quindi avvolgiamo il nostro modulo Modifica con withSelect<\/code>per effettuare la chiamata API REST alla nostra opzione, in questo modo:<\/p>\n
\nedit: withSelect( (select) => {\n    const option = select( 'wcltd\/wholesome-plugin\/data' ).getOption( 'wcltd_example_option' );\n    return {\n        option,\n    };\n} )( Edit ),\n<\/code><\/pre>\n
Ora possiamo accedere option<\/code>ai nostri oggetti di scena all’interno di edit.js<\/code>, in questo modo:<\/p>\n
export default function Edit( { className, option }) {\n    return (<p className={ className }>\n            { option }\n        <\/p>\n    );\n}\n<\/code><\/pre>\n
Infine, vediamo il nostro blocco nell’editor e vediamo cosa otteniamo:<\/p>\n
L’output nell’editor di blocchi.<\/a> L’output nell’editor di blocchi.<\/p>\n
Fonte di registrazione:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Nel mio precedente articolo ho parlato di come scorrere i post e i tipi di post personalizzati all’interno di Gutenberg. In questo post parlo della ricezione e dell’utilizzo di dati personalizzati all’interno di Gutenberg f…<\/p>\n","protected":false},"author":1,"featured_media":220671,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,896,720,865],"tags":[1168],"class_list":["post-229144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-sviluppatore","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229144","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=229144"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229144\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/220671"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}