{"id":233901,"date":"2023-02-24T14:08:00","date_gmt":"2023-02-24T11:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233901"},"modified":"2022-11-11T13:04:50","modified_gmt":"2022-11-11T10:04:50","slug":"utworz-niestandardowy-blok-gutenberga-czesc-3-rekwizyty-i-komponenty-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/utworz-niestandardowy-blok-gutenberga-czesc-3-rekwizyty-i-komponenty-wordpress\/","title":{"rendered":"Utw\u00f3rz niestandardowy blok Gutenberga \u2014 cz\u0119\u015b\u0107 3: rekwizyty i komponenty WordPress"},"content":{"rendered":"\n

Poprzedni krok<\/a> w tej serii samouczk\u00f3w dotyczy\u0142 rejestrowania niestandardowego bloku, zar\u00f3wno w JavaScript, jak i PHP. W tym kroku nauczymy si\u0119 u\u017cywa\u0107 komponent\u00f3w WordPressa do dodawania r\u00f3\u017cnego rodzaju p\u00f3l i ustawie\u0144.<\/p>\n

Aby wykorzysta\u0107 komponenty WordPressa w naszym bloku, musimy najpierw wiedzie\u0107 o rekwizytach.<\/p>\n

Rekwizyty<\/h2>\n

Props jest g\u0142\u00f3wn\u0105 funkcj\u0105 Reacta i jest w zasadzie sposobem przekazywania zmiennych lub funkcji do innych komponent\u00f3w. Je\u015bli nie znasz rekwizyt\u00f3w Reacta, mo\u017cesz przeczyta\u0107 oficjalny samouczek Reacta na<\/a> ten temat.<\/p>\n

WordPress udost\u0119pnia rekwizyty dla funkcji edit<\/code>i save<\/code>w registerBlockType()<\/code>. Wewn\u0105trz tych rekwizyt\u00f3w uzyskujemy dost\u0119p do krytycznych rzeczy, takich jak atrybuty i metoda aktualizacji naszych atrybut\u00f3w. W nast\u0119pnym kroku<\/a> om\u00f3wimy szczeg\u00f3\u0142owo atrybuty !<\/p>\n

Do tej pory w naszym bloku napisali\u015bmy funkcj\u0119 dla edit<\/code>i save<\/code>tak:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Powiniene\u015b przyzwyczai\u0107 si\u0119 do dodawania parametru props<\/code>do obu edit<\/code>i save<\/code>, tak:<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Teraz masz pe\u0142ny dost\u0119p do zmiennej props<\/code>i wszystkiego, co ona zawiera, od wewn\u0105trz edit<\/code>i save<\/code>. Je\u015bli jeste\u015b ciekawy, mo\u017cesz doda\u0107 console.log(props);<\/code>w edit<\/code>funkcji przed return<\/code>instrukcj\u0105. Powiniene\u015b zobaczy\u0107, jakie w\u0142a\u015bciwo\u015bci s\u0105 dost\u0119pne w debugerze konsoli.<\/p>\n
Korzystanie z komponent\u00f3w WordPress<\/h2>\n
Jak wspomnieli\u015bmy wcze\u015bniej, mamy dost\u0119p do ogromnej biblioteki komponent\u00f3w i przydatnych funkcji wewn\u0105trz pakietu globalnego wp<\/code>. Znajdziesz gotowe do u\u017cycia komponenty dla ka\u017cdego typu komponent\u00f3w zwi\u0105zanych z danymi wej\u015bciowymi, o kt\u00f3rych mo\u017cesz pomy\u015ble\u0107. Przyk\u0142ady obejmuj\u0105 wprowadzanie tekstu, wprowadzanie tekstu sformatowanego, listy rozwijane, prze\u0142\u0105czanie, pola wyboru, przyciski w r\u00f3\u017cnych stylach, narz\u0119dzie do przesy\u0142ania multimedi\u00f3w i selektory kolor\u00f3w. Istniej\u0105 r\u00f3wnie\u017c funkcje i komponenty zapewniaj\u0105ce bardziej zaawansowan\u0105 funkcjonalno\u015b\u0107. Na przyk\u0142ad wysy\u0142anie zapyta\u0144 do WordPressa o tre\u015bci (posty, kategorie itp.) za pomoc\u0105 wbudowanych funkcji lub pobieranie za pomoc\u0105 interfejsu API REST.<\/p>\n
\u0141atwiejsze i zalecane jest korzystanie z komponent\u00f3w interfejsu u\u017cytkownika WordPressa. Ma to na celu upewnienie si\u0119, \u017ce projekt i funkcjonalno\u015b\u0107 s\u0105 maksymalnie usprawnione, aby nie myli\u0107 ani nie denerwowa\u0107 u\u017cytkownik\u00f3w.<\/p>\n
Ale niestety w chwili pisania tego dokumentu dokumentacja Gutenberga jest bardzo sk\u0105pa. Znalaz\u0142em najlepszy spos\u00f3b, aby dowiedzie\u0107 si\u0119, co istnieje w wp<\/code>pakiecie i jak dzia\u0142aj\u0105 komponenty, zagl\u0105daj\u0105c do ich oficjalnego repozytorium Gutenberg Github<\/a>. Niekt\u00f3re pakiety (foldery) zawieraj\u0105 tekst readme, kt\u00f3ry oferuje troch\u0119 dokumentacji. Sp\u00f3jrz na przyk\u0142ad na plik readme, aby znale\u017a\u0107 przycisk<\/a> lub prze\u0142\u0105cznik<\/a>.<\/p>\n
Repozytorium Github powinno odpowiada\u0107 temu, co znajduje si\u0119 w wp<\/code>pakiecie (w zale\u017cno\u015bci od posiadanej wersji i ga\u0142\u0119zi, na kt\u00f3r\u0105 patrzysz w Github). Oznacza to, \u017ce ka\u017cdy folder, kt\u00f3ry widzisz w packages<\/code>katalogu g\u0142\u00f3wnym na Github, znajduje si\u0119 w wp<\/code>pakiecie globalnym. Jako przyk\u0142ad pami\u0119taj, \u017ce funkcja, kt\u00f3rej u\u017cyli\u015bmy w poprzednim kroku, registerBlockType()<\/code>by\u0142a inside wp.blocks<\/code>, co oznacza, \u017ce \u200b\u200bkod \u017ar\u00f3d\u0142owy tej funkcji znajdziesz wewn\u0105trz packages\/blocks\/<\/code>.<\/p>\n
Poniewa\u017c opracowa\u0142em wiele niestandardowych blok\u00f3w Gutenberga i przekopa\u0142em si\u0119 ca\u0142kiem sporo w repozytorium Github, odkry\u0142em, \u017ce istnieje kilka pakiet\u00f3w, kt\u00f3re zawieraj\u0105 najbardziej powszechn\u0105 funkcjonalno\u015b\u0107 u\u017cywan\u0105 do tworzenia niestandardowych blok\u00f3w. Do\u0142\u0105cz\u0119 je poni\u017cej.<\/p>\n
Aby uzyska\u0107 pe\u0142niejszy przegl\u0105d dost\u0119pnych komponent\u00f3w, polecam pobranie mojego bezp\u0142atnego eBooka zawieraj\u0105cego dost\u0119pne komponenty w Gutenberg! Zawiera najpopularniejsze i najbardziej przydatne komponenty z dokumentacj\u0105 dotycz\u0105c\u0105 rekwizyt\u00f3w i przyk\u0142adami kodu:<\/p>\n
Szybki przegl\u0105d najpopularniejszych pakiet\u00f3w, kt\u00f3rych b\u0119dziesz u\u017cywa\u0107 do blok\u00f3w<\/h3>\n
Oczywi\u015bcie jest ich znacznie wi\u0119cej, ale poni\u017cej jest to, co jest najcz\u0119\u015bciej spotykane w przypadku tworzenia blok\u00f3w. W tej serii samouczk\u00f3w u\u017cyjemy wi\u0119kszo\u015bci, je\u015bli nie wszystkich z nich. Za ka\u017cdym razem, gdy chcesz u\u017cy\u0107 komponentu, musisz wiedzie\u0107, w jakim pakiecie si\u0119 znajduje.<\/p>\n
wp.komponenty<\/h4>\n
W \u015brodku znajdziesz wi\u0119kszo\u015b\u0107 komponent\u00f3w wej\u015bciowych interfejsu u\u017cytkownika wp.components<\/code>. Przyk\u0142adami s\u0105 r\u00f3\u017cne wprowadzanie tekstu, zaznaczenia, pola wyboru, przyciski opcji, przeci\u0105gane komponenty, przyciski, selektor kolor\u00f3w, selektor daty i tak dalej. Znajdziesz tu r\u00f3wnie\u017c komponenty interfejsu u\u017cytkownika, kt\u00f3rych mo\u017cesz u\u017cy\u0107 do blokowego paska narz\u0119dzi i zawarto\u015bci paska bocznego ustawie\u0144 (nazywanych InspectorControls) w edytorze.<\/p>\n
Sprawd\u017a foldery w repozytorium Github<\/a>.<\/p>\n
wp.blockEditor i wp.editor<\/h4>\n
W tych dw\u00f3ch pakietach znajdziesz przydatne komponenty do obs\u0142ugi tekstu sformatowanego, obs\u0142ugi obraz\u00f3w\/przesy\u0142ania multimedi\u00f3w oraz komponenty do faktycznego dodawania pask\u00f3w narz\u0119dzi lub niestandardowych paneli Inspektora (paska bocznego).<\/p>\n
Pod koniec tej serii przyjrzymy si\u0119 budowaniu dynamicznych blok\u00f3w, w kt\u00f3rych u\u017cyjemy PHP do renderowania wyj\u015bcia bloku, a do tego u\u017cyjemy komponentu from wp.editor<\/code>.<\/p>\n
Jak rozumiem, wi\u0119kszo\u015b\u0107 komponent\u00f3w pojawi\u0142a si\u0119 wp.editor<\/code>we wczesnych czasach Gutenberga, ale zw\u0142aszcza po WordPressie 5.3, wiele z nich zosta\u0142o przeniesionych do wp.blockEditor<\/code>. Je\u015bli u\u017cyjesz komponentu, w wp.editor<\/code>kt\u00f3rym WordPress planuje si\u0119 do wp.blockEditor<\/code>niego przenie\u015b\u0107, od teraz nie zawiedzie, ale w debuggerze konsoli otrzymasz ostrze\u017cenia, \u017ce \u200b\u200bzosta\u0142 on przestarza\u0142y i \u017ce powiniene\u015b si\u0119 na niego prze\u0142\u0105czy\u0107, wp.blockEditor<\/code>kiedy tylko mo\u017cesz. I odwracalnie, je\u015bli \u015bledzisz t\u0119 seri\u0119 ze starsz\u0105 wersj\u0105 WordPressa, z jakiego\u015b powodu mo\u017cesz napotka\u0107 b\u0142\u0119dy podczas wywo\u0142ywania komponent\u00f3w, kt\u00f3re nie wp.blockEditor<\/code>zosta\u0142y jeszcze przeniesione.<\/p>\n
\"Utw\u00f3rz<\/a><\/p>\n
wp.element<\/h4>\n
W \u015brodku wp.element<\/code>znajdziesz komponenty odpowiadaj\u0105ce komponentom React. Na przyk\u0142ad Component<\/code>(co odpowiada React.Component<\/code>) i Fragment<\/code>( React.Fragment<\/code>). U\u017cyjemy ich, gdy zaczniemy dzieli\u0107 nasz kod na osobne komponenty.<\/p>\n
wp.i18n<\/h4>\n
Jak sama nazwa wskazuje, wp.i18n<\/code>pakiet zawiera funkcje do obs\u0142ugi t\u0142umacze\u0144. Zawiera te same funkcje t\u0142umaczenia, jakie znamy w PHP; na przyk\u0142ad __()<\/code>i _e()<\/code>. Przyjrzymy si\u0119 temu szczeg\u00f3\u0142owo w <<<>>>>, kiedy dowiemy si\u0119, jak przet\u0142umaczy\u0107 nasz blok.<\/p>\n
wp.dane<\/h4>\n
Pakiet wp.data<\/code>s\u0142u\u017cy do odpytywania WordPressa o dane poza edytorem. Istniej\u0105 komponenty do rozsy\u0142ania wiadomo\u015bci, withSelect<\/code>kt\u00f3rych select<\/code>u\u017cyjemy w dalszej cz\u0119\u015bci tej serii do odpytywania post\u00f3w wewn\u0105trz naszego bloku.<\/p>\n
wp.compose<\/h4>\n
Poprzedni pakiet i wp.compose<\/code>jest przeznaczony do bardziej zaawansowanego budowania blok\u00f3w. Wewn\u0105trz tego pakietu znajdziemy komponenty i funkcje do tworzenia tzw. komponent\u00f3w wy\u017cszego rz\u0119du. Komponenty wy\u017cszego rz\u0119du<\/a> to technika wzorca w React do ponownego u\u017cycia komponent\u00f3w i logiki, i u\u017cyjemy jej w po\u0142\u0105czeniu z wp.data<\/code>w celu odpytywania post\u00f3w.<\/p>\n
Do\u015b\u0107 gadania \u2013 jak w praktyce wykorzystujesz niekt\u00f3re z tych komponent\u00f3w?<\/h2>\n
Jak wcze\u015bniej wspomniano; aby korzysta\u0107 z komponent\u00f3w WordPressa, musisz wiedzie\u0107, gdzie si\u0119 znajduj\u0105. Mam nadziej\u0119, \u017ce m\u00f3j przegl\u0105d w po\u0142\u0105czeniu z repozytorium Github<\/a> da ci pewne poj\u0119cie, gdzie je zdoby\u0107.<\/p>\n
Nie zapominaj, \u017ce zawsze mo\u017cesz doda\u0107 dowolne zwyk\u0142e znaczniki HTML, takie jak div, span, nag\u0142\u00f3wki i tak dalej. Pami\u0119taj tylko, aby w atrybutach post\u0119powa\u0107 zgodnie z wytycznymi<\/a> Reacta. Na przyk\u0142ad class<\/code>jest zarezerwowanym s\u0142owem kluczowym w React (do tworzenia komponent\u00f3w opartych na klasach), wi\u0119c je\u015bli chcesz doda\u0107 klas\u0119 do elementu HTML, musisz u\u017cy\u0107 className<\/code>.<\/p>\n
Uwaga: Podczas programowania nie zapomnij rozpocz\u0105\u0107 npm run start<\/code>kompilacji kodu.<\/p>\n
Jako prosty przyk\u0142ad wypr\u00f3bujmy kilka komponent\u00f3w, aby zobaczy\u0107, jak wygl\u0105daj\u0105. Destrukturyzujemy je z odpowiadaj\u0105cych im pakiet\u00f3w i wykorzystujemy w naszej edit<\/code>funkcji.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\nconst { TextControl, TextareaControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    edit: (props) => { \n        return (<div>\n                Text input:\n                <TextControl \/> \n                Textarea:\n                <TextareaControl \/>\n                Richtext:\n                <RichText \/>\n            <\/div>\n        );\n    },\n    ...\n});<\/code><\/pre>\n
To na przyk\u0142ad spowoduje, \u017ce nasz blok b\u0119dzie wygl\u0105da\u0142 tak w edytorze.<\/p>\n
\"Utw\u00f3rz<\/a><\/p>\n
Zauwa\u017cysz, \u017ce podczas wpisywania w konsoli otrzymasz komunikaty o b\u0142\u0119dach i \u017ce nie zapisze to, co wpisujesz po zaktualizowaniu posta (i od\u015bwie\u017ceniu). Dzieje si\u0119 tak, poniewa\u017c brakuje nam w\u0142a\u015bciwo\u015bci komponent\u00f3w, kt\u00f3re s\u0105 po\u0142\u0105czeniem z atrybutami, w kt\u00f3rych przechowywane s\u0105 wszystkie nasze dane blokowe. Rekwizyty s\u0105 odpowiedzialne za przekazywanie zapisanych warto\u015bci oraz funkcje odpowiedzialne za aktualizacj\u0119 naszych atrybut\u00f3w, gdy co\u015b si\u0119 zmieni w naszych wej\u015bciach. To w\u0142a\u015bnie zrobimy w nast\u0119pnym kroku, w kt\u00f3rym wreszcie zaczniemy pisa\u0107 kod na serio.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
W poprzednim kroku zarejestrowali\u015bmy niestandardowy blok Gutenberga. W tym kroku nauczymy si\u0119 u\u017cywa\u0107 komponent\u00f3w WordPressa do dodawania r\u00f3\u017cnych ustawie\u0144 rodzaju.<\/p>\n","protected":false},"author":1,"featured_media":151761,"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-233901","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\/233901","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=233901"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233901\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}