{"id":233947,"date":"2023-02-26T18:28:00","date_gmt":"2023-02-26T15:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233947"},"modified":"2022-11-11T13:20:31","modified_gmt":"2022-11-11T10:20:31","slug":"looge-ja-tooge-gutenbergi-plokkides-kohandatud-rest-i-lopp-punkte","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/looge-ja-tooge-gutenbergi-plokkides-kohandatud-rest-i-lopp-punkte\/","title":{"rendered":"Looge ja tooge Gutenbergi plokkides kohandatud REST-i l\u00f5pp-punkte"},"content":{"rendered":"\n

Selles postituses p\u00fc\u00fcan luua \u00fclevaate sellest, kuidas luua kohandatud REST API l\u00f5pp-punkte ja t\u00e4ita nende jaoks taotlusi kohandatud Gutenbergi plokis. See t\u00e4hendab, et taotluste fetch<\/code>esitamine meetoditega teabe saamiseks, mis pole WordPressi registreeritud andmepoodides saadaval.<\/p>\n

S\u00f5bralik meeldetuletus: suurem osa p\u00f5hiteavet on WordPressi andmepoodides juba saadaval. N\u00e4iteks postituste, lehtede, kohandatud postitust\u00fc\u00fcpide, taksonoomiate, autorite, meediumide ja muu kohta p\u00f5hip\u00e4ringud on saadaval ilma oma kohandatud l\u00f5pp-punktide loomiseta. Nendele poodidele juurdep\u00e4\u00e4suks kasutaksite pigem WordPressi p\u00f5hiandmemoodulit (withSelect<\/code>ja select()<\/code>). Allpool on \u00f5petuse osa, mis annab p\u00f5hjaliku \u00fclevaate, kuidas seda teha.<\/p>\n

WordPress REST API<\/h2>\n

Kui sa veel ei teadnud; WordPress REST API on JSON-liides teie WordPressi saidi andmete saatmiseks ja vastuv\u00f5tmiseks. Seda saab kasutada v\u00e4liselt v\u00f5i sisemiselt. Gutenbergi redaktori ja Javascriptile \u00fcleminekuga on REST API kasutusalad kindlasti suurenenud. WordPress REST API-l on terve hulk l\u00f5pp-punkte, mida saame kasutada. Vaadake siit t\u00e4ielikku viidet k\u00f5igi REST API l\u00f5pp-punktide kohta<\/a>. Leiad n\u00e4iteks l\u00f5pp-punktid postitustele ja enamikule muule sisesisule \u2013 nii lugemiseks kui ka v\u00e4rskendamiseks. Teema v\u00f5i pistikprogrammi arendajad saavad registreerida oma kohandatud l\u00f5pp-punktid.<\/p>\n

Teie WordPressi saidil on juur REST API URL, mis asub vaikimisi aadressil <your domain>\/wp-json<\/code>. N\u00e4iteks URL-iga kohalik WordPress http:\/\/localhost\/wordpress\/<\/code>p\u00e4\u00e4seb juurde REST API-le aadressil http:\/\/localhost\/wordpress\/wp-json<\/code>. Sealt peame lisama l\u00f5pp-punktid. Viidates \u00fclaltoodud l\u00f5pp-punktide viitele, saame hankida l\u00f5pp-punkti viimaste postituste loendi \/wp\/v2\/posts<\/code>. See t\u00e4hendab, et kui l\u00e4hete http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts<\/code>oma brauseris aadressile, saate oma WordPressi saidi viimaste postituste kohta JSON-vormingus vastuse.<\/p>\n

M\u00e4rkus nimeruumide kohta on \u00f5ige. REST API URL algab nimeruumiga (" wp\/v2<\/code>" on WordPressi nimeruum, nagu on n\u00e4ha \u00fclaltoodud URL-ide n\u00e4ites). Nimeruumid on kontseptsioon, mis aitab v\u00e4ltida kokkup\u00f5rkeid WordPressi tuumas, teemades ja pistikprogrammides, mis lisavad sama nimega l\u00f5pp-punkte. Looge oma ainulaadne nimeruum, mis on tavaliselt teie teema v\u00f5i pistikprogrammi nime vorm. P\u00e4rast n\u00e4lkja on \u00fcldreegel versiooninumbri lisamine, mis algab tavaliselt versioonist 1. N\u00e4iteks on minu teema n\u00e4pun\u00e4ide " awhitepixel<\/code>", nii et kui ma peaksin oma teemas kohandatud l\u00f5pp-punkte looma, kasutaksin nimeruumi " awhitepixel\/v1<\/code>". Selle nimeruumiga saaksin registreerida l\u00f5pp-punkti " posts<\/code>" ja see ei tekita probleeme, kuigi see on identne WordPressi l\u00f5pp-punkti nimega.<\/p>\n

REST API-ga t\u00f6\u00f6tamine WordPressis on suur teema, mis sisaldab palju head teavet. Selles postituses keskendun Gutenbergi redaktori kasutatavusele ja sellele, kuidas neid Javascriptis alla laadida.<\/p>\n

Mida me teeme ja mida vajame<\/h2>\n

Kohandatud teabe taotlemise kasutatavusel on lai valik kasutusjuhtumeid, nii et tavaliselt peate allolevaid koodin\u00e4iteid oma vajadustele vastavaks kohandama. Andmed v\u00f5ivad olla kohandatud postitusp\u00e4ring, kohandatud SQL-p\u00e4ring v\u00f5i midagi muud.<\/p>\n

Kui loome kohandatud l\u00f5pp-punkti, on meil t\u00e4ielik kontroll selle tagastamise \u00fcle. Saame WordPressis\/PHP-s teha mis tahes toiminguid ja p\u00e4ringuid ning edastada selle edasi JSON-ina. Ja meie Gutenbergi plokis saame selle tagastuse hankida ja teha sellega ploki edit<\/code>funktsiooni raames, mida tahame. Tavaliselt kasutate andmeid l\u00f5ppkasutajale valiku v\u00f5i teabe esitamiseks plokiredaktoris, kuid saate ka selle teabe edasiseks kasutamiseks oma plokki salvestada. Saate nende andmete jaoks luua ka oma kohandatud poed, kuid ma ei hakka seda tegema.<\/p>\n

Oletan, et olete juba tuttav kohandatud Gutenbergi plokkide loomisega, nii et ma ei k\u00e4sitle seda siin \u00fcksikasjalikult.<\/p>\n

REST API l\u00f5pp-punkti loomine<\/h2>\n

Kohandatud REST API l\u00f5pp-punkti registreerimine toimub PHP-s. Lisage see kood oma teemasse functions.php<\/code>v\u00f5i aktiivsesse pistikprogrammi koodi. \u00dchendage funktsioon toiminguga rest_api_init<\/code>ja k\u00e4ivitage funktsioon [register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>iga l\u00f5pp-punkti jaoks, mille soovite registreerida.<\/p>\n

Esitage oma nimeruum esimese parameetrina, l\u00f5pp-punkti marsruut teisena ja seadete massiiv kolmanda parameetrina register_rest_route()<\/code>. Neljas parameeter m\u00e4\u00e4rab, kas soovite olemasoleva marsruudi alistada v\u00f5i mitte; mitte midagi, mida me siin vaatame. Kolmanda parameetri massiivis peaksite atribuudi " callback<\/code>" m\u00e4\u00e4rama v\u00e4hemalt funktsioonile, mis vastutab l\u00f5pp-punkti andmete tagastamise eest. Tavaline on ka ‘ ‘ m\u00e4\u00e4ramine method<\/code>, nt l\u00f5pp-punkti m\u00e4\u00e4ramine ‘ GET<\/code>‘, ‘ POST<\/code>‘, ‘ PUT<\/code>‘ jne.<\/p>\n

Alustame lihtsa l\u00f5pp-punkti registreerimisega;<\/p>\n

add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n
Minu teema nimeruum on " awhitepixel\/v1<\/code>" ja ma registreerin mydata<\/code>selles nimeruumis l\u00f5pp-punkti " ". See t\u00e4hendab, et p\u00e4\u00e4sen juurde oma kohandatud REST API-le aadressil http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n
REST API marsruutide registreerimisel (v\u00f5i muutmisel) peate selle toimimiseks loputama oma p\u00fcsilingid<\/strong>. Seda saate teha, k\u00fclastades Seaded> P\u00fcsilingid ja kl\u00f5psake lihtsalt nuppu Salvesta.<\/p>\n
\u00dclaltoodud kood ei t\u00f6\u00f6ta veel, kuna ma ei ole m\u00e4\u00e4ratlenud funktsiooni komplekti tagasihelistamiseks: awhitepixel_rest_route_mydata<\/code>. Tagasihelistamise funktsioon saab \u00fche parameetri; p\u00e4ringust edastatud teabe ja argumentidega andmete massiiv. L\u00f5puks peate hoolikalt kaaluma tagasihelistamisfunktsiooni tagastamist.<\/p>\n
Esiteks peate alati midagi oma l\u00f5pp-punkti tagasihelistamisest tagastama. WordPress teisendab k\u00f5ik tagastused automaatselt JSON-iks. See t\u00e4hendab, et saate oma funktsioonis tagastada praktiliselt igasuguseid andmeid; string, null, massiiv v\u00f5i [WP_Error](https:\/\/developer.wordpress.org\/reference\/classes\/wp_error\/)<\/code>eksemplar. Saate valida ka [WP_REST_Response](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_response\/)<\/code>objekti tagastamise, et saaksite paremini kontrollida nt olekukoodi v\u00f5i p\u00e4ise teavet. Soovitan m\u00e4hkida tagastamise funktsiooni [rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>, et teie vastus oleks kehtiv REST-vastus.<\/p>\n
M\u00e4\u00e4ratleme tagasihelistamisfunktsiooni ja tagastame alguseks lihtsa stringi;<\/p>\n
function awhitepixel_rest_route_mydata($data) {\n    $response = 'Hello there!';\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n
\u00dclaltoodud koodiga (ja loputatud p\u00fcsilinkidega) saan n\u00fc\u00fcd minna URL-ile http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n
\"Looge<\/a><\/p>\n
Edaspidi saame oma tagasihelistamisfunktsiooni lisada mis tahes koodi, et genereerida tagastamiseks \u00f5iged andmed. Saate WordPressi sisu p\u00e4ringuid teha nt [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>, teha p\u00e4ringuid andmebaasis v\u00f5i k\u00fcsida v\u00e4lisandmeid. See osa on teie otsustada.<\/p>\n
N\u00fc\u00fcd liigume edasi vastask\u00fcljele; kuidas taotlusi esitada.<\/p>\n
REST API p\u00e4ringute tegemine Javascriptis<\/h2>\n
REST-p\u00e4ringu t\u00e4itmine toimub tavaliselt [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>Javascripti abil. WordPress pakub oma \u00fcmbrist fetch<\/code>, mis lihtsustab WordPress REST API p\u00e4ringuid; [wp.apiFetch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-api-fetch\/)<\/code>. Seda ma kasutan oma kohandatud Gutenbergi plokis. Pidage meeles, et fetch<\/code>p\u00e4ringud tagastavad "lubaduse" \u2013 seega peame .then()<\/code>tegeliku p\u00e4ringu tagastamise k\u00e4sitlemiseks aheldama a. P\u00f5hikasutus on umbes selline;<\/p>\n
wp.apiFetch({\n    path: '<namespace and endpoint>',\n}).then(data => {\n    console.log('response from apifetch: ', data);\n});<\/code><\/pre>\n
apiFetch<\/code>v\u00f5imaldab meil pakkuda path<\/code>atribuuti, selle asemel et koostada t\u00e4ielik URL. K\u00f5ik, mida peame esitama, on nimeruum ja l\u00f5pp-punkt ning lisame apiFetch<\/code>selle WordPressi REST API juur-URL-ile. Funktsiooni sees on .then()<\/code>meil juurdep\u00e4\u00e4s andmetele, mis on juba JSON-iks teisendatud. Siin peaksite andmetega midagi ette v\u00f5tma. Tavaliselt salvestate tagastatud andmed nt komponendi olekus.<\/p>\n
Allpool on n\u00e4ide kohandatud Gutenbergi ploki edit<\/code>komponendist. See on klassip\u00f5hine, et seda saaks kasutada state<\/code>REST API p\u00e4ringu tagastatud andmete salvestamiseks. See v\u00f5imaldab meil ka p\u00e4ringu k\u00e4ivitada componentDidMount()<\/code>selle esmakordsel \u00fchendamisel (vt Reacti eluts\u00fckli meetodite dokumentatsiooni<\/a> ). K\u00f5ik see annab lihtsa n\u00e4ite, et saaksite p\u00f5hikontseptsioonist aru saada; mitte retseptina, et seda t\u00e4pselt niimoodi teha. V\u00f5ite kaaluda Reacti konksude ja funktsionaalsete komponentide<\/a> kasutamist v\u00f5i ehitada selle asemel k\u00f5rgema j\u00e4rgu komponendi<\/a>.<\/p>\n
const { Component } = wp.element;\nconst { Spinner } = wp.components;\n\u00a0\nclass BlockEdit extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            list: [],\n            loading: true\n        }\n    }\n\u00a0\n    componentDidMount() {\n        this.runApiFetch();\n    }\n\u00a0\n    runApiFetch() {\n        wp.apiFetch({\n            path: 'awhitepixel\/v1\/mydata',\n        }).then(data => {\n            this.setState({\n                list: data,\n                loading: false\n            });\n        });\n    }\n\u00a0\n    render() {\n        return(\n            <div>\n                {this.state.loading? (<Spinner \/>\n                ): (<p>Data is ready!<\/p>\n                )}\n            <\/div>\n        );\n\u00a0\n    }\n}\nexport default BlockEdit;<\/code><\/pre>\n
\u00dclaltoodud n\u00e4ide on klassip\u00f5hine koostis, mis tarnitakse ploki edit<\/code>funktsioonile registerBlockType()<\/code>. See seadistab massiivi olekuobjekti andmete hoidmiseks (see oleneb loomulikult tagastatavatest andmetest) ja olekut\u00f5be, et teada saada, millal as\u00fcnkroonimistaotlus on tagasi tulnud. Kui komponent on paigaldatud (esmakordselt renderdatud), k\u00e4ivitab see apiFetch<\/code>p\u00e4ringu t\u00e4itmise funktsiooni. M\u00e4\u00e4rasime tee l\u00f5pp-punktini, mille registreerisime \u00fclalpool PHP-s. Meetod on vaikimisi GET, nii et me ei pea seda m\u00e4\u00e4rama apiFetch<\/code>. Ja .then()<\/code>funktsiooni sees, kui p\u00e4ring on valmis, v\u00e4rskendame komponendi olekut tagastatud andmetega.<\/p>\n
Ilmselt teeks teie ploki renderdusfunktsioon tagastatud andmetega rohkem \u00e4ra. V\u00f5ib-olla soovite anda kasutajale andmed, esitades loendi, mille hulgast v\u00f5ib-olla valida. K\u00f5ik s\u00f5ltub sellest, milliste andmetega on tegemist ja milleks soovite neid kasutada.<\/p>\n
Argumentide edastamine l\u00f5pp-punktile<\/h2>\n
M\u00f5nel juhul peame l\u00f5pp-punktile edastama m\u00f5ned argumendid. Levinud kasutusalad on ID edastamine p\u00e4rast l\u00f5pp-punkti; http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts\/14<\/code>tagastaks n\u00e4iteks postituse ID 14.<\/p>\n
See on \u00fcsna lihtne ja seda tehakse, lisades selle registreerimisel l\u00f5pp-punktile regex-otsingu mustri. Keeruliste mustrite loomiseks on vaja m\u00f5ningaid teadmisi regexide kohta, kuid allpool on n\u00e4ide, mis vastab numbrile ja m\u00e4\u00e4rab sellele nime ’id’. Vastete nimetamine annab meile v\u00f5imaluse p\u00e4\u00e4seda juurde tagasihelistamisfunktsiooni muutujale. Las ma n\u00e4itan teile, mida ma m\u00f5tlen.<\/p>\n
Registreerime uue l\u00f5pp-punkti marsruudi. Kasutame sama l\u00f5pp-punkti nagu varem (‘ awhitepixel\/v1\/mydata<\/code>‘), kuid selle marsruudi jaoks lisame l\u00f5ppu regexi vaste.<\/p>\n
add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n\u00a0\n    register_rest_route('awhitepixel\/v1', '\/mydata\/(?P<id>[d]+)', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n
Regulaarne muster (?P<id>[d]+)<\/code>tundub salap\u00e4rane, kuid on \u00fcsna selge, kui m\u00f5istate regexi p\u00f5hiteadmisi. Osa [d]+<\/code>vastab suvalisele numbrile (0-9) 1 v\u00f5i enam korda. Osad (?P<id><\/code>ja )<\/code>on m\u00f5eldud nimega r\u00fchma sobitamiseks. Grupi nimi on antud juhul id<\/code>, kuid saate oma r\u00fchma(de)le nimetada kuidas soovite.<\/p>\n
Saate suunata selle l\u00f5pp-punkti eraldi tagasihelistamisfunktsiooni, kuid olen otsustanud kasutada sama funktsiooni nii taotluste kui \/mydata<\/code>ka \/mydata\/<ID><\/code>taotluste k\u00e4sitlemiseks. See t\u00e4hendab, et saan oma tagasihelistamisfunktsioonis teha:<\/p>\n
function awhitepixel_rest_route_mydata($data) {\n    if ($data['id']) {\n        $response = 'Create return for ID: '. $data['id'];\n    } else {\n        $response = 'Create general return (no ID provided)';\n    }\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n
Pidage meeles, et tagasihelistamisfunktsiooni parameeter sisaldab tagastatud argumente. Kuna ma andsin oma sobitatud r\u00fchmale nimeks " id<\/code>", on sobitatud v\u00e4\u00e4rtus juurdep\u00e4\u00e4setav keeles $data['id']<\/code>. Ja l\u00f5puks, kuna ma kasutan ID-ga ja ilma ID-ta p\u00e4ringute k\u00e4sitlemiseks sama funktsiooni, saan h\u00f5lpsalt kahe erineva tagastamise vahel vahetada.<\/p>\n
Selle (ja v\u00e4rskendatud p\u00fcsilinkide) abil saan oma kohandatud l\u00f5pp-punktide jaoks j\u00e4rgmised vastused:<\/p>\n
\"Looge<\/a>\"Looge<\/a><\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Juhend kohandatud WordPress REST API l\u00f5pp-punktide loomiseks ja nende jaoks apiFetchi taotluste t\u00e4itmiseks kohandatud Gutenbergi plokis.<\/p>\n","protected":false},"author":1,"featured_media":224922,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[894,937,937,833,894,916,916,1110,842,812,812,833,842,863,863],"tags":[1165],"class_list":["post-233947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kood","category-gutenberg-4","category-juhend-algajatele","category-muud","category-n-a","category-opetused","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233947"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233947\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224922"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}