Uso del editor de bloques de WordPress (Gutenberg) con la API REST
En mi artículo anterior, hablé sobre cómo recorrer publicaciones y tipos de publicaciones personalizadas dentro de Gutenberg. En esta publicación, hablo sobre la recepción y el uso de datos personalizados dentro de Gutenberg desde los puntos finales de la API REST de WordPress.
En este ejemplo vamos a:
La API REST no siempre es el camino correcto.
*Usamos get_optionen la API REST solo como ejemplo. Si solo necesita acceso a una opción y no tiene la intención de cambiar su estado, puede usar wp_localize_scriptpara pasar las opciones a JavaScript.
Si desea acceder a una opción Y cambiar su estado, le recomendaría leer mi guía sobre el almacenamiento de configuraciones y datos en la tabla de opciones con Gutenberg usando la API de configuración .*
Creación de un punto final de API REST
Vamos a crear un punto final de API REST simple que devuelva el valor de una opción de 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' );
Después de haber creado este punto final, asegúrese de volver a guardar sus enlaces permanentes para que se active. Tenga en cuenta que hay mejores formas de hacer esto (como usar flush_rewrite_rules()en el register_activation_hook), pero para este ejemplo, bastará con volver a guardar rápidamente.
Ahora, cuando pasemos la URL /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(después de su propio dominio, obviamente) a nuestro navegador, devolverá un valor, que puede ser una cadena vacía ''o el valor de la opción si está configurada.
Nuestro punto final, devolviendo una cadena vacía Nuestro punto final, devolviendo una cadena vacía
Tenga en cuenta que he comentado a propósito las líneas 12-14, lo que garantizaría que solo alguien que tenga edit_postderechos pueda ejecutar el código si se deja. Sin embargo, con esto comentado, no podemos probar el código en nuestro navegador.
Intente agregar algún código para darle un valor a su opción y vea qué devuelve. Por ejemplo, si tuviera que ejecutar el siguiente código antes de mi función:
update_option( 'wcltd_example_option', 'Hello World' );
Ahora, si llego al punto final /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/, obtendré el siguiente resultado:
Nuestro punto final, devolviendo algunos datos.
Registro de un almacén de datos
Ahora que tenemos un punto final de API REST, podemos crear un almacén de datos con registerStore.
registerStoreproporciona un almacén de datos similar a Redux, que nos permite administrar el estado en toda nuestra aplicación. También es compatible con los resolutores, que nos permiten completar el estado desde una fuente externa (como nuestra API REST).
Puede leer más sobre el estado REACT en la documentación oficial.
Así es como podemos crear una tienda (como store.jsen nuestro proyecto que nos permitirá extraer datos de nuestro punto final de API REST.
dependencias
Tendremos que extraer apiFetchy registerStorede nuestras dependencias de WordPress.
import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';
Selectores
Lo primero que queremos hacer es crear una función selectora, en un objeto llamado ‘selectores’.
Todo lo que hace es extraer la ‘opción’ del estado y devolverla.
const selectors = {
getOption( state, optionKey) {
const { option } = state;
return option;
},
};
Resolutores
El resolver es un efecto secundario del selector y hace un poco más.
Aquí creamos nuestra función que toma nuestra optionKey y pasa un punto final de API REST a nuestras acciones (que definiremos a continuación).
Esto luego establece la opción, con otra llamada a nuestras acciones.
const resolvers = {
*getOption( optionKey) {
const option = yield actions.getOption(
'/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
);
return actions.setOption( option );
},
};
Comportamiento
Las dos funciones en un objeto llamado actionsque llamamos anteriormente se definen aquí.
Indican qué control o reductor vamos a utilizar para fijar u obtener el valor.
const actions = {
setOption( option) {
return {
type: 'SET_OPTION',
option,
};
},
getOption( path) {
return {
type: 'GET_OPTION',
path,
};
},
};
Control S
En nuestros controles tenemos GET_OPTIONque hace la llamada a la API usando apiFetchy la ruta que definimos anteriormente.
const controls = {
GET_OPTION( action) {
return apiFetch( { path: action.path } );
},
};
reductor
En nuestra función reductora tenemos SET_OPTIONque toma nuestro valor (en este caso option, y establece su estado.
function reducer( state = { option: '' }, action) {
switch (action.type) {
case 'SET_OPTION':
return {
...state,
option: action.option,
};
}
return state;
};
Registro de la tienda
Finalmente, registramos una tienda, le damos un espacio de nombres para que podamos acceder a ella y pasamos un objeto de todos los objetos y funciones anteriores.
const store = registerStore(
'wcltd/wholesome-plugin/data',
{
actions,
controls,
reducer,
resolvers,
selectors,
}
);
export default store;
exportar almacén predeterminado;
Usando los datos con un bloque
Expandamos el bloque creado por el @wordpress/create-blockscript, sobre el que escribí anteriormente para permitirnos conectarnos a un punto final de API REST.
Cree un archivo en la /srccarpeta llamada store.jsy copie todo el código anterior en él:
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;
Ahora edite nuestro /src/index.jsarchivo para incluir el store.jsarchivo:
import store from './store';
import Edit from './edit';
import save from './save';
También debemos asegurarnos de haber incluido withSelecten la parte superior de nuestro archivo:
import { withSelect } from '@wordpress/data';
Luego, envolvamos nuestro módulo Edit con withSelectpara hacer que la API REST llame a nuestra opción, así:
edit: withSelect( (select) => {
const option = select( 'wcltd/wholesome-plugin/data' ).getOption( 'wcltd_example_option' );
return {
option,
};
} )( Edit ),
Ahora podemos acceder optiona nuestros accesorios dentro edit.jsde, así:
export default function Edit( { className, option }) {
return (<p className={ className }>
{ option }
</p>
);
}
Finalmente, veamos nuestro bloque en el editor y veamos qué obtenemos:
La salida en el editor de bloques. La salida en el editor de bloques.