{"id":228286,"date":"2022-10-18T11:41:00","date_gmt":"2022-10-18T08:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228286"},"modified":"2022-11-09T01:41:57","modified_gmt":"2022-11-08T22:41:57","slug":"korzystanie-z-edytora-blokow-wordpress-gutenberg-z-interfejsem-api-rest","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/korzystanie-z-edytora-blokow-wordpress-gutenberg-z-interfejsem-api-rest\/","title":{"rendered":"Korzystanie z edytora blok\u00f3w WordPress (Gutenberg) z interfejsem API REST"},"content":{"rendered":"\n

W moim poprzednim artykule m\u00f3wi\u0142em o tym, jak zap\u0119tli\u0107 posty i niestandardowe typy post\u00f3w w Gutenbergu<\/a>. W tym po\u015bcie m\u00f3wi\u0119 o otrzymywaniu i u\u017cywaniu niestandardowych danych w obr\u0119bie Gutenberga z punkt\u00f3w ko\u0144cowych WordPress REST API.<\/p>\n

W tym przyk\u0142adzie zamierzamy:<\/p>\n

REST API nie zawsze jest w\u0142a\u015bciw\u0105 \u015bcie\u017ck\u0105.<\/strong><\/p>\n

*W REST API u\u017cywamy get_option<\/code>tylko jako przyk\u0142adu. Je\u015bli potrzebujesz tylko dost\u0119pu do opcji i nie zamierzasz zmienia\u0107 jej stanu, mo\u017cesz zamiast tego wp_localize_script<\/code>przekaza\u0107 opcje do JavaScript.<\/p>\n

Je\u015bli chcesz uzyska\u0107 dost\u0119p do opcji ORAZ zmieni\u0107 jej stan, polecam przeczytanie mojego przewodnika na temat przechowywania ustawie\u0144 i danych w tabeli opcji za pomoc\u0105 Gutenberga za pomoc\u0105 interfejsu API ustawie\u0144<\/a> .*<\/p>\n

Tworzenie punktu ko\u0144cowego interfejsu API REST<\/h2>\n

Stworzymy prosty punkt ko\u0144cowy REST API, kt\u00f3ry zwraca warto\u015b\u0107 opcji WordPress (za pomoc\u0105 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
Po utworzeniu tego punktu ko\u0144cowego pami\u0119taj o ponownym zapisaniu permalink\u00f3w<\/strong>, aby uruchomi\u0142 si\u0119. Zauwa\u017c, \u017ce s\u0105 lepsze sposoby na zrobienie tego (na przyk\u0142ad u\u017cycie flush_rewrite_rules()<\/code>w register_activation_hook<\/code>), ale w tym przyk\u0142adzie wystarczy szybkie ponowne zapisanie.<\/p>\n
Teraz, gdy przeka\u017cemy adres URL \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/test\/<\/code>(oczywi\u015bcie po Twojej w\u0142asnej domenie) do naszej przegl\u0105darki, zwr\u00f3ci ona warto\u015b\u0107, kt\u00f3ra mo\u017ce by\u0107 albo pustym ci\u0105giem, ''<\/code>albo warto\u015bci\u0105 opcji, je\u015bli jest ustawiona.<\/p>\n
Nasz punkt ko\u0144cowy, zwracaj\u0105cy pusty ci\u0105g<\/a> Nasz punkt ko\u0144cowy, zwracaj\u0105cy pusty ci\u0105g<\/p>\n
Zwr\u00f3\u0107 uwag\u0119, \u017ce celowo wykomentowa\u0142em wiersze 12-14, co zapewni\u0142oby, \u017ce tylko kto\u015b, kto ma edit_post<\/code>uprawnienia, mo\u017ce uruchomi\u0107 kod, je\u015bli zostanie pozostawiony. Jednak z tym zakomentowaniem nie mo\u017cemy przetestowa\u0107 kodu w naszej przegl\u0105darce.<\/p>\n
Spr\u00f3buj doda\u0107 kod, aby nada\u0107 opcji warto\u015b\u0107 i zobacz, co zwraca. Na przyk\u0142ad, gdybym mia\u0142 uruchomi\u0107 nast\u0119puj\u0105cy kod przed moj\u0105 funkcj\u0105:<\/p>\n
update_option( 'wcltd_example_option', 'Hello World' );\n<\/code><\/pre>\n
Teraz, je\u015bli trafi\u0119 w punkt ko\u0144cowy \/wp-json\/wcltd\/wholesome-plugin\/v1\/get\/option\/wcltd_example_option\/<\/code>, otrzymam nast\u0119puj\u0105ce dane wyj\u015bciowe:<\/p>\n
Nasz punkt ko\u0144cowy, zwracaj\u0105cy troch\u0119 danych.<\/p>\n
Rejestracja magazynu danych<\/h2>\n
Teraz, gdy mamy punkt ko\u0144cowy REST API, mo\u017cemy utworzy\u0107 magazyn danych za pomoc\u0105 registerStore<\/code>.<\/p>\n
registerStore<\/code>zapewnia magazyn danych podobny do Redux, kt\u00f3ry umo\u017cliwia nam zarz\u0105dzanie stanem w ca\u0142ej naszej aplikacji. Obs\u0142uguje r\u00f3wnie\u017c przeliczniki, kt\u00f3re umo\u017cliwiaj\u0105 nam wype\u0142nienie stanu z zewn\u0119trznego \u017ar\u00f3d\u0142a (takiego jak nasz REST API).<\/p>\n
Wi\u0119cej o stanie REACT mo\u017cna przeczyta\u0107 w oficjalnej dokumentacji<\/a>.<\/p>\n
Oto jak mo\u017cemy stworzy\u0107 sklep (jak store.js<\/code>w naszym projekcie, kt\u00f3ry pozwoli nam pobiera\u0107 dane z naszego endpointu REST API.<\/p>\n
Zale\u017cno\u015bci<\/h3>\n
B\u0119dziemy musieli wyodr\u0119bni\u0107 apiFetch<\/code>i registerStore<\/code>z naszych zale\u017cno\u015bci od WordPressa.<\/p>\n
import apiFetch from '@wordpress\/api-fetch';\nimport { registerStore } from '@wordpress\/data';\n<\/code><\/pre>\n
Selektory<\/h3>\n
Pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 chcemy zrobi\u0107, jest utworzenie funkcji selektora w obiekcie zwanym selektorami.<\/p>\n
Wszystko, co robi, to wyodr\u0119bnienie \u201eopcji" ze stanu i zwr\u00f3cenie jej.<\/p>\n
const selectors = {\n    getOption( state, optionKey) {\n        const { option } = state;\n        return option;\n    },\n};\n<\/code><\/pre>\n
Resolwery<\/h3>\n
Przelicznik jest efektem ubocznym selektora i robi troch\u0119 wi\u0119cej.<\/p>\n
Tutaj tworzymy nasz\u0105 funkcj\u0119, kt\u00f3ra pobiera nasz optionKey i przekazuje punkt ko\u0144cowy REST API do naszych akcji (kt\u00f3re zdefiniujemy dalej).<\/p>\n
To nast\u0119pnie ustawia opcj\u0119, z kolejnym wezwaniem do naszych dzia\u0142a\u0144.<\/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
dzia\u0142ania<\/h3>\n
actions<\/code>W tym miejscu zdefiniowane s\u0105 dwie funkcje w obiekcie o nazwie, kt\u00f3ry wywo\u0142ali\u015bmy wcze\u015bniej.<\/p>\n
Wskazuj\u0105, kt\u00f3rego regulatora lub reduktora b\u0119dziemy u\u017cywa\u0107 do ustawienia lub uzyskania warto\u015bci.<\/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
Sterownica<\/h3>\n
W naszych kontrolkach mamy GET_OPTION<\/code>co sprawia, \u017ce \u200b\u200bwywo\u0142anie API wykorzystuje apiFetch<\/code>i \u015bcie\u017ck\u0119, kt\u00f3r\u0105 zdefiniowali\u015bmy wcze\u015bniej.<\/p>\n
const controls = {\n    GET_OPTION( action) {\n        return apiFetch( { path: action.path } );\n    },\n};\n<\/code><\/pre>\n
Reduktor<\/h3>\n
W naszej funkcji reduktora mamy funkcj\u0119, SET_OPTION<\/code>kt\u00f3ra przyjmuje nasz\u0105 warto\u015b\u0107 (w tym przypadku option<\/code>, i ustawia sw\u00f3j stan).<\/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
Rejestracja Sklepu<\/h3>\n
Na koniec rejestrujemy sklep, nadajemy mu przestrze\u0144 nazw, aby mie\u0107 do niego dost\u0119p, i przekazujemy obiekt wszystkich powy\u017cszych obiekt\u00f3w i funkcji.<\/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
eksportuj domy\u015blny sklep;<\/p>\n
U\u017cywanie danych z blokiem<\/h2>\n
Rozwi\u0144my blok stworzony przez @wordpress\/create-block<\/code>skrypt, o kt\u00f3rym pisa\u0142em wcze\u015bniej<\/a>, aby umo\u017cliwi\u0107 nam po\u0142\u0105czenie si\u0119 z punktem ko\u0144cowym REST API.<\/p>\n
Utw\u00f3rz plik w \/src<\/code>folderze o nazwie store.js<\/code>i skopiuj do niego ca\u0142y powy\u017cszy kod:<\/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
Teraz edytuj nasz \/src\/index.js<\/code>plik, aby do\u0142\u0105czy\u0107 store.js<\/code>plik:<\/p>\n
\nimport store from '.\/store';\nimport Edit from '.\/edit';\nimport save from '.\/save';\n<\/code><\/pre>\n
Musimy r\u00f3wnie\u017c upewni\u0107 si\u0119, \u017ce withSelect<\/code>u g\u00f3ry naszego pliku umie\u015bcili\u015bmy:<\/p>\n
import { withSelect } from '@wordpress\/data';\n<\/code><\/pre>\n
Nast\u0119pnie zapakujmy nasz modu\u0142 Edit, withSelect<\/code>aby wywo\u0142a\u0107 API REST do naszej opcji, tak jak poni\u017cej:<\/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
Teraz mo\u017cemy uzyska\u0107 dost\u0119p option<\/code>do naszych rekwizyt\u00f3w w edit.js<\/code>, na przyk\u0142ad:<\/p>\n
export default function Edit( { className, option }) {\n    return (<p className={ className }>\n            { option }\n        <\/p>\n    );\n}\n<\/code><\/pre>\n
Na koniec przejrzyjmy nasz blok w edytorze i zobaczmy, co otrzymamy:<\/p>\n
Dane wyj\u015bciowe w edytorze blok\u00f3w.<\/a> Dane wyj\u015bciowe w edytorze blok\u00f3w.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
W moim poprzednim artykule m\u00f3wi\u0142em o tym, jak zap\u0119tli\u0107 posty i niestandardowe typy post\u00f3w w Gutenbergu. W tym po\u015bcie m\u00f3wi\u0119 o otrzymywaniu i u\u017cywaniu niestandardowych danych w 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":[721,919,897,866],"tags":[1169],"class_list":["post-228286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-kod","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228286"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228286\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/220671"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}