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.
Dodawanie pasków narzędzi
Aby dodać coś do paska narzędzi naszego bloku, musimy umieścić to, co chcemy w nim w komponencie o nazwie BlockControls(from wp.blockEditor). Wewnątrz tego komponentu możemy dodać jeden z komponentów WordPress dla standardowych pasków narzędzi, które znamy z innych bloków (na przykład wyrównanie) lub możemy dodać własny pasek narzędzi.
Domyślnie blok będzie posiadał pasek narzędzi zawierający tylko ikonę bloku (dla funkcji Przekształć w) oraz menu bloku do np. usunięcia bloku. Nie możemy ich usunąć, ale możemy dodać między nimi własne przyciski i paski narzędzi.
Jednak niektóre komponenty WordPressa same dodadzą własne paski narzędzi. W tej chwili nasz blok pokazuje pasek narzędzi do formatowania tekstu, który pochodzi z RichTextkomponentu, który dodaliśmy.
Dodawanie paska narzędzi wyrównania bloków
Pasek wyrównywania bloków istnieje praktycznie we wszystkich typach bloków WordPress, więc dodajmy go również do naszego bloku. Za kulisami istnieje komponent BlockAlignmentToolbar, który moglibyśmy dodać, jednak nie polecam tego. Korzystanie z niego wymaga ręcznej obsługi klas w celu wyrównania bloków i upewnienia się, że blok rozszerza swoją szerokość w edytorze po wybraniu opcji „Szeroka szerokość" lub „Pełna szerokość”. Na szczęście WordPress bardzo ułatwił jego implementację, w pełni automatycznie.
PS: Aktywny motyw musi aktywnie dodać obsługę motywu dla tych dwóch wyrównań bloków. Możesz dodać wsparcie dla tych, mając add_theme_support('align-wide')w after_setup_themehaczyku.
Możemy dodać do naszej konfiguracji obiektu nową właściwość o registerBlockType()nazwie supports. Istnieje kilka innych funkcji, ale to, co nas tutaj interesuje, to align. Możemy albo ustawić align, aby truedodać wszystkie możliwe wyrównania, albo możemy dostarczyć tablicę dokładnych wyrównań, które dopuszczamy dla naszego bloku.
Co daje nam to w edytorze:
Jeśli chcesz, na przykład, uniemożliwić komukolwiek korzystanie z szerokiej lub pełnej szerokości, możesz podać tablicę i wykluczyć te dwa. Nazwy linii trasowania bloków są następujące: left, right, center, widei full.
supports: {
align: ['left', 'right', 'center']
},Potrzebujesz domyślnego wyrównania?
Domyślnie blok nie otrzymuje wyrównania bloku. Jeśli chcesz, możesz ustawić wartość domyślną, tworząc atrybut za pomocą klawisza align, ustaw typ na stringi ustaw tam wartość domyślną. WordPress automatycznie połączy ten atrybut z wyrównaniem bloku.
attributes: {
align: {
type: 'string',
default: 'center'
}
},
supports: {
align: true
},Dzięki temu za każdym razem, gdy tworzony jest nowy blok naszego typu, domyślne wyrównanie bloku jest wyśrodkowane.
Bałagan w stylizacji wyrównania bloków? To nie nasza wina
Uwaga: Domyślny styl blokowy z WordPressa zaburzy przepływ treści posta podczas korzystania z wyrównania bloku do lewej i prawej. To samo dzieje się z innymi typami bloków z WordPressa i nie jest to wyłącznie problem naszego bloku. Jest to spowodowane dodaniem do elementu float, co powoduje zwinięcie elementu nadrzędnego. Uwierz mi, próbowałem skonstruować blok, aby uniknąć tego problemu. Jedyne, co odkryłem, że działa poprawnie bez ingerencji w inne wyrównania bloków, to dodanie stylizacji do edytora i dostosowanie stylizacji pływaka.
Niezależnie od tego, WordPress ułatwił wdrożenie wyrównania bloków. Przyjrzyjmy się teraz innym paskom narzędzi, z których możemy korzystać.
Dodawanie paska narzędzi wyrównania tekstu
Jeśli wolisz pasek narzędzi do wyrównania tekstu, możesz to zrobić zamiast wyrównania do bloków – w tym pasku narzędzi mamy tylko wyrównanie do lewej, do środka i do prawej. W rzeczywistości możesz używać zarówno wyrównania tekstu, jak i wyrównania bloków razem – działają osobno. Aby nie dezorientować użytkowników, możesz na przykład dodać obsługę wyrównania bloków do szerokości i pełnej szerokości oraz użyć paska narzędzi wyrównania tekstu do kontrolowania wyrównania do lewej, do środka lub do prawej. W ten sposób unikniesz wyżej wspomnianego problemu z przepływem bloków w edytorze. Od Ciebie zależy, jak chcesz, aby Twój blok działał.
WordPress ma komponent do wyprowadzania paska narzędzi wyrównywania tekstu, ale nie ma automatycznej obsługi dodawania poprawnych klas do faktycznego wyrównania treści – zarówno w edytorze, jak i w interfejsie (przynajmniej na tyle, na ile się znalazłem!). Musimy ręcznie dodać i zaktualizować atrybut wyrównania tekstu.
Dodawanie BlockControlsiAlignmentToolbar
Dodajmy wreszcie BlockControlsdo naszej editfunkcji dla naszego wyjścia na pasku narzędzi. Komponent do wyrównania tekstu pochodzi AlignmentToolbarz wp.blockEditorpakietu.
Zauważ, że wykluczyłem zawartość wszystkiego, co stworzyliśmy w InspectorControlspoprzednim kroku, aby skrócić kod.
Pomiędzy wierszem #37do #42znajduje się cała zawartość naszego paska narzędzi (oprócz wyrównania bloków automatycznie dodanego przez supportswłaściwość i formatowania tekstu dodanego przez nasze RichTextkomponenty). Używamy BlockControls, aby uzyskać dostęp do paska narzędzi, a wewnątrz dodajemy AlignmentToolbarkomponent.
Jak już kilkakrotnie zrobiliśmy z danymi wejściowymi, udostępniamy valuewłaściwość do pokazywania zapisanej wartości oraz onChangewłaściwość do aktualizowania naszego atrybutu w AlignmentToolbarkomponencie. Atrybut, którego użyjemy do przechowywania wybranego wyrównania tekstu, jest zdefiniowany jako textAlignmenti musi być typem string. Jak zwykle możesz podać a, defaultaby zapewnić, że nowo utworzone bloki otrzymają domyślne wyrównanie.
Aby upewnić się, że blok zarówno wyprowadza informacje o wyrównaniu, jak i jest poprawnie stylizowany (więc faktycznie widzimy wyrównanie zmiany tekstu) zarówno w edytorze, jak i w interfejsie użytkownika, musimy ręcznie skonfigurować odpowiednią klasę w opakowującym div. W obu editdefiniuję savezmienną, która sprawdza, czy attributes.textAlignmentjest ustawiona. Jeśli tak, tworzę nazwę klasy zgodnie ze standardami WordPressa dotyczącymi wyrównania tekstu, czyli „has-text-align-(left|center|right)”. Dzięki tej klasie WordPress zastosuje swoją stylizację do naszego bloku i upewni się, że nasz blok jest poprawnie wyrównany wizualnie, zarówno w edytorze, jak i interfejsie.
Dodawanie niestandardowych pasków narzędzi z własnymi przyciskami
Możesz także dodać własne przyciski na pasku narzędzi, aby robić, co chcesz, po ich kliknięciu. Aby to zrobić, będziesz chciał dodać komponent, Toolbara wewnątrz tego elementu dodaj IconButton(oba w wp.componentspakiecie). Oczywiście wszystko w BlockControlsciągu.
Uwaga: Według dziennika zmian WordPressa Gutenberga IconButtonjest przestarzałe na rzecz używania Button. Jednak nie wydaje mi się, aby ikona pojawiała się za pomocą Buttonkomponentu, bez względu na to, co robię, mimo że ma go obsługiwać. Więc od teraz będę używał IconButton.
Oczywiście możesz połączyć wiele komponentów paska narzędzi w ramach programu BlockControls. Za pomocą poniższego kodu dodajemy pasek narzędzi wyrównania tekstu i nasz niestandardowy pasek narzędzi z jednym przyciskiem po nim.
Składnik IconButton akceptuje ikonę z dashiconem WordPress lub plik SVG do właściwości icon. Możemy dostarczyć inne rekwizyty, takie jak classNamei label(pojawią się w podpowiedzi po najechaniu na przycisk). Rekwizyt, który nas najbardziej interesuje, to oczywiście onClickrekwizyt, który uruchamia się po kliknięciu przycisku. Tutaj możemy podać funkcję i zasadniczo robić, co chcemy. Możliwości są nieograniczone i zależą od tego, co chcesz robić. W powyższym kodzie po prostu konsoli loguję coś po kliknięciu przycisku. W miarę postępów w tej serii samouczków prawdopodobnie dostaniesz kilka pomysłów, jak sprawić, by niestandardowy przycisk robił to, co chcesz.
To jest to, co zrobiliśmy do tej pory. W kolejnym kroku serii zaczniemy przyglądać się bardziej zaawansowanym rzeczom i nauczymy się tworzyć własne komponenty, aby wykorzystać stan i inne korzyści.