{"id":228873,"date":"2022-10-18T11:15:00","date_gmt":"2022-10-18T08:15:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228873"},"modified":"2022-11-09T04:36:41","modified_gmt":"2022-11-09T01:36:41","slug":"wordpress-block-editorin-gutenberg-kaeyttaeminen-rest-api-n-kanssa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-block-editorin-gutenberg-kaeyttaeminen-rest-api-n-kanssa\/","title":{"rendered":"WordPress Block Editorin (Gutenberg) k\u00e4ytt\u00e4minen REST API:n kanssa"},"content":{"rendered":"\n

Edellisess\u00e4 artikkelissani puhuin viestien ja mukautettujen viestityyppien silmukasta Gutenbergiss\u00e4<\/a>. T\u00e4ss\u00e4 viestiss\u00e4 puhun mukautettujen tietojen vastaanottamisesta ja k\u00e4ytt\u00e4misest\u00e4 Gutenbergiss\u00e4 WordPress REST API -p\u00e4\u00e4tepisteist\u00e4.<\/p>\n

T\u00e4ss\u00e4 esimerkiss\u00e4 aiomme:<\/p>\n

REST API ei ole aina oikea polku.<\/strong><\/p>\n

*K\u00e4yt\u00e4mme get_option<\/code>REST API:ssa vain esimerkkin\u00e4. Jos tarvitset vain vaihtoehdon p\u00e4\u00e4syn etk\u00e4 aio muuttaa sen tilaa, voit sen sijaan wp_localize_script<\/code>siirt\u00e4\u00e4 asetukset JavaScriptiin.<\/p>\n

Jos haluat k\u00e4ytt\u00e4\u00e4 vaihtoehtoa JA muuttaa sen tilaa, suosittelen lukemaan oppaani asetusten ja tietojen tallentamisesta vaihtoehtotaulukkoon Gutenbergin kanssa Asetukset-sovellusliittym\u00e4n avulla<\/a> .*<\/p>\n

REST API -p\u00e4\u00e4tepisteen luominen<\/h2>\n

Aiomme luoda yksinkertaisen REST API -p\u00e4\u00e4tepisteen, joka palauttaa WordPress-vaihtoehdon arvon (k\u00e4ytt\u00e4en 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
Kun olet luonut t\u00e4m\u00e4n p\u00e4\u00e4tepisteen, muista tallentaa pysyv\u00e4t linkit uudelleen<\/strong>, jotta se k\u00e4ynnistyy. Huomaa, ett\u00e4 on olemassa parempia tapoja tehd\u00e4 t\u00e4m\u00e4 (kuten k\u00e4ytt\u00e4m\u00e4ll\u00e4 painiketta flush_rewrite_rules()<\/code>) register_activation_hook<\/code>, mutta t\u00e4ss\u00e4 esimerkiss\u00e4 nopea uudelleentallennus riitt\u00e4\u00e4.<\/p>\n
Nyt kun v\u00e4lit\u00e4mme URL-osoitteen \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/test\/<\/code>(ilmeisesti oman verkkotunnuksesi j\u00e4lkeen) selaimeemme, se palauttaa arvon, joka on joko tyhj\u00e4 merkkijono ''<\/code>tai vaihtoehdon arvo, jos se on asetettu.<\/p>\n
P\u00e4\u00e4tepisteemme, tyhj\u00e4n merkkijonon palauttaminen<\/a> P\u00e4\u00e4tepisteemme, tyhj\u00e4n merkkijonon palauttaminen<\/p>\n
Huomaa, ett\u00e4 olen tarkoituksella kommentoinut rivit 12-14, mik\u00e4 varmistaa, ett\u00e4 vain joku, jolla on edit_post<\/code>oikeudet, voi ajaa koodia, jos se j\u00e4tet\u00e4\u00e4n sis\u00e4\u00e4n. T\u00e4ll\u00e4 kommentilla emme kuitenkaan voi testata koodia selaimessamme.<\/p>\n
Kokeile lis\u00e4t\u00e4 koodia antaaksesi valinnallesi arvon ja katso, mit\u00e4 se palauttaa. Jos esimerkiksi suorittaisin seuraavan koodin ennen toimintoani:<\/p>\n
update_option( 'wcltd_example_option', 'Hello World' );\n<\/code><\/pre>\n
Nyt jos osun p\u00e4\u00e4tepisteeseen \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/wcltd_example_option\/<\/code>, saan seuraavan tulosteen:<\/p>\n
P\u00e4\u00e4tepisteemme, palauttaa joitain tietoja.<\/p>\n
Tietos\u00e4il\u00f6n rekister\u00f6inti<\/h2>\n
Nyt kun meill\u00e4 on REST API -p\u00e4\u00e4tepiste, voimme luoda tietovaraston registerStore<\/code>.<\/p>\n
registerStore<\/code>tarjoaa Redux-tyyppisen tietovaraston, jonka avulla voimme hallita tilaa kaikkialla sovelluksessamme. Se tukee my\u00f6s ratkaisejia, joiden avulla voimme t\u00e4ytt\u00e4\u00e4 tilan ulkoisesta l\u00e4hteest\u00e4 (kuten REST API:sta).<\/p>\n
Voit lukea lis\u00e4\u00e4 REACT-tilasta virallisesta dokumentaatiosta<\/a>.<\/p>\n
N\u00e4in voimme luoda myym\u00e4l\u00e4n (kuten store.js<\/code>projektissamme, jonka avulla voimme noutaa tietoja REST API -p\u00e4\u00e4tepisteest\u00e4mme.<\/p>\n
Riippuvuudet<\/h3>\n
Meid\u00e4n on purettava WordPress-riippuvuudet apiFetch<\/code>ja niist\u00e4.registerStore<\/code><\/p>\n
import apiFetch from '@wordpress\/api-fetch';\nimport { registerStore } from '@wordpress\/data';\n<\/code><\/pre>\n
Valitsijat<\/h3>\n
Ensimm\u00e4inen asia, jonka haluamme tehd\u00e4, on luoda valitsinfunktio objektiin nimelt\u00e4 "valitsijat".<\/p>\n
Kaikki t\u00e4m\u00e4 on poimia "vaihtoehto" osavaltiosta ja palauttaa se.<\/p>\n
const selectors = {\n    getOption( state, optionKey) {\n        const { option } = state;\n        return option;\n    },\n};\n<\/code><\/pre>\n
Ratkaisijat<\/h3>\n
Resoluutio on valitsimen sivuvaikutus ja tekee hieman enemm\u00e4n.<\/p>\n
T\u00e4\u00e4ll\u00e4 luomme funktiomme, joka ottaa optionKey-avaimen ja v\u00e4litt\u00e4\u00e4 REST API -p\u00e4\u00e4tepisteen toimillemme (jotka m\u00e4\u00e4rit\u00e4mme seuraavaksi).<\/p>\n
T\u00e4m\u00e4 asettaa sitten vaihtoehdon ja toinen kehotus toimiamme.<\/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
Toiminnot<\/h3>\n
Kaksi funktiota nimetyss\u00e4 objektissa actions<\/code>, joita kutsuimme aiemmin, m\u00e4\u00e4ritell\u00e4\u00e4n t\u00e4ss\u00e4.<\/p>\n
Ne osoittavat, mit\u00e4 s\u00e4\u00e4dint\u00e4 tai v\u00e4hennint\u00e4 aiomme k\u00e4ytt\u00e4\u00e4 arvon asettamiseen tai saamiseen.<\/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
S\u00e4\u00e4timet<\/h3>\n
Ohjauksissamme on GET_OPTION<\/code>mik\u00e4 tekee API-kutsun k\u00e4ytt\u00e4m\u00e4ll\u00e4 apiFetch<\/code>ja polkua, jonka m\u00e4\u00e4ritimme aiemmin.<\/p>\n
const controls = {\n    GET_OPTION( action) {\n        return apiFetch( { path: action.path } );\n    },\n};\n<\/code><\/pre>\n
V\u00e4hent\u00e4j\u00e4<\/h3>\n
V\u00e4hent\u00e4j\u00e4funktiossamme on SET_OPTION<\/code>joka ottaa arvomme (t\u00e4ss\u00e4 tapauksessa option<\/code>ja asettaa tilan.<\/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
Kaupan rekister\u00f6inti<\/h3>\n
Lopuksi rekister\u00f6imme myym\u00e4l\u00e4n, annamme sille nimitilan, jotta voimme k\u00e4ytt\u00e4\u00e4 sit\u00e4, ja v\u00e4lit\u00e4mme kaikkien yll\u00e4 olevien objektien ja funktioiden objektin.<\/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
Vie oletusarvoinen myym\u00e4l\u00e4;<\/p>\n
Tietojen k\u00e4ytt\u00e4minen lohkon kanssa<\/h2>\n
Laajennamme komentosarjan luomaa lohkoa @wordpress\/create-block<\/code>, josta kirjoitin aiemmin<\/a>, jotta voimme muodostaa yhteyden REST API -p\u00e4\u00e4tepisteeseen.<\/p>\n
Luo tiedosto \/src<\/code>kansioon nimelt\u00e4 store.js<\/code>ja kopioi kaikki yll\u00e4 oleva koodi siihen:<\/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
Muokkaa nyt \/src\/index.js<\/code>tiedostoamme niin, ett\u00e4 se sis\u00e4lt\u00e4\u00e4 store.js<\/code>tiedoston:<\/p>\n
\nimport store from '.\/store';\nimport Edit from '.\/edit';\nimport save from '.\/save';\n<\/code><\/pre>\n
Meid\u00e4n on my\u00f6s varmistettava, ett\u00e4 olemme lis\u00e4nneet withSelect<\/code>tiedostomme yl\u00e4osaan:<\/p>\n
import { withSelect } from '@wordpress\/data';\n<\/code><\/pre>\n
K\u00e4\u00e4rit\u00e4\u00e4n sitten muokkausmoduulimme withSelect<\/code>REST API:n kutsumiseksi vaihtoehdollemme, kuten:<\/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
Nyt voimme k\u00e4ytt\u00e4\u00e4 option<\/code>rekvisiittaamme sis\u00e4ll\u00e4 edit.js<\/code>, kuten n\u00e4in:<\/p>\n
export default function Edit( { className, option }) {\n    return (<p className={ className }>\n            { option }\n        <\/p>\n    );\n}\n<\/code><\/pre>\n
Katsotaan lopuksi lohkoamme editorissa ja katsotaan mit\u00e4 saamme:<\/p>\n
Tulos lohkoeditorissa.<\/a> Tulos lohkoeditorissa.<\/p>\n
:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Edellisess\u00e4 artikkelissani puhuin viestien ja mukautettujen viestityyppien silmukasta Gutenbergiss\u00e4. T\u00e4ss\u00e4 viestiss\u00e4 puhun mukautettujen tietojen vastaanottamisesta ja k\u00e4ytt\u00e4misest\u00e4 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":[719,895,917,864],"tags":[1166],"class_list":["post-228873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-muut","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228873"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/220671"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}