Jest to szczegółowa seria samouczków opisująca tworzenie własnych niestandardowych bloków WordPress Gutenberg. To dla Ciebie, który jesteś twórcą motywów lub wtyczek i tak jak ja jesteś sfrustrowany brakiem dokumentacji. Większość tego, czego się nauczyłem, jeśli chodzi o programowanie w nowym świecie JavaScript WordPress, to metoda prób i błędów, energiczne eksperymentowanie i czytanie wszystkiego, co dotyczyło. Pomyślałem więc, że mogę zebrać wszystko, czego się do tej pory nauczyłem, w obszerny samouczek.
Przez 10 części ten samouczek ma na celu nauczenie Cię, jak pisać własne niestandardowe bloki. Bez względu na to, do czego służą, zaczynając od podstaw i przechodząc do bardziej złożonych funkcji. Zalecam, abyś sam napisał wszystko, zamiast kopiować i wklejać kod. To najlepszy sposób na naukę! Postępuj zgodnie z serią od kroku 1 do 10, ponieważ będziemy budować na szczycie bloku, gdy będziemy przechodzić dalej.
Co musisz wiedzieć zanim zaczniemy
Zanim zanurzymy się w schodach; wyłączenie odpowiedzialności. Jest kilka rzeczy, które powinieneś już wcześniej wiedzieć o tym, czym jest ta seria, a czym nie jest.
Języki programowania
Musisz znać Javascript – to oczywiste. Nie musisz być ekspertem, ale to nie jest samouczek JavaScript. Co do wersji ECMAScript Javascript; możesz pisać w ES5 i nie martwić się kompilacją kodu z Babel i innymi rzeczami. Jednak ta seria jest napisana za pomocą kodu ES6 i ESNext. Nie martw się — krok 1 jest poświęcony skonfigurowaniu środowiska programistycznego gotowego do kodowania w ESNext ze wszystkimi nowymi składniami.
Jak zapewne wiecie, Gutenberg jest oparty na React JS. Ta seria również nie jest samouczkiem React i zakłada podstawową wiedzę na temat Reacta i jego działania. Znowu nie trzeba być ekspertem. Ponieważ React istnieje już od jakiegoś czasu, istnieje wiele dobrych samouczków, dokumentacji i zasobów poświęconych nauce React. Dlatego polecam najpierw je sprawdzić.
Ta seria skupia się na nauce części JavaScript, React i JSX i nie dotyczy stylizacji / CSS. Ponieważ cel twojego bloku może być drastycznie inny, postanowiłem nie skupiać się na stylizacji i dostarczyłem tylko bardzo podstawowy kod HTML. Od Ciebie zależy, czy dodasz swój styl i niezbędne wyjście HTML, aby renderować blok dokładnie tak, jak tego potrzebujesz.
Wiek tego samouczka
I na koniec proszę zastanów się, kiedy powstała ta seria. Gutenberg jest wciąż całkiem nowy, ale drastycznie się zmienia i jest ulepszany.
Jeśli zauważysz to w odległej przyszłości, część kodu może zostać przestarzała lub zastąpiona lepszymi metodami. Ten przewodnik został napisany i sfinalizowany w wersji WordPress 5.2.3 (koniec 2019 r.).
Czego się nauczysz
W pierwszych częściach skupiamy się na podstawach. Tworzymy środowisko programistyczne z uruchomioną kompilacją naszego kodu. Oraz podstawy rejestrowania bloku i niezbędnych jego części w PHP. Dowiemy się o ogromnej bibliotece komponentów i metod dostępnych dla nas od WordPress Gutenberg.
Idąc dalej dowiemy się, jak dodawać sekcje i ustawienia dla naszego bloku w pasku bocznym edytora (Inspektor), a także dostosowywać pasek narzędzi. Po drodze dotkniemy wielu różnych typów danych wejściowych i tego, jak używać do nich komponentu Gutenberga. I oczywiście dowiemy się, jak zapisywać, aktualizować i przesyłać zapisane informacje do naszego bloku – i jak to działa za kulisami.
Na koniec przyjrzymy się bardziej zaawansowanym rzeczom, takim jak dynamiczne bloki i jak używać PHP do renderowania wyjścia bloku. I wreszcie, jak tworzyć zapytania do postów w edytorze – pozwalając użytkownikowi wybrać post z listy do renderowania.
Spis treści
Poniżej znajdziesz bezpośrednie linki do każdej części serii.
-
Część 1: Konfigurowanie środowiska
programistycznego W pierwszej części tej serii samouczków, jak tworzyć niestandardowe bloki Gutenberga, musimy skonfigurować nasze środowisko programistyczne. Potrzebujemy miejsca, w którym będziemy mogli pisać nasz kod w składniach ES6/ESNext i kompilować go w drodze. -
Część 2: Rejestracja bloku
W tej części napiszemy JavaScript, aby zarejestrować i skonfigurować nasz niestandardowy blok. Na koniec zarejestrujemy skrypt w PHP i wykonamy niezbędny kod PHP, aby WordPress rozpoznał go jako nowy blok. -
Część 3: Rekwizyty i komponenty WordPress
W poprzednim kroku dowiedzieliśmy się, jak zarejestrować niestandardowy blok, zarówno w JavaScript, jak i PHP. W tym kroku nauczymy się używać komponentów WordPressa do dodawania różnego rodzaju pól i ustawień. -
Część 4: Atrybuty
W tej części przyjrzymy się, jak definiować atrybuty, pobierać ich wartości i aktualizować. Dzięki atrybutom możemy przyjąć dane wejściowe z edytora, zapisać je i wyprowadzić w dowolny sposób. -
Część 5: Dodawanie ustawień Inspector
W tym kroku skupimy się na tym, co WordPress (przynajmniej w kodzie) nazywa Inspector – pasku bocznym po prawej stronie w edytorze. Omówimy kilka nowych komponentów, które warto umieścić na pasku bocznym i jak sobie z nimi radzić. -
Część 6: Dodawanie pasków narzędzi
W tym poście dowiemy się, jak dodać paski narzędzi WordPressa do naszego bloku, tj. do wyrównania i wyrównania bloków. Nauczymy się również dodawać własne paski narzędzi z własnymi przyciskami do wykonywania niestandardowych akcji. -
Część 7: Tworzenie własnych komponentów
Jak dotąd w tej serii samouczków napisaliśmy cały kod wewnątrzregisterBlockType()funkcjiedit. Jest to w pełni możliwe i często zalecane, aby zamiast tego przypisać edycję do oddzielnego komponentu. W ten sposób możemy wykorzystać funkcje, takie jak stan komponentów i metody cyklu życia. -
Część 8: Tłumaczenie Twojego bloku
W tej części skupimy się na tłumaczeniu tekstów i wartości w naszym bloku. Używamy WP-CLI do generowania niezbędnych plików, aby Gutenberg mógł załadować nasze tłumaczenia przy zmianie języka WordPress. -
Część 9: Bloki dynamiczne
Do tej pory renderowaliśmy dane wyjściowe bloku w JavaScript. Jednak przy dynamicznej zawartości, takiej jak ostatnie posty lub wyświetlanie posta, może wymagać od nas renderowania wyjścia bloku w PHP. -
Część 10: Pobieranie postów i komponentów wyższego rzędu
W końcowej części dowiemy się, jak używać komponentów wyższego rzędu, a tym samym jak wykonać zapytanie o post z poziomu edytora i zapewnić metodę wybierania postów.