{"id":228402,"date":"2022-10-18T11:45:00","date_gmt":"2022-10-18T08:45:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228402"},"modified":"2022-11-09T02:15:44","modified_gmt":"2022-11-08T23:15:44","slug":"wordpressi-plokiredaktori-gutenberg-kasutamine-koos-rest-api-ga","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-plokiredaktori-gutenberg-kasutamine-koos-rest-api-ga\/","title":{"rendered":"WordPressi plokiredaktori (Gutenberg) kasutamine koos REST API-ga"},"content":{"rendered":"\n

Oma eelmises artiklis r\u00e4\u00e4kisin sellest, kuidas Gutenbergis postitusi ja kohandatud postitust\u00fc\u00fcpe sirvida<\/a>. Selles postituses r\u00e4\u00e4gin kohandatud andmete saamisest ja kasutamisest Gutenbergis WordPress REST API l\u00f5pp-punktidest.<\/p>\n

Selles n\u00e4ites teeme j\u00e4rgmist:<\/p>\n

REST API ei ole alati \u00f5ige tee.<\/strong><\/p>\n

*Kasutame get_option<\/code>REST API-s ainult n\u00e4itena. Kui vajate juurdep\u00e4\u00e4su ainult valikule ja te ei kavatse selle olekut muuta, saate selle asemel kasutada wp_localize_script<\/code>suvandite edastamiseks JavaScripti.<\/p>\n

Kui soovite juurdep\u00e4\u00e4su valikule JA selle olekut muuta, soovitan lugeda minu juhendit seadete ja andmete salvestamise kohta suvandite tabelis Gutenbergiga, kasutades seadete API-t<\/a> .*<\/p>\n

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

Loome lihtsa REST API l\u00f5pp-punkti, mis tagastab WordPressi valiku v\u00e4\u00e4rtuse (kasutades 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
P\u00e4rast selle l\u00f5pp-punkti loomist salvestage kindlasti oma p\u00fcsilingid uuesti<\/strong>, et see t\u00f6\u00f6le hakkaks. Pange t\u00e4hele, et selleks on paremaid viise (n\u00e4iteks kasutades flush_rewrite_rules()<\/code>) register_activation_hook<\/code>, kuid selle n\u00e4ite puhul piisab kiirest uuesti salvestamisest.<\/p>\n
N\u00fc\u00fcd, kui edastame URL-i \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/test\/<\/code>(ilmselt teie enda domeeni j\u00e4rel) oma brauserisse, tagastab see v\u00e4\u00e4rtuse, mis on kas t\u00fchi string ''<\/code>v\u00f5i suvandi v\u00e4\u00e4rtus, kui see on m\u00e4\u00e4ratud.<\/p>\n
Meie l\u00f5pp-punkt, tagastab t\u00fchja stringi<\/a> Meie l\u00f5pp-punkt, tagastab t\u00fchja stringi<\/p>\n
Pange t\u00e4hele, et olen sihip\u00e4raselt kommenteerinud ridu 12-14, mis tagaks, et edit_post<\/code>koodi sisse j\u00e4tmise korral saaks k\u00e4ivitada ainult see, kellel on \u00f5igused. Kuid selle v\u00e4ljakommenteerimisega ei saa me koodi oma brauseris testida.<\/p>\n
Proovige lisada koodi, et anda oma valikule v\u00e4\u00e4rtus, ja vaadake, mida see tagastab. N\u00e4iteks kui ma peaksin enne funktsiooni k\u00e4ivitama j\u00e4rgmise koodi:<\/p>\n
update_option( 'wcltd_example_option', 'Hello World' );\n<\/code><\/pre>\n
N\u00fc\u00fcd, kui ma taban l\u00f5pp-punkti \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/wcltd_example_option\/<\/code>, saan j\u00e4rgmise v\u00e4ljundi:<\/p>\n
Meie l\u00f5pp-punkt, tagastab m\u00f5ned andmed.<\/p>\n
Andmesalve registreerimine<\/h2>\n
N\u00fc\u00fcd, kui meil on REST API l\u00f5pp-punkt, saame luua andmesalve rakendusega registerStore<\/code>.<\/p>\n
registerStore<\/code>pakub Reduxi-laadset andmesalve, mis v\u00f5imaldab meil hallata olekut kogu meie rakenduses. See toetab ka lahendajaid, mis v\u00f5imaldavad meil sisestada oleku v\u00e4lisest allikast (nt meie REST API).<\/p>\n
REACT oleku kohta saate rohkem lugeda ametlikust dokumentatsioonist<\/a>.<\/p>\n
Siin on, kuidas saame poe luua (nagu store.js<\/code>meie projektis, mis v\u00f5imaldab meil t\u00f5mmata andmeid meie REST API l\u00f5pp-punktist.<\/p>\n
S\u00f5ltuvused<\/h3>\n
Peame eraldama oma WordPressi s\u00f5ltuvused apiFetch<\/code>ja nendest.registerStore<\/code><\/p>\n
import apiFetch from '@wordpress\/api-fetch';\nimport { registerStore } from '@wordpress\/data';\n<\/code><\/pre>\n
Valijad<\/h3>\n
Esimese asjana tahame luua valikufunktsiooni objektis nimega "selektorid".<\/p>\n
K\u00f5ik see v\u00f5tab osariigist v\u00e4lja valiku ja tagastab selle.<\/p>\n
const selectors = {\n    getOption( state, optionKey) {\n        const { option } = state;\n        return option;\n    },\n};\n<\/code><\/pre>\n
Lahendajad<\/h3>\n
Lahendaja on valija k\u00f5rvalm\u00f5ju ja teeb natuke rohkem.<\/p>\n
Siin loome oma funktsiooni, mis v\u00f5tab meie optionKey ja edastab meie toimingutele REST API l\u00f5pp-punkti (mille m\u00e4\u00e4ratleme j\u00e4rgmisena).<\/p>\n
Seej\u00e4rel seab see valiku koos uue kutsega meie tegevusele.<\/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
Tegevused<\/h3>\n
Siin on m\u00e4\u00e4ratletud kaks funktsiooni nimega objektis actions<\/code>, mida me varem kutsusime.<\/p>\n
Need n\u00e4itavad, millist juhtseadet v\u00f5i reduktorit me v\u00e4\u00e4rtuse m\u00e4\u00e4ramiseks v\u00f5i saamiseks kasutame.<\/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
Juhtnupud<\/h3>\n
Meie juhtelementides on GET_OPTION<\/code>see, mis teeb API-k\u00f5ne kasutades apiFetch<\/code>ja varem m\u00e4\u00e4ratletud teed.<\/p>\n
const controls = {\n    GET_OPTION( action) {\n        return apiFetch( { path: action.path } );\n    },\n};\n<\/code><\/pre>\n
Reduktor<\/h3>\n
Meie redutseerimisfunktsioonis on see, SET_OPTION<\/code>mis v\u00f5tab meie v\u00e4\u00e4rtuse (antud juhul option<\/code>ja m\u00e4\u00e4rab selle oleku.<\/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
Kaupluse registreerimine<\/h3>\n
L\u00f5puks registreerime poe, anname sellele nimeruumi, et saaksime sellele juurde p\u00e4\u00e4seda, ja edastame k\u00f5igi \u00fclaltoodud objektide ja funktsioonide objekti.<\/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
ekspordi vaikepood;<\/p>\n
Andmete kasutamine plokiga<\/h2>\n
Laiendame skripti loodud plokki @wordpress\/create-block<\/code>, millest ma varem kirjutasin,<\/a> et saaksime luua \u00fchenduse REST API l\u00f5pp-punktiga.<\/p>\n
Looge \/src<\/code>kaustas nimega fail store.js<\/code>ja kopeerige sinna kogu \u00fclaltoodud kood:<\/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
N\u00fc\u00fcd muutke meie \/src\/index.js<\/code>faili, et lisada store.js<\/code>fail:<\/p>\n
\nimport store from '.\/store';\nimport Edit from '.\/edit';\nimport save from '.\/save';\n<\/code><\/pre>\n
Samuti peame tagama, et oleme withSelect<\/code>faili \u00fclaossa lisanud:<\/p>\n
import { withSelect } from '@wordpress\/data';\n<\/code><\/pre>\n
Seej\u00e4rel m\u00e4hime oma redigeerimismooduli sisse, withSelect<\/code>et teha REST API k\u00f5ne meie valikule, n\u00e4iteks j\u00e4rgmiselt:<\/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
N\u00fc\u00fcd p\u00e4\u00e4seme option<\/code>oma rekvisiitidele juurde domeenis edit.js<\/code>, n\u00e4iteks j\u00e4rgmiselt:<\/p>\n
export default function Edit( { className, option }) {\n    return (<p className={ className }>\n            { option }\n        <\/p>\n    );\n}\n<\/code><\/pre>\n
L\u00f5puks vaatame oma plokki redaktoris ja vaatame, mida me saame:<\/p>\n
V\u00e4ljund plokiredaktoris.<\/a> V\u00e4ljund plokiredaktoris.<\/p>\n
:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Oma eelmises artiklis r\u00e4\u00e4kisin sellest, kuidas Gutenbergis postitusi ja kohandatud postitust\u00fc\u00fcpe sirvida. Selles postituses r\u00e4\u00e4gin kohandatud andmete vastuv\u00f5tmisest ja kasutamisest Gutenbergi 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":[718,894,916,863],"tags":[1165],"class_list":["post-228402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-muud","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228402","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=228402"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228402\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/220671"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}