{"id":228708,"date":"2022-10-18T11:27:00","date_gmt":"2022-10-18T08:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228708"},"modified":"2022-11-09T03:57:20","modified_gmt":"2022-11-09T00:57:20","slug":"utilisation-de-lediteur-de-blocs-wordpress-gutenberg-avec-lapi-rest","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/utilisation-de-lediteur-de-blocs-wordpress-gutenberg-avec-lapi-rest\/","title":{"rendered":"Utilisation de l’\u00e9diteur de blocs WordPress (Gutenberg) avec l’API REST"},"content":{"rendered":"\n

Dans mon article pr\u00e9c\u00e9dent, j’ai expliqu\u00e9 comment parcourir les messages et les types de messages personnalis\u00e9s dans Gutenberg<\/a>. Dans cet article, je parle de la r\u00e9ception et de l’utilisation de donn\u00e9es personnalis\u00e9es dans Gutenberg \u00e0 partir des points de terminaison de l’API REST WordPress.<\/p>\n

Dans cet exemple nous allons :<\/p>\n

L’API REST n’est pas toujours le bon chemin.<\/strong><\/p>\n

*Nous utilisons get_option<\/code>l’API REST uniquement \u00e0 titre d’exemple. Si vous avez uniquement besoin d’acc\u00e9der \u00e0 une option et que vous n’avez pas l’intention de modifier son \u00e9tat, vous pouvez utiliser wp_localize_script<\/code>\u00e0 la place pour transmettre les options \u00e0 JavaScript.<\/p>\n

Si vous souhaitez acc\u00e9der \u00e0 une option ET modifier son \u00e9tat, je vous recommande de lire mon guide sur le stockage des param\u00e8tres et des donn\u00e9es dans la table des options avec Gutenberg \u00e0 l’aide de l’API Settings<\/a> .*<\/p>\n

Cr\u00e9ation d’un point de terminaison d’API REST<\/h2>\n

Nous allons cr\u00e9er un point de terminaison API REST simple qui renvoie la valeur d’une option WordPress (en utilisant 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
Apr\u00e8s avoir cr\u00e9\u00e9 ce point de terminaison, assurez-vous de r\u00e9enregistrer vos permaliens<\/strong> pour qu’il s’active. Notez qu’il existe de meilleures fa\u00e7ons de le faire (comme l’utilisation flush_rewrite_rules()<\/code>sur le register_activation_hook<\/code>), mais pour cet exemple, un r\u00e9enregistrement rapide suffira.<\/p>\n
Maintenant, lorsque nous passons l’URL \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/test\/<\/code>(apr\u00e8s votre propre domaine \u00e9videmment) dans notre navigateur, il renverra une valeur, qui sera soit une cha\u00eene vide, ''<\/code>soit la valeur de l’option si elle est d\u00e9finie.<\/p>\n
Notre point de terminaison, renvoyant une cha\u00eene vide<\/a> Notre point de terminaison, renvoyant une cha\u00eene vide<\/p>\n
Notez que j’ai d\u00e9lib\u00e9r\u00e9ment comment\u00e9 les lignes 12 \u00e0 14, ce qui garantirait que seule une personne disposant edit_post<\/code>des droits puisse ex\u00e9cuter le code s’il est laiss\u00e9. Cependant, avec ce commentaire, nous ne pouvons pas tester le code dans notre navigateur.<\/p>\n
Essayez d’ajouter du code pour donner une valeur \u00e0 votre option et voyez ce qu’elle renvoie. Par exemple, si je devais ex\u00e9cuter le code suivant avant ma fonction\u00a0:<\/p>\n
update_option( 'wcltd_example_option', 'Hello World' );\n<\/code><\/pre>\n
Maintenant, si j’atteins le point final \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/wcltd_example_option\/<\/code>, j’obtiendrai la sortie suivante\u00a0:<\/p>\n
Notre point de terminaison, renvoyant des donn\u00e9es.<\/p>\n
Enregistrement d’un magasin de donn\u00e9es<\/h2>\n
Maintenant que nous avons un point de terminaison d’API REST, nous pouvons cr\u00e9er un magasin de donn\u00e9es avec registerStore<\/code>.<\/p>\n
registerStore<\/code>fournit un magasin de donn\u00e9es de type Redux, qui nous permet de g\u00e9rer l’\u00e9tat de notre application. Il prend \u00e9galement en charge les r\u00e9solveurs, qui nous permettent de remplir l’\u00e9tat \u00e0 partir d’une source externe (telle que notre API REST).<\/p>\n
Vous pouvez en savoir plus sur l’\u00e9tat REACT dans la documentation officielle<\/a>.<\/p>\n
Voici comment nous pouvons cr\u00e9er un magasin (comme store.js<\/code>dans notre projet qui nous permettra d’extraire des donn\u00e9es de notre point de terminaison API REST.<\/p>\n
D\u00e9pendances<\/h3>\n
Nous aurons besoin d’extraire apiFetch<\/code>et registerStore<\/code>de nos d\u00e9pendances WordPress.<\/p>\n
import apiFetch from '@wordpress\/api-fetch';\nimport { registerStore } from '@wordpress\/data';\n<\/code><\/pre>\n
S\u00e9lecteurs<\/h3>\n
La premi\u00e8re chose que nous voulons faire est de cr\u00e9er une fonction de s\u00e9lection, dans un objet appel\u00e9 ‘selectors’.<\/p>\n
Tout ce que cela fait est d’extraire l’option de l’\u00e9tat et de la renvoyer.<\/p>\n
const selectors = {\n    getOption( state, optionKey) {\n        const { option } = state;\n        return option;\n    },\n};\n<\/code><\/pre>\n
R\u00e9solveurs<\/h3>\n
Le r\u00e9solveur est un effet secondaire du s\u00e9lecteur, et fait un peu plus.<\/p>\n
Ici, nous cr\u00e9ons notre fonction qui prend notre optionKey et transmet un point de terminaison API REST \u00e0 nos actions (que nous d\u00e9finirons ensuite).<\/p>\n
Cela d\u00e9finit alors l’option, avec un autre appel \u00e0 nos actions.<\/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
Actions<\/h3>\n
Les deux fonctions d’un objet nomm\u00e9 actions<\/code>que nous avons appel\u00e9 pr\u00e9c\u00e9demment sont d\u00e9finies ici.<\/p>\n
Ils indiquent quel contr\u00f4le ou r\u00e9ducteur nous allons utiliser pour d\u00e9finir ou obtenir la valeur.<\/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
Les contr\u00f4les<\/h3>\n
Dans nos contr\u00f4les, nous avons GET_OPTION<\/code>qui effectue l’appel d’API en utilisant apiFetch<\/code>et le chemin que nous avons d\u00e9fini pr\u00e9c\u00e9demment.<\/p>\n
const controls = {\n    GET_OPTION( action) {\n        return apiFetch( { path: action.path } );\n    },\n};\n<\/code><\/pre>\n
R\u00e9ducteur<\/h3>\n
Dans notre fonction de r\u00e9duction, nous avons SET_OPTION<\/code>qui prend notre valeur (dans ce cas option<\/code>, et d\u00e9finit son \u00e9tat.<\/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
Enregistrement du magasin<\/h3>\n
Enfin, nous enregistrons un magasin, lui donnons un espace de noms afin que nous puissions y acc\u00e9der, et transmettons un objet de tous les objets et fonctions ci-dessus.<\/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
exporter le magasin par d\u00e9faut\u00a0;<\/p>\n
Utilisation des donn\u00e9es avec un bloc<\/h2>\n
D\u00e9veloppons le bloc cr\u00e9\u00e9 par le @wordpress\/create-block<\/code>script, dont j’ai parl\u00e9 pr\u00e9c\u00e9demment<\/a> pour nous permettre de nous connecter \u00e0 un point de terminaison de l’API REST.<\/p>\n
Cr\u00e9ez un fichier dans le \/src<\/code>dossier appel\u00e9 store.js<\/code>et copiez-y tout le code ci-dessus\u00a0:<\/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
Modifiez maintenant notre \/src\/index.js<\/code>fichier pour inclure le store.js<\/code>fichier\u00a0:<\/p>\n
\nimport store from '.\/store';\nimport Edit from '.\/edit';\nimport save from '.\/save';\n<\/code><\/pre>\n
Nous devons \u00e9galement nous assurer que nous avons inclus withSelect<\/code>en haut de notre fichier\u00a0:<\/p>\n
import { withSelect } from '@wordpress\/data';\n<\/code><\/pre>\n
Enveloppons ensuite notre module Edit avec withSelect<\/code>pour faire l’appel de l’API REST \u00e0 notre option, comme ceci\u00a0:<\/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
Maintenant, nous pouvons acc\u00e9der option<\/code>\u00e0 nos accessoires dans edit.js<\/code>, comme ceci\u00a0:<\/p>\n
export default function Edit( { className, option }) {\n    return (<p className={ className }>\n            { option }\n        <\/p>\n    );\n}\n<\/code><\/pre>\n
Enfin, regardons notre bloc dans l’\u00e9diteur et voyons ce que nous obtenons\u00a0:<\/p>\n
La sortie dans l’\u00e9diteur de blocs.<\/a> La sortie dans l’\u00e9diteur de blocs.<\/p>\n
Source d’enregistrement:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Dans mon article pr\u00e9c\u00e9dent, j’ai expliqu\u00e9 comment parcourir les publications et les types de publication personnalis\u00e9s dans Gutenberg. Dans cet article, je parle de la r\u00e9ception et de l’utilisation de donn\u00e9es personnalis\u00e9es dans 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":[915,893,717,862],"tags":[1167],"class_list":["post-228708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228708"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228708\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/220671"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}