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. W poprzednim kroku przyjrzeliśmy się komponentom WordPress, gdzie je znaleźć i jak je wdrożyć. W tym poście dodamy rekwizyty do nawiązania połączenia z atrybutami – zapisanymi danymi.
Definiowanie atrybutów
Atrybuty są dodawane jako obiekty w tablicy do attributeswłaściwości w registerBlockType(). Kluczem każdego atrybutu jest nazwa atrybutu i musisz mieć typeprzynajmniej właściwość.
Właściwość typemoże być dowolną z poniższych; null, boolean, object, array, number, string, lub integer.
Opcjonalnie możesz podać właściwość, defaultaby zdefiniować początkową wartość atrybutu. Jeśli nie podasz wartości domyślnej, atrybut przyjmie wartość domyślną null.
Inna właściwość atrybutu sourcedziała razem z tą selectorwłaściwością, ale są to drobiazgi, którym przyjrzymy się szczegółowo poniżej.
Na przykład zdefiniowanie dwóch atrybutów; exampleTextjako ciąg i postIdsjako tablica wyglądałaby tak:
Wszystko, co chcesz zapisać dla swojego bloku (dane wejściowe od użytkownika/edytora), wymaga atrybutu. Od Ciebie zależy, jak ustrukturyzujesz swoje dane, definiując osobne atrybuty dla każdego z nich lub łącząc je wszystkie w jeden obiekt. Będzie to tylko różnica w sposobie pobierania ich danych i ich aktualizacji.
Pobieranie wartości atrybutów
Atrybuty są dostępne jako rekwizyty do Twojego bloku editi savefunkcji. Jeśli śledziłeś tę serię od poprzedniego kroku, pamiętaj, że zaktualizowaliśmy funkcje, aby przekazywały props jako parametr.
Często destrukturyzuje się atrybuty z rekwizytów, jak zwykle często się do nich odwołujesz. Na przykład wypisanie wywoływanego atrybutu exampleTextwyglądałoby tak:
Aktualizowanie wartości atrybutów
W celu aktualizacji atrybutów mamy dostępną w props metodę o nazwie setAttributes(). Ta funkcja akceptuje obiekt, do którego możesz dodać dowolny atrybut, który chcesz zaktualizować. Możesz zaktualizować tylko jeden atrybut, więcej lub wszystkie naraz. Jeśli masz zdefiniowanych wiele atrybutów i wywołasz setAttributes()aktualizację tylko jednego z nich, pozostałe nie zostaną dotknięte.
Jeśli masz doświadczenie z Reactem, prawdopodobnie od razu rozpoznasz podobieństwa między setAttributes()i setState(). Działają dokładnie tak samo, ale różnica polega na tym, że stan w React jest po prostu czymś przechowywanym lokalnie w tym komponencie, a atrybuty są w rzeczywistości zapisywane jako dane poza komponentem.
Aby zaktualizować atrybut, zwykle destrukujesz funkcję z właściwości i nazywasz to w ten sposób: Poniżej aktualizujemy exampleTextatrybut na „Hi".
const { setAttributes } = props;
setAttributes({ exampleText: 'Hi' });Naturalnie uruchomiłbyś setAttributes()od wewnątrz jakąś akcję. Typowym przykładem jest wnętrze właściwości onChangew jakimś polu wejściowym, które jest używane do przechowywania wartości exampleTextatrybutu.
Upewnij się, że zapisałeś atrybuty w typie zdefiniowanym w atrybucie. Na przykład nie będziesz miał szczęścia, próbując zapisać obiekty w atrybucie łańcuchowym.
Wypróbujmy to w praktyce! Zainicjuj npm run start, jeśli jeszcze tego nie zrobiłeś.
Wyświetlanie atrybutu w niestandardowym wprowadzaniu tekstu i aktualizowanie wartości atrybutu
W poprzednim kroku dodaliśmy do edit, np. wpis tekstowy, ale nic nie zostało zapisane. Dodajmy atrybut i jedno wejście tekstowe dla niego w naszym bloku. Oboje upewnimy się, że wprowadzany tekst pokazuje aktualną wartość, a za każdym razem, gdy dane wejściowe zostaną zmienione, zaktualizujemy atrybut.
Dodawanie tekstu wejściowego i jego onChangewłaściwości
Destrukturyzujemy attributesi korzystamy setAttributesz propsobu. Następnie korzystamy z TextControlkomponentu z wp.componentspakietu WordPress. Przekazujemy do niego dwa rekwizyty; valueustawi wartość wejścia (zarówno początkową, jak i podczas pisania) oraz akcję na zdarzeniu wejścia onChange.
W valueustawiamy ją na wartość naszego atrybutu; attributes.exampleText. W onChangeprzypadku, gdy uruchamiamy funkcję, przekazując wpisaną wartość naszego wejścia jako parametr newtext(wartość wejściowa to właściwość zwracana z komponentu). W tej funkcji wywołujemy setAttributes()i aktualizujemy atrybut exampleTextdo tego, co zostało wpisane w danych wejściowych.
To jest podstawowy React – poza tym, że pracujemy z atrybutami, a nie stanem. Jeśli powyższe zdezorientowało Cię, polecam zajrzeć do krótkiego samouczka w React, ponieważ prawdopodobnie wyjaśnią to lepiej niż ja!
Odśwież swój edytor i zobacz, jak działa blok! Powinieneś otrzymać standardowe wejście tekstowe do wpisywania rzeczy, które zostanie zapisane za każdym razem, gdy naciśniesz Zapisz / Aktualizuj w edycji postu.
Wynik w interfejsie i w bazie danych
Jeśli przeglądasz swój post w interfejsie, powinien on nadal wyświetlać div z „:)”, ponieważ nadal mamy to w naszej savefunkcji. Ale coś się wydarzyło za kulisami! Blok komentarza naszego bloku zawiera teraz wartość naszego atrybutu w JSON.
Nie możesz zobaczyć bloków komentarzy w szablonie, który wykonuje normalne the_content()wywołanie. Aby zobaczyć bloki komentarzy, masz dwie opcje. Spójrz na post_contenttabelę w bazie danych postów. Lub dodaj echo get_the_content()szablon i spójrz na niego w narzędziu do sprawdzania/debugowania.
Oczywiście mamy również dostęp do atrybutów savez rekwizytów.
Wyświetlanie wartości wejścia wsave
Wyświetlmy wartość atrybutu w div w naszej savefunkcji:
Uwaga: po dokonaniu tej zmiany otrzymasz uszkodzony blok w poście, do którego już dodałeś ten blok. Dzieje się tak, ponieważ edytor napotyka inny wynik saveniż to, co zdefiniowaliśmy teraz. Usuń blok i dodaj go ponownie. Wpisz coś w swoim tekście, zaktualizuj post i wyświetl go w interfejsie.
I to jest właściwie sedno tego. Ty decydujesz, jakich atrybutów potrzebujesz, aby zapisać to, co chcesz w swoim bloku. W editten sposób wyrenderujesz sposoby wprowadzania danych przez użytkownika, dbając o to, aby bieżące wartości były wyświetlane i aktualizować je za każdym razem, gdy ulegną zmianie. Wyodrębniaj savezapisane atrybuty i renderuj dane wyjściowe tak, jak chcesz.
W tej serii samouczków dotkniemy o wiele więcej różnych komponentów i atrybutów. Przyjrzyjmy się jednak jeszcze jednemu komponentowi w tym poście, aby zobaczyć, o co chodzi we właściwości atrybutu source.
RichText i atrybut atrybutsource
Komponent WordPress RichTextzapewnia obszar tekstowy „bez obramowania” z obsługą formatowania tekstu. Możesz preferować używanie tego zamiast (brzydkiego?) standardowego wprowadzania tekstu lub obszaru tekstowego. Pamiętaj jednak, że RichTextmusi to być obsługiwane nieco inaczej, ponieważ istnieje kilka właściwości, o których musisz wiedzieć, a także jest różnica w sposobie, w jaki utrzymujemy wartość w naszej savefunkcji.
Dodawanie RichTextkomponentu
Najprostszą formą RichTextjest zaimplementowanie go tak, jak przy wprowadzaniu tekstu:
Zdestrukturyzowaliśmy RichTextkomponent z wp.blockEditorpakietu, ale poza tym powyższe jest identyczne z tym, co zrobiliśmy ze standardowym tekstem wejściowym.
Obsługa savezRichText
Jednak w savefunkcji musisz ponownie użyć RichTextkomponentu, aby uzyskać wartość atrybutu. Wywołujemy RichText.Contenti ustawiamy prop valuena nasz atrybut:
Spowoduje to wyświetlenie wszystkiego, co zostało wpisane w RichTextedytorze bezpośrednio, bez zawiniętego kodu HTML.
Podczas pracy z RichTexttobą najprawdopodobniej chcesz kontrolować opakowanie HTML wokół tekstu, na przykład a <p>lub a <h2>, zarówno w interfejsie, jak iw edytorze. W tym celu możemy użyć prop o nazwie tagName.
Komponent RichTextumożliwia również kilka innych rekwizytów. placeholderZa pomocą rekwizytu możesz zdefiniować tekst zastępczy, który będzie wyświetlany (wygaszony), gdy jest pusty. Komponent pozwala również kontrolować, jakie opcje formatowania umożliwia pole (które przyciski wyświetla na pasku narzędzi).
RichTextztagName
Za pomocą właściwości tagNamemożesz wstępnie zdefiniować, w którym tagu HTML zostanie opakowane wyjście. Kiedy używasz tagNamewłaściwości, powinieneś użyć tej samej właściwości tagNamei wartości w obu editi save.
Powiedzmy, że chcesz umieścić wartość atrybutu w <h2>, co spowoduje w edytorze, że każde dane wejściowe będą h2. W editmożesz zrobić:
A w save:
Powyższe spowoduje teraz wyświetlenie tego, co zostało wpisane w RichTextobszarze wewnątrz <h2>tagu.
Za pomocąsource
Oczywiście możesz połączyć wiele tekstu sformatowanego w bloku, na przykład jeden dla nagłówka i jeden dla akapitu. Pamiętaj tylko, że każdy będzie potrzebował własnego atrybutu. Na przykład:
Jednak teraz zaczniesz napotykać pewne problemy. Mimo że możesz formatować tekst w edytorze, nic (lub niektóre) z formatowania nie zostaną zapisane. Kiedy przeglądasz post w interfejsie, po prostu pojawi się on jako h2i p, bez żadnego formatowania (kursywa, pogrubienie, link). Nawet blok komentarza do twojego bloku nie zawiera formatowania. To jest trudne z RichText. Aby rozwiązać ten problem, musimy pracować z właściwością atrybutu source.
Właściwość sourceumożliwiająca WordPressowi wyodrębnianie i interpretowanie treści bezpośrednio z treści posta. Jeśli atrybut nie jest sourceustawiony, zostanie zapisany i wyodrębniony z bloku komentarzy HTML.
Podczas pracy RichTextzwykle ustawiamy sourcena html, który wykorzystuje bibliotekę WordPressa do analizowania znaczników HTML. Właściwość sourcewspółpracuje z inną właściwością atrybutu; selectorktóry definiuje, z którego znacznika HTML powinien on wyodrębnić.
Jako przykład ustawiamy sourcejak htmlw naszym akapicie RichTexti ustawiamy selectorjako p(w przeciwnym razie domyślnie jest to root of block the block).
attributes: {
...
myRichText: {
type: 'string',
source: 'html',
selector: 'p'
}
},Teraz nasz drugi RichTextpowinien pomyślnie zapisać całe formatowanie tekstu. Zauważysz również, że blok komentarza wyświetla teraz tylko myRichHeadingatrybut w JSON. Atrybut myRichTextcałkowicie zniknął z bloku komentarzy. Dzieje się tak, ponieważ sourceWordPress analizuje teraz treść posta zamiast bloku komentarza dla wartości atrybutu.
Aby być całkowicie szczerym, nie pracowałem tak dużo z tym sourceatrybutem i zalecałbym unikanie go, jeśli możesz. Dokumentacja WordPressa wyjaśnia nieco więcej o źródle i atrybutach, które chcesz sprawdzić sam.
W tym poście poznaliśmy podstawy atrybutów; jak je zdefiniować, zaktualizować i wyprowadzić ich wartości. W kolejnych krokach przyjrzymy się większej liczbie różnych komponentów i sposobom dodawania ustawień poza samą zawartością bloku; na pasku narzędzi i pasku bocznym edytora (nazywanym Inspektorem).