{"id":233727,"date":"2023-02-20T16:24:00","date_gmt":"2023-02-20T13:24:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233727"},"modified":"2023-02-24T18:25:46","modified_gmt":"2023-02-24T15:25:46","slug":"dodaj-niestandardowy-pasek-boczny-inspektora-w-wordpress-gutenberg-za-pomoca-post-meta","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodaj-niestandardowy-pasek-boczny-inspektora-w-wordpress-gutenberg-za-pomoca-post-meta\/","title":{"rendered":"Dodaj niestandardowy pasek boczny inspektora w WordPress Gutenberg za pomoc\u0105 Post Meta"},"content":{"rendered":"\n

W tym samouczku przyjrzymy si\u0119, jak doda\u0107 niestandardowy pasek boczny do Inspektora (prawy pasek boczny) w WordPress Gutenberg. Wewn\u0105trz zaimplementujemy pole po\u0142\u0105czone z meta postu. Wszystko jest zaimplementowane za pomoc\u0105 Javascript, wewn\u0105trz edytora Gutenberga i jest alternatyw\u0105 do dodawania metaboks\u00f3w w tradycyjny spos\u00f3b.<\/p>\n

\"Dodaj<\/a><\/p>\n

Heads-up!<\/h3>\n

To jest samouczek dotycz\u0105cy tworzenia w\u0142asnego niestandardowego paska bocznego. Ale je\u015bli interesuje Ci\u0119 tylko dodanie meta\/ustawie\u0144 do standardowego paska bocznego Inspektora (zak\u0142adka \u201eDokument"), mam na to samouczek:<\/p>\n

Co stworzymy<\/h2>\n

WordPress Gutenberg umo\u017cliwia programistom tworzenie niestandardowych pask\u00f3w bocznych za pomoc\u0105 tak zwanej wtyczki Javascript. (Nie myli\u0107 z tradycyjnymi wtyczkami WordPress). Za pomoc\u0105 wtyczki JavaScript mo\u017cemy stworzy\u0107 nowy pasek boczny, a tak\u017ce pod\u0142\u0105czy\u0107 do menu \u201eNarz\u0119dzia i opcje”.<\/p>\n

Dodamy nowy element menu w \u201eNarz\u0119dzia”, kt\u00f3ry otworzy nasz niestandardowy pasek boczny. Zawarto\u015b\u0107 paska bocznego zale\u017cy wy\u0142\u0105cznie od Ciebie, ale om\u00f3wi\u0119 kilka przyk\u0142ad\u00f3w, w tym spos\u00f3b po\u0142\u0105czenia w nim pola meta postu.<\/p>\n

\"Dodaj<\/a><\/p>\n

Konfiguracja JavaScript<\/h2>\n

W tym samouczku napisz\u0119 JavaScript ES6\/ESNext z JSX, co oznacza, \u017ce \u200b\u200bmusimy skonfigurowa\u0107 kompilator. Je\u015bli chcesz pod\u0105\u017ca\u0107 dalej i nie pisa\u0107 JavaScript ES5, b\u0119dziesz musia\u0142 skonfigurowa\u0107 \u015brodowisko programistyczne, kt\u00f3re b\u0119dzie kompilowa\u0107 Tw\u00f3j Javascript na bie\u017c\u0105co. Je\u015bli nie znasz tego, post\u0119puj zgodnie z moim postem wyja\u015bniaj\u0105cym, jak to skonfigurowa\u0107<\/a>, a nast\u0119pnie wr\u00f3\u0107 tutaj.<\/p>\n

Skonfigurowa\u0142em m\u00f3j, webpack.config.js<\/code>aby skompilowa\u0107 m\u00f3j \u017ar\u00f3d\u0142owy plik JavaScript do mojego folderu motywu \/assets\/js\/sidebar-plugin.js<\/code>. Ten skompilowany plik jest tym, czego potrzebujemy do umieszczenia w kolejce do edytora Gutenberga. Kiedy pisz\u0119 ten kod, uruchomi\u0142em kompilator run-time, kt\u00f3ry rekompiluje JavaScript za ka\u017cdym razem, gdy zapisuj\u0119 zmiany w kodzie \u017ar\u00f3d\u0142owym (npm run start<\/code>). Wszystko to zosta\u0142o szczeg\u00f3\u0142owo wyja\u015bnione we wcze\u015bniej wspomnianym samouczku.<\/p>\n

Pisz\u0119 to w motywie, ale dzia\u0142a tak samo we wtyczce. Pami\u0119taj tylko o dostosowaniu \u015bcie\u017cek podczas dodawania skryptu do edytora.<\/p>\n

Dodanie skryptu do edytora<\/h2>\n

Aby doda\u0107 nasz skrypt do edytora Gutenberga, musimy napisa\u0107 troch\u0119 PHP. Je\u015bli jeste\u015b w motywie, functions.php<\/code>jest to dobre miejsce do rozpocz\u0119cia lub gdzie\u015b w plikach wtyczek. Zauwa\u017c, \u017ce musimy doda\u0107 ostateczny skompilowany skrypt, a nie kod \u017ar\u00f3d\u0142owy. W moim przyk\u0142adzie skompilowany JavaScript znajduje si\u0119 w moim folderze motywu \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\n

Tworzymy funkcj\u0119 podpi\u0119t\u0105 do enqueue_block_editor_assets<\/code>. Wewn\u0105trz robimy to co zwykle [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. Jako zale\u017cno\u015bci do skryptu dodajemy dwa; wp-plugins<\/code>, i wp-edit-post<\/code>. Te dwa pakiety musz\u0105 zosta\u0107 za\u0142adowane przed naszym skryptem, poniewa\u017c u\u017cywamy z nich funkcji.<\/p>\n

add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});<\/code><\/pre>\n
Poniewa\u017c umieszczamy skrypt w kolejce w hooku, enqueue_block_editor_assets<\/code>nasz skrypt zostanie za\u0142adowany tylko wtedy, gdy aktywny jest edytor Gutenberga. \u015awietny! Teraz wszystko jest gotowe do napisania naszej wtyczki Javascript.<\/p>\n
Zarejestruj wtyczk\u0119 JavaScript<\/h2>\n
Pierwszym krokiem jest zarejestrowanie wtyczki. Robimy to za pomoc\u0105 [registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>funkcji w wp.plugins z wn\u0119trza wp.plugins<\/code>pakietu.<\/p>\n
Jako parametr registerPlugin podajemy nazw\u0119 (upewnij si\u0119, \u017ce jest unikalna) oraz obiekt z ustawieniami. Jako minimum musisz dostarczy\u0107 komponent dla w\u0142a\u015bciwo\u015bci renderowania. Mo\u017cesz r\u00f3wnie\u017c opcjonalnie doda\u0107 ikon\u0119 z dashikon\u00f3w WordPressa<\/a>. Pami\u0119taj, \u017ce je\u015bli nie okre\u015blisz ikony, powr\u00f3ci ona do ikony wtyczki. Do cel\u00f3w demonstracyjnych u\u017cywam 'carrot'<\/code>ikony.<\/p>\n
Je\u015bli chodzi o komponent, zaczynamy od zdefiniowania podstawowego komponentu, kt\u00f3ry zwraca prosty div z losowym tekstem w nim. A przed ca\u0142ym kodem destrukturyzujemy funkcje z pakiet\u00f3w, kt\u00f3rych chcemy u\u017cy\u0107.<\/p>\n
const { registerPlugin } = wp.plugins;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <div>Hey!<\/div>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Je\u015bli nic si\u0119 nie stanie (nawet b\u0142\u0119dy), gdy od\u015bwie\u017cysz Gutenberga, wszyscy jeste\u015bmy gotowi. Nie widzimy naszego komponentu, poniewa\u017c nie powiedzieli\u015bmy WordPressowi, gdzie ma go renderowa\u0107. Nast\u0119pnym krokiem jest pod\u0142\u0105czenie do niestandardowego menu paska bocznego i komponent\u00f3w menu narz\u0119dzi do renderowania naszych rzeczy.<\/p>\n
Zarejestruj niestandardowy pasek boczny<\/h2>\n
Ale najpierw wyja\u015bnienie, w jaki spos\u00f3b Gutenberg obs\u0142uguje niestandardowe paski boczne i dlaczego musimy robi\u0107 to, co zrobimy. Kiedy pomy\u015blnie zarejestrujemy niestandardowy pasek boczny, na pocz\u0105tku automatycznie wydarzy si\u0119 jedna rzecz. Gutenberg doda skr\u00f3t do naszego paska bocznego na g\u00f3rnym pasku narz\u0119dzi, obok menu Narz\u0119dzia. Dzieje si\u0119 tak, poniewa\u017c nasz pasek boczny jest automatycznie \u201eprzypinany”.<\/p>\n
\"Dodaj<\/a><\/p>\n
Problem z dodaniem niestandardowego paska bocznego polega na tym, \u017ce ka\u017cdy u\u017cytkownik mo\u017ce \u201eodpi\u0105\u0107” ten skr\u00f3t. Kiedy to zrobi\u0105, nie ma punktu dost\u0119pu, aby ponownie otworzy\u0107 pasek boczny! Dlatego musimy r\u00f3wnie\u017c doda\u0107 element menu do menu Narz\u0119dzia.<\/p>\n
Rejestracja niestandardowego paska bocznego odbywa si\u0119 za pomoc\u0105 komponentu PluginSidebar<\/code>z wp.editPost<\/code>pakietu. Dodanie pozycji menu do menu Narz\u0119dzia odbywa si\u0119 za pomoc\u0105 trafnie nazwanego komponentu PluginSidebarMoreMenuItem<\/code>(r\u00f3wnie\u017c w wp.editPost<\/code>pakiecie).<\/p>\n
Dla PluginSidebar<\/code>komponentu musimy dostarczy\u0107 kilka rekwizyt\u00f3w. Powiniene\u015b poda\u0107 jako minimum name<\/code>i title<\/code>. Rekwizyt title<\/code>nie wymaga wyja\u015bnie\u0144, jest to nazwa, kt\u00f3ra pojawi si\u0119 na g\u00f3rze paska bocznego. W rekwizycie name<\/code>zapewnij unikalny \u015blimak. Po dodaniu elementu menu musisz odwo\u0142a\u0107 si\u0119 do tego \u015blimaka.<\/p>\n
Dodanie PluginSidebarMoreMenuItem<\/code>komponentu (menu narz\u0119dzi) wymaga co najmniej jednego atrybutu; target<\/code>. Tutaj podajesz tak\u0105 sam\u0105 nazw\u0119, jak\u0105 poda\u0142e\u015b w rekwizycie paska bocznego name<\/code>. Jako zawarto\u015b\u0107 komponentu wpisujesz tekst, kt\u00f3ry b\u0119dzie wy\u015bwietlany jako pozycja menu. Zwykle b\u0119dzie to to samo, co na pasku bocznym title<\/code>.<\/p>\n
Poniewa\u017c React wymaga pojedynczego w\u0119z\u0142a zawijaj\u0105cego wok\u00f3\u0142 zwrotu komponentu, zawijamy wszystko wewn\u0105trz Fragment<\/code>komponentu (z wp.element<\/code>pakietu). Zawijam r\u00f3wnie\u017c moje ci\u0105gi __()<\/code>z wp.i18n<\/code>pakietu, aby umo\u017cliwi\u0107 t\u0142umaczenie.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <Fragment>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >Hello there.<\/PluginSidebar>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Z powy\u017cszym kodem otrzymamy nast\u0119puj\u0105ce dwie (najprawdopodobniej trzy) rzeczy, kt\u00f3re si\u0119 wydarz\u0105. Otrzymasz skr\u00f3t do ikony marchewki na pasku narz\u0119dzi (je\u015bli jeszcze go nie odpi\u0105\u0142e\u015b). Klikni\u0119cie tego otworzy pasek boczny. Otrzymasz r\u00f3wnie\u017c nowy element menu na pasku bocznym w menu Narz\u0119dzia, pod nag\u0142\u00f3wkiem \u201eWtyczki”.<\/p>\n
\"Dodaj<\/a><\/p>\n
Dodawanie tre\u015bci do paska bocznego<\/h2>\n
Rzeczywista zawarto\u015b\u0107 paska bocznego zale\u017cy wy\u0142\u0105cznie od Ciebie. Musisz tylko doda\u0107 kod HTML lub komponenty wewn\u0105trz PluginSidebar<\/code>komponentu z tym, co chcesz (zamiast tekstu \u201eWitaj”.).<\/p>\n
Mo\u017cesz zauwa\u017cy\u0107, \u017ce w tre\u015bci paska bocznego brakuje wype\u0142nienia. Jest to celowe, poniewa\u017c pomys\u0142 polega na tym, \u017ce tworzysz panele wewn\u0105trz tego paska bocznego. Panele to sk\u0142adane sekcje na normalnym pasku bocznym Gutenberga. S\u0105 to komponenty, kt\u00f3re mo\u017cesz bardzo \u0142atwo doda\u0107 do niestandardowego paska bocznego. Mo\u017cesz doda\u0107 tyle paneli, ile chcesz i \u015bwietnie nadaj\u0105 si\u0119 do grupowania r\u00f3\u017cnych rzeczy.<\/p>\n
Dodawanie paneli do naszego paska bocznego<\/h3>\n
Przyjrzyjmy si\u0119 szybko, jak mo\u017cemy doda\u0107 panele do naszego paska bocznego. Je\u015bli stworzy\u0142e\u015b w\u0142asne niestandardowe typy blok\u00f3w, by\u0107 mo\u017ce znasz te komponenty. U\u017cywamy PanelBody<\/code>i opcjonalnie PanelRow<\/code>z wp.components<\/code>pakietu.<\/p>\n
Dla PanelBody<\/code>komponentu podajesz jako minimum rekwizyt title<\/code>. Mo\u017cesz opcjonalnie poda\u0107 warto\u015b\u0107 true lub false do w\u0142a\u015bciwo\u015bci, initialOpen<\/code>aby zdecydowa\u0107, czy panel powinien by\u0107 rozwini\u0119ty domy\u015blnie, czy nie. Poniewa\u017c zawarto\u015b\u0107 wewn\u0105trz komponentu to wszystko, co znajduje si\u0119 w panelu.<\/p>\n
Wewn\u0105trz a PanelBody<\/code>mo\u017cesz opcjonalnie u\u017cy\u0107 PanelRow<\/code>komponent\u00f3w. Nie s\u0105 one naprawd\u0119 potrzebne, ale mog\u0105 pom\u00f3c w uzyskaniu dobrego stylu tre\u015bci panelu.<\/p>\n
Na przyk\u0142ad dodajmy dwa panele do naszego niestandardowego paska bocznego.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        Put any component or content here.\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Dzi\u0119ki temu kodowi nasz niestandardowy pasek boczny zaczyna wygl\u0105da\u0107 tak, jakby nale\u017ca\u0142 do Gutenberga!<\/p>\n
\"Dodaj<\/a><\/p>\n
Dodawanie p\u00f3l meta postu do niestandardowego paska bocznego<\/h2>\n
Teraz naprawd\u0119 wchodzimy w sedno przydatnych element\u00f3w niestandardowego paska bocznego; dodawanie ustawie\u0144 i przechowywanie ich warto\u015bci. Ale najpierw musimy zrozumie\u0107, jak.<\/p>\n
Naprawd\u0119 \u0142atwo jest doda\u0107 pola ustawie\u0144 (wej\u015bciowe, pola wyboru, pola prze\u0142\u0105czania itp.) na pasku bocznym, korzystaj\u0105c z gotowych do u\u017cycia komponent\u00f3w w pakietach WordPressa. Musimy jednak zastanowi\u0107 si\u0119, jak przechowywa\u0107 warto\u015bci. Oczywist\u0105 opcj\u0105 jest przechowywanie ich jako post meta. Ale pod\u0142\u0105czenie ustawienia do pola meta postu wymaga dodatkowego kodu. Dok\u0142adniej, musimy u\u017cy\u0107 tak zwanych komponent\u00f3w wy\u017cszego rz\u0119du<\/a>, aby pobra\u0107 i zaktualizowa\u0107 post meta wewn\u0105trz Javascript. Musimy r\u00f3wnie\u017c zarejestrowa\u0107 ka\u017cd\u0105 meta posta za pomoc\u0105 PHP i udost\u0119pni\u0107 j\u0105 REST API.<\/p>\n
Na zako\u0144czenie tego samouczka zademonstruj\u0119, jak doda\u0107 meta posta z kluczem awp_my_custom_meta<\/code>, kt\u00f3ry powinien by\u0107 przechowywany jako prawda lub fa\u0142sz. Na pasku bocznym b\u0119dzie wy\u015bwietlany jako pole prze\u0142\u0105czania (sk\u0142adnik prawda\/fa\u0142sz).<\/p>\n
Zarejestruj meta posta dla REST API<\/h3>\n
Pierwszym krokiem do dodania meta postu w naszym pliku Javascript jest ich zarejestrowanie i zdefiniowanie jako dost\u0119pne w REST API. W tym celu ponownie wracamy do PHP.<\/p>\n
Wewn\u0105trz funkcji podpi\u0119tej do init<\/code>akcji u\u017cywamy [register_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_meta\/)()<\/code>funkcji. Jako parametry musimy zdefiniowa\u0107 typ obiektu jako ’ post<\/code>’ poniewa\u017c u\u017cywamy go jako meta postu (nie wyklucza to np. typu page post). Podajemy metaklucz, a nast\u0119pnie tablic\u0119 argument\u00f3w. Najwa\u017cniejsz\u0105 rzecz\u0105 do dodania w tablicy arguments jest ustawienie ’ show_in_rest<\/code>’ na true<\/code>. Post meta jest powszechnie u\u017cywany jako \u201e single<\/code>” (pomy\u015bl, jak u\u017cywasz get_post_meta()<\/code>). Definiujemy r\u00f3wnie\u017c type<\/code>. W naszym przypadku ustawili\u015bmy go na ’ boolean<\/code>’.<\/p>\n
add_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
Za pomoc\u0105 tego kodu ’ awp_my_custom_meta<\/code>’ post metapole jest dost\u0119pne z Gutenberga. Musisz powt\u00f3rzy\u0107 register_meta()<\/code>dla ka\u017cdego meta postu, kt\u00f3ry chcesz doda\u0107 na pasku bocznym.<\/p>\n
Wr\u00f3\u0107my teraz do naszego JavaScriptu.<\/p>\n
Dodawanie ustawienia do naszego paska bocznego<\/h3>\n
Zacznijmy od prostej cz\u0119\u015bci: dodania danych wej\u015bciowych do naszego paska bocznego. P\u00f3\u017aniej dodamy wi\u0119cej kodu, aby faktycznie po\u0142\u0105czy\u0107 pole ustawie\u0144 z postem meta. Ze wzgl\u0119du na spos\u00f3b, w jaki musimy to zrobi\u0107, definiujemy osobny nowy sk\u0142adnik dla naszego ustawienia. Tak wi\u0119c w panelu, do kt\u00f3rego chcesz doda\u0107 swoje ustawienia, po prostu nazwij ten nowy komponent.<\/p>\n
Nazwijmy komponent CustomSidebarMetaComponent<\/code>(mo\u017cesz nazwa\u0107 go czym\u015b istotnym dla twojego projektu). Wewn\u0105trz tego komponentu chcemy wyrenderowa\u0107 pole prze\u0142\u0105czania. W tym celu u\u017cywamy ToggleControl<\/code>komponentu z wp.components<\/code>pakietu. Jako rekwizyty do ToggleControl dostarczamy etykiet\u0119 dopasowania w rekwizycie title<\/code>. ToggleControl potrzebuje r\u00f3wnie\u017c rekwizyt\u00f3w onChange<\/code>do aktualizacji warto\u015bci i checked<\/code>bie\u017c\u0105cej warto\u015bci. Na razie pominiemy te dwie rzeczy do nast\u0119pnego kroku.<\/p>\n
...\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\n\u00a0\nconst CustomSidebarMetaComponent = () => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...       \n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMetaComponent \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Z powy\u017cszym kodem powiniene\u015b otrzyma\u0107 pole prze\u0142\u0105czania na pasku bocznym. Nie jest zaznaczona i nic si\u0119 nie dzieje po klikni\u0119ciu. To kolejny krok: po\u0142\u0105czenie go z nasz\u0105 meta postu.<\/p>\n
Dost\u0119p do meta postu za pomoc\u0105 funkcji withSelect i withDispatch<\/h3>\n
Aby uzyska\u0107 dost\u0119p, a tak\u017ce zaktualizowa\u0107 post meta warto\u015b\u0107, musimy u\u017cy\u0107 komponent\u00f3w wy\u017cszego rz\u0119du (HOC), aby uzyska\u0107 dost\u0119p do wersji sklep\u00f3w WordPress (podobnej do Redux). WordPress dostarcza nam kilka przydatnych KWR z funkcjami, kt\u00f3re mo\u017cemy wykorzysta\u0107 w wp.data<\/code>pakiecie.<\/p>\n
Komponent wy\u017cszego rz\u0119du [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>dostarcza naszemu komponentowi w\u0142a\u015bciwo\u015bci, kt\u00f3re w naszym przypadku s\u0105 pobierane z post meta. U\u017cywamy tego, aby uzyska\u0107 warto\u015b\u0107 naszej meta postu. Wewn\u0105trz withSelect<\/code>mo\u017cemy u\u017cy\u0107 select('core\/editor').getEditedPostAttribute('meta')<\/code>do pobrania meta bie\u017c\u0105cego posta.<\/p>\n
Z drugiej strony [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withDispatch)<\/code>jest komponentem wy\u017cszego rz\u0119du, kt\u00f3ry mo\u017ce wykonywa\u0107 akcje. W naszym przypadku chcemy zaktualizowa\u0107 meta postu, gdy odpowiednie ustawienie pola zostanie zmienione na naszym pasku bocznym. Wewn\u0105trz tego komponentu u\u017cywamy dispatch('core\/editor').editPost()<\/code>do poinformowania WordPressa, aby wys\u0142a\u0142 akcj\u0119. Wewn\u0105trz dostarczonego obiektu m\u00f3wimy WordPressowi, \u017ce to meta, kt\u00f3r\u0105 chcemy zaktualizowa\u0107.<\/p>\n
Na koniec musimy po\u0142\u0105czy\u0107 withSelect<\/code>i withDispatch<\/code>z naszym komponentem, kt\u00f3ry obs\u0142uguje metapole postu (CustomSidebarMetaComponent<\/code>). W tym celu u\u017cywamy WordPressa compose<\/code>z wp.compose<\/code>pakietu. Idea jest taka withSelect<\/code>i withDispatch<\/code>dostarcza naszemu CustomSidebarMetaComponent<\/code>komponentowi rekwizyty. withSelect<\/code>udost\u0119pnia warto\u015b\u0107 meta postu jako prop i withDispatch<\/code>udost\u0119pnia funkcj\u0119, kt\u00f3r\u0105 mo\u017cemy wywo\u0142a\u0107, aby zaktualizowa\u0107 warto\u015b\u0107 jako prop. Ustawiamy te w\u0142a\u015bciwo\u015bci odpowiednio na nasze ToggleField checked<\/code>i onChange<\/code>.<\/p>\n
To du\u017co wyja\u015bniania. Sp\u00f3jrzmy na rzeczywisty kod:<\/p>\n
...\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...\n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMeta \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Zacznijmy od pocz\u0105tku. Kt\u00f3ry jest na dole. W linii #36<\/code>zmieniamy komponent, kt\u00f3ry renderujemy na naszym pasku bocznym, na komponent, za pomoc\u0105 kt\u00f3rego stworzyli\u015bmy compose<\/code>(at line #15<\/code>). Komponent CustomSidebarMeta<\/code>po\u0142\u0105czy sk\u0142adniki withSelect<\/code>i withDispatch<\/code>i zwr\u00f3ci CustomSidebarMetaComponent<\/code>.<\/p>\n
CustomSidebarMetaComponent<\/code>B\u0119d\u0105 mieli dost\u0119p do rekwizytu customPostMetaValue<\/code>z withSelect<\/code>, a setCustomPostMeta<\/code>rekwizyt z withDispatch<\/code>tych dw\u00f3ch u\u017cywamy do rekwizyt\u00f3w checked<\/code>i onChange<\/code>rekwizyt\u00f3w w ToggleField<\/code>.<\/p>\n
Zauwa\u017c, \u017ce w linii #5<\/code>dodajemy props<\/code>parametry do komponent\u00f3w, aby udost\u0119pni\u0107 props w komponencie.<\/p>\n
Podsumowanie i ostatnie s\u0142owa<\/h2>\n
Mam nadziej\u0119, \u017ce ten samouczek by\u0142 dla ciebie przydatny. To w\u0142a\u015bnie uda\u0142o mi si\u0119 zrozumie\u0107 na ten temat podczas wielu pr\u00f3b i b\u0142\u0119d\u00f3w. Nie ma jeszcze prawie \u017cadnej dokumentacji na ten temat. Nadal zmagam si\u0119 z tym, zw\u0142aszcza je\u015bli chodzi o sprawn\u0105 obs\u0142ug\u0119 wielu meta post\u00f3w. Je\u015bli uda mi si\u0119 nauczy\u0107 kilku dobrych sztuczek, na pewno zaktualizuj\u0119 ten samouczek!<\/p>\n
Mam nadziej\u0119, \u017ce post\u0119puj\u0105c zgodnie z tym samouczkiem, powiniene\u015b mie\u0107 kod, kt\u00f3ry z powodzeniem doda nowy niestandardowy pasek boczny do edytora WordPress Gutenberg i, miejmy nadziej\u0119, z pewn\u0105 znacz\u0105c\u0105 tre\u015bci\u0105 i ustawieniami. Oto ostateczny kod niestandardowego paska bocznego z polem meta postu.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                icon='carrot'\n            >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        <CustomSidebarMeta \/>\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});\n\u00a0\nadd_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Samouczek dotycz\u0105cy dodawania niestandardowego paska bocznego do Inspektora w WordPress Gutenberg. Wewn\u0105trz zaimplementujemy pole po\u0142\u0105czone z meta postu.<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,721,721,940,940,897,1110,815,845,845,866,866,815],"tags":[1169],"class_list":{"0":"post-233727","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kod","8":"category-deweloper","10":"category-gutenberg-7","13":"category-n-a","14":"category-wtyczki","15":"category-samouczki","17":"category-wordpress-7","20":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233727","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=233727"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233727\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}