Utilisation de l’éditeur de blocs WordPress (Gutenberg) avec l’API REST
Dans mon article précédent, j’ai expliqué comment parcourir les messages et les types de messages personnalisés dans Gutenberg. Dans cet article, je parle de la réception et de l’utilisation de données personnalisées dans Gutenberg à partir des points de terminaison de l’API REST WordPress.
Dans cet exemple nous allons :
L’API REST n’est pas toujours le bon chemin.
*Nous utilisons get_optionl’API REST uniquement à titre d’exemple. Si vous avez uniquement besoin d’accéder à une option et que vous n’avez pas l’intention de modifier son état, vous pouvez utiliser wp_localize_scriptà la place pour transmettre les options à JavaScript.
Si vous souhaitez accéder à une option ET modifier son état, je vous recommande de lire mon guide sur le stockage des paramètres et des données dans la table des options avec Gutenberg à l’aide de l’API Settings .*
Création d’un point de terminaison d’API REST
Nous allons créer un point de terminaison API REST simple qui renvoie la valeur d’une option WordPress (en utilisant 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' );
Après avoir créé ce point de terminaison, assurez-vous de réenregistrer vos permaliens pour qu’il s’active. Notez qu’il existe de meilleures façons de le faire (comme l’utilisation flush_rewrite_rules()sur le register_activation_hook), mais pour cet exemple, un réenregistrement rapide suffira.
Maintenant, lorsque nous passons l’URL /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(après votre propre domaine évidemment) dans notre navigateur, il renverra une valeur, qui sera soit une chaîne vide, ''soit la valeur de l’option si elle est définie.
Notre point de terminaison, renvoyant une chaîne vide Notre point de terminaison, renvoyant une chaîne vide
Notez que j’ai délibérément commenté les lignes 12 à 14, ce qui garantirait que seule une personne disposant edit_postdes droits puisse exécuter le code s’il est laissé. Cependant, avec ce commentaire, nous ne pouvons pas tester le code dans notre navigateur.
Essayez d’ajouter du code pour donner une valeur à votre option et voyez ce qu’elle renvoie. Par exemple, si je devais exécuter le code suivant avant ma fonction :
update_option( 'wcltd_example_option', 'Hello World' );
Maintenant, si j’atteins le point final /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/, j’obtiendrai la sortie suivante :
Notre point de terminaison, renvoyant des données.
Enregistrement d’un magasin de données
Maintenant que nous avons un point de terminaison d’API REST, nous pouvons créer un magasin de données avec registerStore.
registerStorefournit un magasin de données de type Redux, qui nous permet de gérer l’état de notre application. Il prend également en charge les résolveurs, qui nous permettent de remplir l’état à partir d’une source externe (telle que notre API REST).
Vous pouvez en savoir plus sur l’état REACT dans la documentation officielle.
Voici comment nous pouvons créer un magasin (comme store.jsdans notre projet qui nous permettra d’extraire des données de notre point de terminaison API REST.
Dépendances
Nous aurons besoin d’extraire apiFetchet registerStorede nos dépendances WordPress.
import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';
Sélecteurs
La première chose que nous voulons faire est de créer une fonction de sélection, dans un objet appelé ‘selectors’.
Tout ce que cela fait est d’extraire l’option de l’état et de la renvoyer.
const selectors = {
getOption( state, optionKey) {
const { option } = state;
return option;
},
};
Résolveurs
Le résolveur est un effet secondaire du sélecteur, et fait un peu plus.
Ici, nous créons notre fonction qui prend notre optionKey et transmet un point de terminaison API REST à nos actions (que nous définirons ensuite).
Cela définit alors l’option, avec un autre appel à nos actions.
const resolvers = {
*getOption( optionKey) {
const option = yield actions.getOption(
'/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
);
return actions.setOption( option );
},
};
Actions
Les deux fonctions d’un objet nommé actionsque nous avons appelé précédemment sont définies ici.
Ils indiquent quel contrôle ou réducteur nous allons utiliser pour définir ou obtenir la valeur.
const actions = {
setOption( option) {
return {
type: 'SET_OPTION',
option,
};
},
getOption( path) {
return {
type: 'GET_OPTION',
path,
};
},
};
Les contrôles
Dans nos contrôles, nous avons GET_OPTIONqui effectue l’appel d’API en utilisant apiFetchet le chemin que nous avons défini précédemment.
const controls = {
GET_OPTION( action) {
return apiFetch( { path: action.path } );
},
};
Réducteur
Dans notre fonction de réduction, nous avons SET_OPTIONqui prend notre valeur (dans ce cas option, et définit son état.
function reducer( state = { option: '' }, action) {
switch (action.type) {
case 'SET_OPTION':
return {
...state,
option: action.option,
};
}
return state;
};
Enregistrement du magasin
Enfin, nous enregistrons un magasin, lui donnons un espace de noms afin que nous puissions y accéder, et transmettons un objet de tous les objets et fonctions ci-dessus.
const store = registerStore(
'wcltd/wholesome-plugin/data',
{
actions,
controls,
reducer,
resolvers,
selectors,
}
);
export default store;
exporter le magasin par défaut ;
Utilisation des données avec un bloc
Développons le bloc créé par le @wordpress/create-blockscript, dont j’ai parlé précédemment pour nous permettre de nous connecter à un point de terminaison de l’API REST.
Créez un fichier dans le /srcdossier appelé store.jset copiez-y tout le code ci-dessus :
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;
Modifiez maintenant notre /src/index.jsfichier pour inclure le store.jsfichier :
import store from './store';
import Edit from './edit';
import save from './save';
Nous devons également nous assurer que nous avons inclus withSelecten haut de notre fichier :
import { withSelect } from '@wordpress/data';
Enveloppons ensuite notre module Edit avec withSelectpour faire l’appel de l’API REST à notre option, comme ceci :
edit: withSelect( (select) => {
const option = select( 'wcltd/wholesome-plugin/data' ).getOption( 'wcltd_example_option' );
return {
option,
};
} )( Edit ),
Maintenant, nous pouvons accéder optionà nos accessoires dans edit.js, comme ceci :
export default function Edit( { className, option }) {
return (<p className={ className }>
{ option }
</p>
);
}
Enfin, regardons notre bloc dans l’éditeur et voyons ce que nous obtenons :
La sortie dans l’éditeur de blocs. La sortie dans l’éditeur de blocs.