Utilizzo dell’editor blocchi di WordPress (Gutenberg) con l’API REST
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 dagli endpoint dell’API REST di WordPress.
In questo esempio andremo a:
L’API REST non è sempre la strada giusta.
*Utilizziamo get_optionsolo 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_scriptper passare le opzioni in JavaScript.
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 .*
Creazione di un endpoint API REST
Creeremo un semplice endpoint API REST che restituisca il valore di un’opzione WordPress (usando get_option).
function wcltd_get_option() {
register_rest_route(
'wcltd/wholesome-plugin/v1',
'/get/option/(?P<option>([A-Za-z0-9_])+)/',
array(
'callback' => function ($request) {
$option = isset( $request['option'] )? esc_attr( $request['option'] ): null;
$value = get_option( $option, '' );
return $value;
},
'methods' => 'GET',) );
}
add_action( 'rest_api_init', 'wcltd_get_option' );
Dopo aver creato questo endpoint, assicurati di salvare nuovamente i tuoi permalink in modo che si attivino. Nota che ci sono modi migliori per farlo (come usare flush_rewrite_rules()su register_activation_hook), ma per questo esempio sarà sufficiente un rapido salvataggio.
Ora, quando passiamo l’URL /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(ovviamente dopo il tuo dominio) nel nostro browser, restituirà un valore, che può essere una stringa vuota ''o il valore dell’opzione se impostata.
Il nostro endpoint, restituendo una stringa vuota Il nostro endpoint, restituendo una stringa vuota
Nota che ho commentato di proposito le righe 12-14, il che assicurerebbe che solo qualcuno che ha edit_posti diritti possa eseguire il codice se lasciato dentro. Tuttavia con questo commento non possiamo testare il codice nel nostro browser.
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:
update_option( 'wcltd_example_option', 'Hello World' );
Ora se raggiungo l’endpoint /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/otterrò il seguente output:
Il nostro endpoint, restituendo alcuni dati.
Registrazione di un archivio dati
Ora che abbiamo un endpoint API REST, possiamo creare un datastore con registerStore.
registerStorefornisce 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).
Puoi leggere di più sullo stato REACT nella documentazione ufficiale.
Ecco come possiamo creare un negozio (come store.jsnel nostro progetto che ci consentirà di estrarre i dati dal nostro endpoint API REST.
Dipendenze
Avremo bisogno di estrarre apiFetche registerStoredalle nostre dipendenze di WordPress.
import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';
Selettori
La prima cosa che vogliamo fare è creare una funzione di selezione, in un oggetto chiamato ‘selettori’.
Tutto ciò che fa è estrarre l ‘"opzione" dallo stato e restituirla.
const selectors = {
getOption( state, optionKey) {
const { option } = state;
return option;
},
};
Risolutori
Il resolver è un effetto collaterale del selettore e fa un po’ di più.
Qui creiamo la nostra funzione che prende la nostra optionKey e passa un endpoint API REST alle nostre azioni (che definiremo in seguito).
Questo quindi imposta l’opzione, con un altro invito alle nostre azioni.
const resolvers = {
*getOption( optionKey) {
const option = yield actions.getOption(
'/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
);
return actions.setOption( option );
},
};
Azioni
Le due funzioni in un oggetto denominato actionsche abbiamo chiamato in precedenza sono definite qui.
Indicano quale controllo o riduttore utilizzeremo per impostare o ottenere il valore.
const actions = {
setOption( option) {
return {
type: 'SET_OPTION',
option,
};
},
getOption( path) {
return {
type: 'GET_OPTION',
path,
};
},
};
Controlli
Nei nostri controlli abbiamo GET_OPTIONche effettua la chiamata API utilizzando apiFetche il percorso che abbiamo definito in precedenza.
const controls = {
GET_OPTION( action) {
return apiFetch( { path: action.path } );
},
};
Riduttore
Nella nostra funzione riduttore abbiamo SET_OPTIONche prende il nostro valore (in questo caso option, e ne imposta lo stato.
function reducer( state = { option: '' }, action) {
switch (action.type) {
case 'SET_OPTION':
return {
...state,
option: action.option,
};
}
return state;
};
Registrazione del negozio
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.
const store = registerStore(
'wcltd/wholesome-plugin/data',
{
actions,
controls,
reducer,
resolvers,
selectors,
}
);
export default store;
esporta il negozio predefinito;
Utilizzo dei dati con un blocco
Espandiamo il blocco creato dallo @wordpress/create-blockscript, di cui ho scritto in precedenza per consentirci di connetterci a un endpoint API REST.
Crea un file nella /srccartella chiamata store.jse copiaci tutto il codice sopra:
import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';
const selectors = {
getOption( state, optionKey) {
const { option } = state;
return option;
},
};
const resolvers = {
*getOption( optionKey) {
const option = yield actions.getOption(
'/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
);
return actions.setOption( option );
},
};
const actions = {
setOption( option) {
return {
type: 'SET_OPTION',
option,
};
},
getOption( path) {
return {
type: 'GET_OPTION',
path,
};
},
};
const controls = {
GET_OPTION( action) {
return apiFetch( { path: action.path } );
},
};
function reducer( state = { option: '' }, action) {
switch (action.type) {
case 'SET_OPTION':
return {
...state,
option: action.option,
};
}
return state;
};
const store = registerStore(
'wcltd/wholesome-plugin/data',
{
actions,
controls,
reducer,
resolvers,
selectors,
}
);
export default store;
Ora modifica il nostro /src/index.jsfile per includere il store.jsfile:
import store from './store';
import Edit from './edit';
import save from './save';
Dobbiamo anche assicurarci di aver incluso withSelectnella parte superiore del nostro file:
import { withSelect } from '@wordpress/data';
Quindi avvolgiamo il nostro modulo Modifica con withSelectper effettuare la chiamata API REST alla nostra opzione, in questo modo:
edit: withSelect( (select) => {
const option = select( 'wcltd/wholesome-plugin/data' ).getOption( 'wcltd_example_option' );
return {
option,
};
} )( Edit ),
Ora possiamo accedere optionai nostri oggetti di scena all’interno di edit.js, in questo modo:
export default function Edit( { className, option }) {
return (<p className={ className }>
{ option }
</p>
);
}
Infine, vediamo il nostro blocco nell’editor e vediamo cosa otteniamo:
L’output nell’editor di blocchi. L’output nell’editor di blocchi.