Jest to szczeg\u00f3\u0142owa seria samouczk\u00f3w opisuj\u0105ca tworzenie w\u0142asnych niestandardowych blok\u00f3w WordPress Gutenberg. To dla Ciebie, kt\u00f3ry jeste\u015b tw\u00f3rc\u0105 motyw\u00f3w lub wtyczek i tak jak ja jeste\u015b sfrustrowany brakiem dokumentacji. Wi\u0119kszo\u015b\u0107 tego, czego si\u0119 nauczy\u0142em, je\u015bli chodzi o programowanie w nowym \u015bwiecie JavaScript WordPress, to metoda pr\u00f3b i b\u0142\u0119d\u00f3w, energiczne eksperymentowanie i czytanie wszystkiego, co dotyczy\u0142o. Pomy\u015bla\u0142em wi\u0119c, \u017ce mog\u0119 zebra\u0107 wszystko, czego si\u0119 do tej pory nauczy\u0142em, w obszerny samouczek.<\/p>\n
Przez 10 cz\u0119\u015bci ten samouczek ma na celu nauczenie Ci\u0119, jak pisa\u0107 w\u0142asne niestandardowe bloki. Bez wzgl\u0119du na to, do czego s\u0142u\u017c\u0105, zaczynaj\u0105c od podstaw i przechodz\u0105c do bardziej z\u0142o\u017conych funkcji. Zalecam, aby\u015b sam napisa\u0142 wszystko, zamiast kopiowa\u0107 i wkleja\u0107 kod. To najlepszy spos\u00f3b na nauk\u0119! Post\u0119puj zgodnie z seri\u0105 od kroku 1 do 10, poniewa\u017c b\u0119dziemy budowa\u0107 na szczycie bloku, gdy b\u0119dziemy przechodzi\u0107 dalej.<\/p>\n
Zanim zanurzymy si\u0119 w schodach; wy\u0142\u0105czenie odpowiedzialno\u015bci. Jest kilka rzeczy, kt\u00f3re powiniene\u015b ju\u017c wcze\u015bniej wiedzie\u0107 o tym, czym jest ta seria, a czym nie jest.<\/p>\n
Musisz zna\u0107 Javascript \u2013 to oczywiste. Nie musisz by\u0107 ekspertem, ale to nie jest samouczek JavaScript. Co do wersji ECMAScript Javascript; mo\u017cesz pisa\u0107 w ES5 i nie martwi\u0107 si\u0119 kompilacj\u0105 kodu z Babel i innymi rzeczami. Jednak ta seria jest napisana za pomoc\u0105 kodu ES6 i ESNext. Nie martw si\u0119 \u2014 krok 1 jest po\u015bwi\u0119cony skonfigurowaniu \u015brodowiska programistycznego gotowego do kodowania w ESNext ze wszystkimi nowymi sk\u0142adniami.<\/p>\n
Jak zapewne wiecie, Gutenberg jest oparty na React JS<\/a>. Ta seria r\u00f3wnie\u017c nie jest samouczkiem React i zak\u0142ada podstawow\u0105 wiedz\u0119 na temat Reacta i jego dzia\u0142ania. Znowu nie trzeba by\u0107 ekspertem. Poniewa\u017c React istnieje ju\u017c od jakiego\u015b czasu, istnieje wiele dobrych samouczk\u00f3w, dokumentacji i zasob\u00f3w po\u015bwi\u0119conych nauce React. Dlatego polecam najpierw je sprawdzi\u0107.<\/p>\n Ta seria skupia si\u0119 na nauce cz\u0119\u015bci JavaScript, React i JSX i nie dotyczy stylizacji \/ CSS. Poniewa\u017c cel twojego bloku mo\u017ce by\u0107 drastycznie inny, postanowi\u0142em nie skupia\u0107 si\u0119 na stylizacji i dostarczy\u0142em tylko bardzo podstawowy kod HTML. Od Ciebie zale\u017cy, czy dodasz sw\u00f3j styl i niezb\u0119dne wyj\u015bcie HTML, aby renderowa\u0107 blok dok\u0142adnie tak, jak tego potrzebujesz.<\/p>\n I na koniec prosz\u0119 zastan\u00f3w si\u0119, kiedy powsta\u0142a ta seria. Gutenberg jest wci\u0105\u017c ca\u0142kiem nowy, ale drastycznie si\u0119 zmienia i jest ulepszany.<\/p>\n Je\u015bli zauwa\u017cysz to w odleg\u0142ej przysz\u0142o\u015bci, cz\u0119\u015b\u0107 kodu mo\u017ce zosta\u0107 przestarza\u0142a lub zast\u0105piona lepszymi metodami. Ten przewodnik zosta\u0142 napisany i sfinalizowany w wersji WordPress 5.2.3 (koniec 2019 r.).<\/p>\n W pierwszych cz\u0119\u015bciach skupiamy si\u0119 na podstawach. Tworzymy \u015brodowisko programistyczne z uruchomion\u0105 kompilacj\u0105 naszego kodu. Oraz podstawy rejestrowania bloku i niezb\u0119dnych jego cz\u0119\u015bci w PHP. Dowiemy si\u0119 o ogromnej bibliotece komponent\u00f3w i metod dost\u0119pnych dla nas od WordPress Gutenberg.<\/p>\n Id\u0105c dalej dowiemy si\u0119, jak dodawa\u0107 sekcje i ustawienia dla naszego bloku w pasku bocznym edytora (Inspektor), a tak\u017ce dostosowywa\u0107 pasek narz\u0119dzi. Po drodze dotkniemy wielu r\u00f3\u017cnych typ\u00f3w danych wej\u015bciowych i tego, jak u\u017cywa\u0107 do nich komponentu Gutenberga. I oczywi\u015bcie dowiemy si\u0119, jak zapisywa\u0107, aktualizowa\u0107 i przesy\u0142a\u0107 zapisane informacje do naszego bloku \u2013 i jak to dzia\u0142a za kulisami.<\/p>\n Na koniec przyjrzymy si\u0119 bardziej zaawansowanym rzeczom, takim jak dynamiczne bloki i jak u\u017cywa\u0107 PHP do renderowania wyj\u015bcia bloku. I wreszcie, jak tworzy\u0107 zapytania do post\u00f3w w edytorze \u2013 pozwalaj\u0105c u\u017cytkownikowi wybra\u0107 post z listy do renderowania.<\/p>\n Poni\u017cej znajdziesz bezpo\u015brednie linki do ka\u017cdej cz\u0119\u015bci serii.<\/p>\n Cz\u0119\u015b\u0107 1: Konfigurowanie \u015brodowiska<\/a><\/strong> Cz\u0119\u015b\u0107 2: Rejestracja bloku<\/a> Cz\u0119\u015b\u0107 3: Rekwizyty i komponenty WordPress<\/a><\/strong> Cz\u0119\u015b\u0107 4: Atrybuty<\/a><\/strong> Cz\u0119\u015b\u0107 5: Dodawanie ustawie\u0144 Inspector<\/a><\/strong> Cz\u0119\u015b\u0107 6: Dodawanie pask\u00f3w narz\u0119dzi<\/a><\/strong> Cz\u0119\u015b\u0107 7: Tworzenie w\u0142asnych komponent\u00f3w<\/a><\/strong> Cz\u0119\u015b\u0107 8: T\u0142umaczenie Twojego bloku<\/a><\/strong>Wiek tego samouczka<\/h3>\n
Czego si\u0119 nauczysz<\/h2>\n
Spis tre\u015bci<\/h3>\n
\n
\nprogramistycznego W pierwszej cz\u0119\u015bci tej serii samouczk\u00f3w, jak tworzy\u0107 niestandardowe bloki Gutenberga, musimy skonfigurowa\u0107 nasze \u015brodowisko programistyczne. Potrzebujemy miejsca, w kt\u00f3rym b\u0119dziemy mogli pisa\u0107 nasz kod w sk\u0142adniach ES6\/ESNext i kompilowa\u0107 go w drodze.<\/p>\n<\/li>\n
\nW tej cz\u0119\u015bci napiszemy JavaScript, aby zarejestrowa\u0107 i skonfigurowa\u0107 nasz niestandardowy blok. Na koniec zarejestrujemy skrypt w PHP i wykonamy niezb\u0119dny kod PHP, aby WordPress rozpozna\u0142 go jako nowy blok.<\/p>\n<\/li>\n
\nW poprzednim kroku dowiedzieli\u015bmy si\u0119, jak zarejestrowa\u0107 niestandardowy blok, 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<\/li>\n
\nW tej cz\u0119\u015bci przyjrzymy si\u0119, jak definiowa\u0107 atrybuty, pobiera\u0107 ich warto\u015bci i aktualizowa\u0107. Dzi\u0119ki atrybutom mo\u017cemy przyj\u0105\u0107 dane wej\u015bciowe z edytora, zapisa\u0107 je i wyprowadzi\u0107 w dowolny spos\u00f3b.<\/p>\n<\/li>\n
\nW tym kroku skupimy si\u0119 na tym, co WordPress (przynajmniej w kodzie) nazywa Inspector \u2013 pasku bocznym po prawej stronie w edytorze. Om\u00f3wimy kilka nowych komponent\u00f3w, kt\u00f3re warto umie\u015bci\u0107 na pasku bocznym i jak sobie z nimi radzi\u0107.<\/p>\n<\/li>\n
\nW tym po\u015bcie dowiemy si\u0119, jak doda\u0107 paski narz\u0119dzi WordPressa do naszego bloku, tj. do wyr\u00f3wnania i wyr\u00f3wnania blok\u00f3w. Nauczymy si\u0119 r\u00f3wnie\u017c dodawa\u0107 w\u0142asne paski narz\u0119dzi z w\u0142asnymi przyciskami do wykonywania niestandardowych akcji.<\/p>\n<\/li>\n
\nJak dot\u0105d w tej serii samouczk\u00f3w napisali\u015bmy ca\u0142y kod wewn\u0105trzregisterBlockType()<\/code>funkcjiedit<\/code>. Jest to w pe\u0142ni mo\u017cliwe i cz\u0119sto zalecane, aby zamiast tego przypisa\u0107 edycj\u0119 do oddzielnego komponentu. W ten spos\u00f3b mo\u017cemy wykorzysta\u0107 funkcje, takie jak stan komponent\u00f3w i metody cyklu \u017cycia.<\/p>\n<\/li>\n
\nW tej cz\u0119\u015bci skupimy si\u0119 na t\u0142umaczeniu tekst\u00f3w i warto\u015bci w naszym bloku. U\u017cywamy WP-CLI do generowania niezb\u0119dnych plik\u00f3w, aby Gutenberg m\u00f3g\u0142 za\u0142adowa\u0107 nasze t\u0142umaczenia przy zmianie j\u0119zyka WordPress.<\/p>\n<\/li>\n