[add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)()<\/code>. Ta funkcja pozwala doda\u0107 metabox z niestandardow\u0105 tre\u015bci\u0105 na dole lub z boku podczas edytowania posta. Ta metoda nadal dzia\u0142a, r\u00f3wnie\u017c w edytorze Gutenberga!<\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\")
<\/a><\/p>\nJednak wygl\u0105da troch\u0119 nie tak w por\u00f3wnaniu z reszt\u0105 zawarto\u015bci paska bocznego Gutenberga. Nie wspominaj\u0105c ju\u017c o tym, \u017ce musia\u0142by\u015b r\u0119cznie napisa\u0107 kod wej\u015bciowy (pole wyboru, dane wej\u015bciowe tekstowe itp.) za pomoc\u0105 PHP, a tak\u017ce napisa\u0107 dodatkowy kod, aby zapisa\u0107 go, gdy post zostanie zaktualizowany. A je\u015bli chcesz, aby ustawienia meta postu by\u0142y dynamiczne (powiedzmy, \u017ce chcesz ukry\u0107 pole, chyba \u017ce inne pole zosta\u0142o w\u0142\u0105czone), musisz r\u0119cznie umie\u015bci\u0107 skrypt w kolejce i tak, zgad\u0142e\u015b, r\u0119cznie obs\u0142u\u017cy\u0107 logik\u0119 dynamiczn\u0105 ukrywania i pokazywania. To wszystko jest teraz przestarza\u0142e i \u0142atwiejsze dzi\u0119ki nowemu edytorowi Gutenberg opartemu na Javascript. Mo\u017cemy ca\u0142kiem \u0142atwo zrobi\u0107 co\u015b takiego:<\/p>\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\")
<\/a><\/p>\nProces<\/h2>\n
Proces wygl\u0105da nast\u0119puj\u0105co:<\/p>\n
\n- Rejestrujemy ka\u017cdy niestandardowy klucz meta postu, kt\u00f3ry chcemy doda\u0107 w PHP za pomoc\u0105
[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>, i ustawiamy go jako dost\u0119pny w WP REST API. Jest to niezb\u0119dny krok, aby udost\u0119pni\u0107 meta posta w edytorze Gutenberga.<\/li>\n- Tworzymy plik JavaScript i umieszczamy go w kolejce specjalnie do edytora (tylko).<\/li>\n
- Wewn\u0105trz pliku Javascript rejestrujemy wtyczk\u0119 z
[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>poleceniem renderowania naszego komponentu.<\/li>\n- Wewn\u0105trz tego komponentu mo\u017cemy wyprowadzi\u0107 wszystko, czego potrzebujemy. Mo\u017cemy u\u017cy\u0107 wbudowanych komponent\u00f3w WordPressa, aby \u0142atwo renderowa\u0107 r\u00f3\u017cne typy ustawie\u0144. Korzystaj\u0105c z pakietu danych WordPress, mo\u017cemy pobiera\u0107 i aktualizowa\u0107 warto\u015bci meta postu od razu po ich zmianie.<\/li>\n<\/ul>\n
Przejd\u017amy od razu, zaczynaj\u0105c od cz\u0119\u015bci PHP; rejestracja meta postu.<\/p>\n
Rejestrowanie postu meta<\/h2>\n
Dla ka\u017cdego meta postu, kt\u00f3ry chcesz doda\u0107 do paska bocznego Gutenberga, musisz zarejestrowa\u0107 si\u0119 za pomoc\u0105 [register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>. Jest to konieczne, aby by\u0142y dost\u0119pne przez WP REST API (kt\u00f3rego u\u017cywa Gutenberg), a tym samym dost\u0119pne w naszym Javascript.<\/p>\nW pliku motywu functions.php<\/code>lub innym aktywnym pliku PHP dodaj funkcj\u0119 podpi\u0119t\u0105 do init<\/code>haka \u201e „. Wewn\u0105trz funkcji powtarzasz a register_post_meta()<\/code>dla ka\u017cdej niestandardowej meta postu, kt\u00f3r\u0105 chcesz doda\u0107. Funkcja przyjmuje trzy argumenty; pierwszy parametr to typ posta, dla kt\u00f3rego chcesz zarejestrowa\u0107 meta (ustaw jako pusty ci\u0105g dla wszystkich typ\u00f3w post\u00f3w). Drugi parametr to nazwa klucza meta dla twojej meta. A trzeci to szereg ustawie\u0144. Tutaj definiujemy, \u017ce ta meta powinna by\u0107 dost\u0119pna w WP REST API, ustawiaj\u0105c \u201e show_in_rest<\/code>” na true.<\/p>\nNa przyk\u0142ad, powiedzmy, \u017ce chc\u0119 doda\u0107 prze\u0142\u0105cznik w\u0142\u0105czania\/wy\u0142\u0105czania i wprowadzanie tekstu do paska bocznego edytora. Oznacza to, \u017ce register_post_meta()<\/code>wywo\u0142uj\u0119 odpowiednio warto\u015b\u0107 logiczn\u0105 i ci\u0105g znak\u00f3w. Chc\u0119 r\u00f3wnie\u017c ograniczy\u0107 te posty tylko do post\u00f3w typu \u201epost”. To wygl\u0105da\u0142oby mniej wi\u0119cej tak:<\/p>\nadd_action( 'init', function() {\n register_post_meta( 'post', '_my_custom_bool', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'boolean',\n ] );\n\u00a0\n register_post_meta( 'post', '_my_custom_text', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'string',\n ] );\n} );<\/code><\/pre>\nTeraz mam klucz post meta _my_custom_bool<\/code>i _my_custom_text<\/code>gotowy i dost\u0119pny w Gutenbergu. Zalecam zmian\u0119 ich nazwy na co\u015b, co ma dla Ciebie sens.<\/p>\nRejestracja naszej wtyczki Javascript<\/h2>\n
W nast\u0119pnym kroku dodamy plik JavaScript i upewnimy si\u0119, \u017ce umieszczamy go w kolejce za pomoc\u0105 PHP.<\/p>\n
Pami\u0119taj, \u017ce pisz\u0119 kod Javascript w sk\u0142adni ES6. Oznacza to, \u017ce ustawi\u0142em konfiguracj\u0119 webpack\/Babel, aby skompilowa\u0107 m\u00f3j plik do oddzielnego, czytelnego pliku JavaScript dla przegl\u0105darki.<\/p>\n
Mam przewodnik, jak to skonfigurowa\u0107, je\u015bli nie masz pewno\u015bci, jak to dzia\u0142a:<\/p>\n
Musimy si\u0119 upewni\u0107, \u017ce WordPress za\u0142aduje nasz skrypt w edytorze. Robimy to podpinaj\u0105c funkcj\u0119 enqueue_block_editor_assets<\/code>i wywo\u0142uj\u0105c [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>:<\/p>\nadd_action( 'enqueue_block_editor_assets', function() {\n wp_enqueue_script(\n 'awp-custom-meta-plugin', \n get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n [ 'wp-edit-post' ],\n false,\n false\n );\n} );<\/code><\/pre>\nZak\u0142adam, \u017ce umiesz kolejkowa\u0107 skrypty i potrafisz zast\u0105pi\u0107 warto\u015bci w\u0142asnymi. Jako drugi parametr podaj\u0119 \u015bcie\u017ck\u0119 do pliku kompilacji (nie do pliku \u017ar\u00f3d\u0142owego). Aby upewni\u0107 si\u0119, \u017ce nasz skrypt nie zostanie za\u0142adowany zbyt wcze\u015bnie, ustawi\u0142em \u201e wp-edit-post<\/code>” jako zale\u017cno\u015b\u0107. To jest pakiet, kt\u00f3rego potrzebujemy do obs\u0142ugi postu meta.<\/p>\nPrzejd\u017amy teraz do cz\u0119\u015bci JavaScript.<\/p>\n
Najpierw musimy wywo\u0142a\u0107 [registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>i przekaza\u0107 nasz komponent do renderowania panelu na pasku bocznym dokumentu Gutenberg. Ta funkcja jest dost\u0119pna w wp.plugins<\/code>pakiecie, wi\u0119c destrukturyzuj\u0119 j\u0105 na g\u00f3rze. Lubi\u0119 utrzymywa\u0107 porz\u0105dek w swoich plikach, wi\u0119c tworz\u0119 kolejny plik; \u201eawp-custom-postmeta-fields.js”, aby zawiera\u0107 renderowany komponent i go zaimportowa\u0107.<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n render() {\n return(<AWP_Custom_Plugin \/>);\n }\n} );<\/code><\/pre>\nPisanie naszego komponentu<\/h2>\n
Zacznijmy tworzy\u0107 podstawowy komponent, kt\u00f3ry nie robi nic innego ni\u017c po prostu siedzie\u0107 we w\u0142a\u015bciwym miejscu, wi\u0119c najpierw to usuniemy. Aby wyrenderowa\u0107 komponent na pasku bocznym Dokument Gutenberga, u\u017cywamy [PluginDocumentSettingPanel](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/)<\/code>komponentu. Mo\u017cemy ustawi\u0107 atrybuty takie jak title<\/code>, icon<\/code>i className<\/code>. A wszystko, co jest w \u015brodku, zostanie wyrenderowane na pasku bocznym dokumentu. Na razie wy\u015bwietlam tylko tekst \u201eCze\u015b\u0107”.<\/p>\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin =() => {\n return(\n <PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } initialOpen=\"true\">\n <PanelRow>\n Hello there.\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Custom_Plugin;<\/code><\/pre>\nZ powy\u017cszym kodem (skompilowanym) otrzymujemy to:<\/p>\n