Poprzedni krok w tej serii samouczków dotyczył rejestrowania niestandardowego bloku, 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ń.
Aby wykorzystać komponenty WordPressa w naszym bloku, musimy najpierw wiedzieć o rekwizytach.
Rekwizyty
Props jest główną funkcją Reacta i jest w zasadzie sposobem przekazywania zmiennych lub funkcji do innych komponentów. Jeśli nie znasz rekwizytów Reacta, możesz przeczytać oficjalny samouczek Reacta na ten temat.
WordPress udostępnia rekwizyty dla funkcji editi savew registerBlockType(). Wewnątrz tych rekwizytów uzyskujemy dostęp do krytycznych rzeczy, takich jak atrybuty i metoda aktualizacji naszych atrybutów. W następnym kroku omówimy szczegółowo atrybuty !
Do tej pory w naszym bloku napisaliśmy funkcję dla editi savetak:
Powinieneś przyzwyczaić się do dodawania parametru propsdo obu editi save, tak:
Teraz masz pełny dostęp do zmiennej propsi wszystkiego, co ona zawiera, od wewnątrz editi save. Jeśli jesteś ciekawy, możesz dodać console.log(props);w editfunkcji przed returninstrukcją. Powinieneś zobaczyć, jakie właściwości są dostępne w debugerze konsoli.
Korzystanie z komponentów WordPress
Jak wspomnieliśmy wcześniej, mamy dostęp do ogromnej biblioteki komponentów i przydatnych funkcji wewnątrz pakietu globalnego wp. Znajdziesz gotowe do użycia komponenty dla każdego typu komponentów związanych z danymi wejściowymi, o których możesz pomyśleć. Przykłady obejmują wprowadzanie tekstu, wprowadzanie tekstu sformatowanego, listy rozwijane, przełączanie, pola wyboru, przyciski w różnych stylach, narzędzie do przesyłania multimediów i selektory kolorów. Istnieją również funkcje i komponenty zapewniające bardziej zaawansowaną funkcjonalność. Na przykład wysyłanie zapytań do WordPressa o treści (posty, kategorie itp.) za pomocą wbudowanych funkcji lub pobieranie za pomocą interfejsu API REST.
Łatwiejsze i zalecane jest korzystanie z komponentów interfejsu użytkownika WordPressa. Ma to na celu upewnienie się, że projekt i funkcjonalność są maksymalnie usprawnione, aby nie mylić ani nie denerwować użytkowników.
Ale niestety w chwili pisania tego dokumentu dokumentacja Gutenberga jest bardzo skąpa. Znalazłem najlepszy sposób, aby dowiedzieć się, co istnieje w wppakiecie i jak działają komponenty, zaglądając do ich oficjalnego repozytorium Gutenberg Github. Niektóre pakiety (foldery) zawierają tekst readme, który oferuje trochę dokumentacji. Spójrz na przykład na plik readme, aby znaleźć przycisk lub przełącznik.
Repozytorium Github powinno odpowiadać temu, co znajduje się w wppakiecie (w zależności od posiadanej wersji i gałęzi, na którą patrzysz w Github). Oznacza to, że każdy folder, który widzisz w packageskatalogu głównym na Github, znajduje się w wppakiecie globalnym. Jako przykład pamiętaj, że funkcja, której użyliśmy w poprzednim kroku, registerBlockType()była inside wp.blocks, co oznacza, że kod źródłowy tej funkcji znajdziesz wewnątrz packages/blocks/.
Ponieważ opracowałem wiele niestandardowych bloków Gutenberga i przekopałem się całkiem sporo w repozytorium Github, odkryłem, że istnieje kilka pakietów, które zawierają najbardziej powszechną funkcjonalność używaną do tworzenia niestandardowych bloków. Dołączę je poniżej.
Aby uzyskać pełniejszy przegląd dostępnych komponentów, polecam pobranie mojego bezpłatnego eBooka zawierającego dostępne komponenty w Gutenberg! Zawiera najpopularniejsze i najbardziej przydatne komponenty z dokumentacją dotyczącą rekwizytów i przykładami kodu:
Szybki przegląd najpopularniejszych pakietów, których będziesz używać do bloków
Oczywiście jest ich znacznie więcej, ale poniżej jest to, co jest najczęściej spotykane w przypadku tworzenia bloków. W tej serii samouczków użyjemy większości, jeśli nie wszystkich z nich. Za każdym razem, gdy chcesz użyć komponentu, musisz wiedzieć, w jakim pakiecie się znajduje.
wp.komponenty
W środku znajdziesz większość komponentów wejściowych interfejsu użytkownika wp.components. Przykładami są różne wprowadzanie tekstu, zaznaczenia, pola wyboru, przyciski opcji, przeciągane komponenty, przyciski, selektor kolorów, selektor daty i tak dalej. Znajdziesz tu również komponenty interfejsu użytkownika, których możesz użyć do blokowego paska narzędzi i zawartości paska bocznego ustawień (nazywanych InspectorControls) w edytorze.
Sprawdź foldery w repozytorium Github.
wp.blockEditor i wp.editor
W tych dwóch pakietach znajdziesz przydatne komponenty do obsługi tekstu sformatowanego, obsługi obrazów/przesyłania multimediów oraz komponenty do faktycznego dodawania pasków narzędzi lub niestandardowych paneli Inspektora (paska bocznego).
Pod koniec tej serii przyjrzymy się budowaniu dynamicznych bloków, w których użyjemy PHP do renderowania wyjścia bloku, a do tego użyjemy komponentu from wp.editor.
Jak rozumiem, większość komponentów pojawiła się wp.editorwe wczesnych czasach Gutenberga, ale zwłaszcza po WordPressie 5.3, wiele z nich zostało przeniesionych do wp.blockEditor. Jeśli użyjesz komponentu, w wp.editorktórym WordPress planuje się do wp.blockEditorniego przenieść, od teraz nie zawiedzie, ale w debuggerze konsoli otrzymasz ostrzeżenia, że został on przestarzały i że powinieneś się na niego przełączyć, wp.blockEditorkiedy tylko możesz. I odwracalnie, jeśli śledzisz tę serię ze starszą wersją WordPressa, z jakiegoś powodu możesz napotkać błędy podczas wywoływania komponentów, które nie wp.blockEditorzostały jeszcze przeniesione.
wp.element
W środku wp.elementznajdziesz komponenty odpowiadające komponentom React. Na przykład Component(co odpowiada React.Component) i Fragment( React.Fragment). Użyjemy ich, gdy zaczniemy dzielić nasz kod na osobne komponenty.
wp.i18n
Jak sama nazwa wskazuje, wp.i18npakiet zawiera funkcje do obsługi tłumaczeń. Zawiera te same funkcje tłumaczenia, jakie znamy w PHP; na przykład __()i _e(). Przyjrzymy się temu szczegółowo w <<<>>>>, kiedy dowiemy się, jak przetłumaczyć nasz blok.
wp.dane
Pakiet wp.datasłuży do odpytywania WordPressa o dane poza edytorem. Istnieją komponenty do rozsyłania wiadomości, withSelectktórych selectużyjemy w dalszej części tej serii do odpytywania postów wewnątrz naszego bloku.
wp.compose
Poprzedni pakiet i wp.composejest przeznaczony do bardziej zaawansowanego budowania bloków. Wewnątrz tego pakietu znajdziemy komponenty i funkcje do tworzenia tzw. komponentów wyższego rzędu. Komponenty wyższego rzędu to technika wzorca w React do ponownego użycia komponentów i logiki, i użyjemy jej w połączeniu z wp.dataw celu odpytywania postów.
Dość gadania – jak w praktyce wykorzystujesz niektóre z tych komponentów?
Jak wcześniej wspomniano; aby korzystać z komponentów WordPressa, musisz wiedzieć, gdzie się znajdują. Mam nadzieję, że mój przegląd w połączeniu z repozytorium Github da ci pewne pojęcie, gdzie je zdobyć.
Nie zapominaj, że zawsze możesz dodać dowolne zwykłe znaczniki HTML, takie jak div, span, nagłówki i tak dalej. Pamiętaj tylko, aby w atrybutach postępować zgodnie z wytycznymi Reacta. Na przykład classjest zarezerwowanym słowem kluczowym w React (do tworzenia komponentów opartych na klasach), więc jeśli chcesz dodać klasę do elementu HTML, musisz użyć className.
Uwaga: Podczas programowania nie zapomnij rozpocząć npm run startkompilacji kodu.
Jako prosty przykład wypróbujmy kilka komponentów, aby zobaczyć, jak wyglądają. Destrukturyzujemy je z odpowiadających im pakietów i wykorzystujemy w naszej editfunkcji.
To na przykład spowoduje, że nasz blok będzie wyglądał tak w edytorze.
Zauważysz, że podczas wpisywania w konsoli otrzymasz komunikaty o błędach i że nie zapisze to, co wpisujesz po zaktualizowaniu posta (i odświeżeniu). Dzieje się tak, ponieważ brakuje nam właściwości komponentów, które są połączeniem z atrybutami, w których przechowywane są wszystkie nasze dane blokowe. Rekwizyty są odpowiedzialne za przekazywanie zapisanych wartości oraz funkcje odpowiedzialne za aktualizację naszych atrybutów, gdy coś się zmieni w naszych wejściach. To właśnie zrobimy w następnym kroku, w którym wreszcie zaczniemy pisać kod na serio.