{"id":228227,"date":"2022-10-18T11:16:00","date_gmt":"2022-10-18T08:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228227"},"modified":"2022-11-09T01:23:29","modified_gmt":"2022-11-08T22:23:29","slug":"anvaenda-wordpress-block-editor-gutenberg-med-rest-api","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/anvaenda-wordpress-block-editor-gutenberg-med-rest-api\/","title":{"rendered":"Anv\u00e4nda WordPress Block Editor (Gutenberg) med REST API"},"content":{"rendered":"\n

I min tidigare artikel pratade jag om hur man g\u00e5r igenom inl\u00e4gg och anpassade inl\u00e4ggstyper inom Gutenberg<\/a>. I det h\u00e4r inl\u00e4gget pratar jag om att ta emot och anv\u00e4nda anpassad data inom Gutenberg fr\u00e5n WordPress REST API-slutpunkter.<\/p>\n

I det h\u00e4r exemplet ska vi:<\/p>\n

REST API \u00e4r inte alltid r\u00e4tt v\u00e4g.<\/strong><\/p>\n

*Vi anv\u00e4nder get_option<\/code>endast i REST API som ett exempel. Om du bara beh\u00f6ver tillg\u00e5ng till ett alternativ och du inte t\u00e4nker \u00e4ndra dess tillst\u00e5nd, kan du ist\u00e4llet anv\u00e4nda wp_localize_script<\/code>f\u00f6r att skicka alternativen till JavaScript.<\/p>\n

Om du vill komma \u00e5t ett alternativ OCH \u00e4ndra dess tillst\u00e5nd rekommenderar jag att du l\u00e4ser min guide om hur du lagrar inst\u00e4llningar och data i alternativtabellen med Gutenberg med hj\u00e4lp av Settings API<\/a> .*<\/p>\n

Skapa en REST API-slutpunkt<\/h2>\n

Vi kommer att skapa en enkel REST API-slutpunkt som returnerar v\u00e4rdet av ett WordPress-alternativ (med 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
Efter att du har skapat den h\u00e4r slutpunkten, se till att spara dina permal\u00e4nkar<\/strong> p\u00e5 nytt s\u00e5 att de sl\u00e5r in. Observera att det finns b\u00e4ttre s\u00e4tt att g\u00f6ra detta p\u00e5 (som att anv\u00e4nda flush_rewrite_rules()<\/code>p\u00e5 register_activation_hook<\/code>), men f\u00f6r det h\u00e4r exemplet r\u00e4cker det med en snabb \u00e5terlagring.<\/p>\n
Nu n\u00e4r vi skickar webbadressen \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/test\/<\/code>(efter din egen dom\u00e4n uppenbarligen) till v\u00e5r webbl\u00e4sare kommer den att returnera ett v\u00e4rde, som antingen \u00e4r en tom str\u00e4ng ''<\/code>eller v\u00e4rdet p\u00e5 alternativet om det \u00e4r inst\u00e4llt.<\/p>\n
V\u00e5r slutpunkt, returnerar en tom str\u00e4ng<\/a> V\u00e5r slutpunkt, returnerar en tom str\u00e4ng<\/p>\n
Notera att jag m\u00e5lmedvetet har kommenterat raderna 12-14, vilket skulle s\u00e4kerst\u00e4lla att endast n\u00e5gon som har edit_post<\/code>r\u00e4ttigheter kan k\u00f6ra koden om den l\u00e4mnas inne. Men med denna kommenterade kan vi inte testa koden i v\u00e5r webbl\u00e4sare.<\/p>\n
F\u00f6rs\u00f6k att l\u00e4gga till kod f\u00f6r att ge ditt alternativ ett v\u00e4rde och se vad det ger. Till exempel om jag skulle k\u00f6ra f\u00f6ljande kod f\u00f6re min funktion:<\/p>\n
update_option( 'wcltd_example_option', 'Hello World' );\n<\/code><\/pre>\n
Om jag nu tr\u00e4ffar slutpunkten \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/wcltd_example_option\/<\/code>f\u00e5r jag f\u00f6ljande utdata:<\/p>\n
V\u00e5r slutpunkt, returnerar en del data.<\/p>\n
Registrera en databutik<\/h2>\n
Nu n\u00e4r vi har en REST API-slutpunkt kan vi skapa ett datalager med registerStore<\/code>.<\/p>\n
registerStore<\/code>tillhandah\u00e5ller ett Redux-liknande datalager som g\u00f6r det m\u00f6jligt f\u00f6r oss att hantera tillst\u00e5nd i hela v\u00e5r applikation. Den st\u00f6der ocks\u00e5 resolvers, som g\u00f6r det m\u00f6jligt f\u00f6r oss att fylla i staten fr\u00e5n en extern k\u00e4lla (som v\u00e5r REST API).<\/p>\n
Du kan l\u00e4sa mer om REACT-tillst\u00e5ndet i den officiella dokumentationen<\/a>.<\/p>\n
S\u00e5 h\u00e4r kan vi skapa en butik (som store.js<\/code>i v\u00e5rt projekt som g\u00f6r att vi kan h\u00e4mta data fr\u00e5n v\u00e5r REST API-slutpunkt.<\/p>\n
Beroenden<\/h3>\n
Vi kommer att beh\u00f6va extrahera apiFetch<\/code>och registerStore<\/code>fr\u00e5n v\u00e5ra WordPress-beroenden.<\/p>\n
import apiFetch from '@wordpress\/api-fetch';\nimport { registerStore } from '@wordpress\/data';\n<\/code><\/pre>\n
V\u00e4ljare<\/h3>\n
Det f\u00f6rsta vi vill g\u00f6ra \u00e4r att skapa en v\u00e4ljarfunktion, i ett objekt som kallas "selektorer".<\/p>\n
Allt detta g\u00f6r \u00e4r att extrahera "alternativet" fr\u00e5n staten och returnera det.<\/p>\n
const selectors = {\n    getOption( state, optionKey) {\n        const { option } = state;\n        return option;\n    },\n};\n<\/code><\/pre>\n
Uppl\u00f6sare<\/h3>\n
Resolvern \u00e4r en bieffekt av v\u00e4ljaren och g\u00f6r lite mer.<\/p>\n
H\u00e4r skapar vi v\u00e5r funktion som tar v\u00e5r optionKey och skickar en REST API-slutpunkt till v\u00e5ra \u00e5tg\u00e4rder (som vi kommer att definiera h\u00e4rn\u00e4st).<\/p>\n
Detta st\u00e4ller sedan in alternativet, med ytterligare en uppmaning till v\u00e5ra handlingar.<\/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
\u00c5tg\u00e4rder<\/h3>\n
De tv\u00e5 funktionerna i ett objekt med namn actions<\/code>som vi anropade tidigare definieras h\u00e4r.<\/p>\n
De indikerar vilken kontroll eller reducering vi ska anv\u00e4nda f\u00f6r att st\u00e4lla in eller f\u00e5 v\u00e4rdet.<\/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
Kontroller<\/h3>\n
I v\u00e5ra kontroller har vi GET_OPTION<\/code>som g\u00f6r att API-anropet anv\u00e4nder apiFetch<\/code>och den s\u00f6kv\u00e4g som vi definierade tidigare.<\/p>\n
const controls = {\n    GET_OPTION( action) {\n        return apiFetch( { path: action.path } );\n    },\n};\n<\/code><\/pre>\n
Reducerare<\/h3>\n
I v\u00e5r reducerfunktion har vi SET_OPTION<\/code>som tar v\u00e5rt v\u00e4rde (i detta fall option<\/code>och st\u00e4ller in dess tillst\u00e5nd.<\/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
Registrering av butiken<\/h3>\n
Slutligen registrerar vi en butik, ger den ett namnutrymme s\u00e5 att vi kan komma \u00e5t det och skickar in ett objekt med alla ovanst\u00e5ende objekt och funktioner.<\/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
export standardbutik;<\/p>\n
Anv\u00e4nda data med ett block<\/h2>\n
L\u00e5t oss ut\u00f6ka blocket som skapats av @wordpress\/create-block<\/code>skriptet som jag skrev om tidigare<\/a> f\u00f6r att g\u00f6ra det m\u00f6jligt f\u00f6r oss att ansluta till en REST API-slutpunkt.<\/p>\n
Skapa en fil i \/src<\/code>mappen som heter store.js<\/code>och kopiera all ovanst\u00e5ende kod till den:<\/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
Redigera nu v\u00e5r \/src\/index.js<\/code>fil f\u00f6r att inkludera store.js<\/code>filen:<\/p>\n
\nimport store from '.\/store';\nimport Edit from '.\/edit';\nimport save from '.\/save';\n<\/code><\/pre>\n
Vi m\u00e5ste ocks\u00e5 se till att vi har inkluderat withSelect<\/code>\u00f6verst i v\u00e5r fil:<\/p>\n
import { withSelect } from '@wordpress\/data';\n<\/code><\/pre>\n
L\u00e5t oss sedan sl\u00e5 in v\u00e5r redigeringsmodul withSelect<\/code>f\u00f6r att g\u00f6ra REST API-anropet till v\u00e5rt alternativ, s\u00e5 h\u00e4r:<\/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
Nu kan vi komma \u00e5t option<\/code>v\u00e5ra rekvisita inom edit.js<\/code>, s\u00e5 h\u00e4r:<\/p>\n
export default function Edit( { className, option }) {\n    return (<p className={ className }>\n            { option }\n        <\/p>\n    );\n}\n<\/code><\/pre>\n
Slutligen, l\u00e5t oss titta p\u00e5 v\u00e5rt block i editorn och se vad vi f\u00e5r:<\/p>\n
Utdata i blockredigeraren.<\/a> Utdata i blockredigeraren.<\/p>\n
Inspelningsk\u00e4lla:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
I min tidigare artikel pratade jag om hur man g\u00e5r igenom inl\u00e4gg och anpassade inl\u00e4ggstyper inom Gutenberg. I det h\u00e4r inl\u00e4gget pratar jag om att ta emot och anv\u00e4nda anpassade data inom 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":[901,922,724,868],"tags":[1173],"class_list":["post-228227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228227"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/220671"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}