Ponowne użycie komponentów React z Gutenberga w swoich wtyczkach WordPress

Kilka dni temu David ukończył serię czterech wpisów na blogu przedstawiających React. Wyjaśnił tam, jak rozpocząć pracę z Reactem, aby łatwo tworzyć interfejsy użytkownika w WordPressie. W szczególności w części 2 tej serii postów David wyjaśnił, jak przygotować środowisko programistyczne i jak stworzyć prosty komponent React. Dziś przekonamy się, że oprócz tworzenia własnych komponentów React, bardzo dobrym pomysłem jest ponowne wykorzystanie istniejących komponentów.

Odkąd Gutenberg pojawił się w WordPressie, JavaScript i framework React stały się kluczową częścią stosu deweloperskiego WordPressa. Dlatego jeśli nie jesteś przyzwyczajony do tych technologii, powinieneś się ich jak najszybciej nauczyć. Zrobiliśmy to i całkowicie przekodowaliśmy nasze wtyczki premium za pomocą Reacta. Oznaczało to przekształcenie wszystkich interfejsów użytkownika, które mieliśmy już z komponentami React.

Ponieważ programiści nie powinni wymyślać koła na nowo, aw świecie tworzenia oprogramowania mniej zawsze oznacza więcej, dzisiaj zobaczymy, jak ponownie wykorzystać istniejące komponenty React w WordPressie.

Komponenty React zawarte w WordPress

WordPress zapewnia ponad 80 komponentów React, które możesz ponownie wykorzystać w swoim rozwoju, za pośrednictwem pakietu @wordpress/components Gutenberga:

W każdym z folderów komponentów, które znajdziesz tutaj na Github projektu Gutenberg, masz kod źródłowy JavaScript każdego komponentu, a także jego style CSS i dokumentację, aby wiedzieć, jak i kiedy ich używać.

Wśród komponentów, których używaliśmy w Nelio do naszych nowych interfejsów React, warto wyróżnić Button i ButtonGroup , aby zdefiniować przyciski. Wszystkie kontrolery dla pól i opcji, takich jak CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl lub TextControl . Lub nawet TabPanel dla interfejsów z zakładkami lub Popover i Modal dla pływających okien dialogowych. A jest ich znacznie więcej…

Gdybyśmy musieli tworzyć te komponenty od podstaw, z pewnością nadal programowalibyśmy teraz nowe interfejsy React naszych wtyczek premium. Ponowne wykorzystanie istniejących komponentów to najlepsza rzecz, jaką możesz zrobić jako programista, aby zaoszczędzić czas. A te dostarczone przez Gutenberga dla WordPressa są idealne dla twoich wtyczek.

Jak ponownie wykorzystać komponenty React WordPress

Wyobraź sobie, że chcesz użyć przycisku w swoim interfejsie opracowanym w React. Dzięki istniejącym komponentom w Gutenberg możesz bezpośrednio użyć komponentu Button , jak widać w poniższym przykładzie:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

Być może zastanawiasz się, czy w przypadku przycisku nie musisz używać komponentu Gutenberg, a zamiast tego używać bezpośrednio tagu <button> . I miałbyś rację.

Jednak używając Button Gutenberga, otrzymujesz, że twój przycisk ma ten sam styl CSS, co inne przyciski w interfejsie WordPress. Ponadto, jeśli składnik i jego style zostaną zaktualizowane, co wydarzyło się w prawie każdej nowej wersji WordPressa, jako programista nie będziesz musiał nic robić. Nie ponosisz odpowiedzialności za aktualizację Gutenberg Button . Gdybyś użył własnego przycisku, musiałbyś się tym zająć.

Aby ponownie użyć istniejącego komponentu Gutenberg, wystarczy sprawdzić, czy ten komponent istnieje i zaimportować go do swojego kodu za pomocą pakietu @wordpress/components . Jak widać w powyższym fragmencie kodu, zaimportowaliśmy komponent Button z tego pakietu. Aby pakiet był dostępny w twoim projekcie, musisz go zainstalować za pomocą polecenia npm install @wordpress/components w terminalu. Ale to już wyjaśnił David w swoich postach, więc nie zamierzam tego ponownie omawiać.

Musisz pamiętać, że aby te komponenty przyjęły style WordPress, musisz ustawić wp-components jako zależność pliku stylu CSS podczas umieszczania go w kolejce w WordPress za pomocą funkcji PHP wp_enqueue_style .

O ile twoje potrzeby nie są pokryte przez komponenty React dostarczone przez Gutenberga, nie wymyślaj na nowo koła i nie używaj ich. Korzyści z ponownego wykorzystania istniejących komponentów są znacznie większe niż przy użyciu własnych komponentów.

React Components Storybook Gutenberga

Jedną z nowości Gutenberga jest Storybook, który możemy znaleźć na Github. Storybook to narzędzie typu open source, które zapewnia piaskownicę do samodzielnego tworzenia i przeglądania komponentów. W przypadku WordPressa służy on m.in. jako dokumentacja komponentów.

Wśród różnych opcji zawartych w Gutenberg Storybook mamy możliwość wypróbowania edytora bloków poprzez menu Playground . Ale najciekawszą opcją jest możliwość zapoznania się z dokumentacją komponentów Gutenberga w przyjazny sposób.

Wystarczy otworzyć menu Komponenty i tam znajdziesz listę komponentów, które WordPress dostarcza za pośrednictwem pakietu @wordpress/components . Możesz zapoznać się z każdym komponentem React i zobaczyć przykłady użycia wraz z ich pełnym kodem JavaScript.

Na przykład na poniższym zrzucie ekranu widać przykłady komponentu Button z różnymi właściwościami, jakie mogą mieć przyciski. Następnie w zakładce Story masz kod źródłowy kompletnego przykładu:

Ponadto niektóre określone komponenty zawierają opcje na karcie Pokrętła umożliwiające modyfikowanie właściwości komponentu i podgląd zmian, jakie powodują w jego interfejsie.

Jednym z tych składników jest TextControl , który służy do dodawania pola tekstowego. Na poniższym zrzucie ekranu widzimy zakładkę Pokrętło z różnymi opcjami ukrywania etykiety komponentu lub zmiany tekstu zarówno etykiety, jak i pomocy. Możemy więc zobaczyć, jak komponent będzie wyglądał po zmianach i zdecydować, w jaki sposób chcemy go użyć w naszych interfejsach React:

Nie wszystkie komponenty pakietu @wordpress/components mają pełną dokumentację w Storybook, więc będziesz musiał przejść do sekcji pakietów komponentów na Github, aby zobaczyć najnowszą wersję stanu komponentów React w Gutenberg.

Jednak wraz z ukończeniem dokumentacji Gutenberg Storybook będzie ona stawała się coraz bardziej interesująca dla programistów. Posiadanie tego typu dokumentacji w WordPressie to luksus. Jego użyteczność nie podlega dyskusji.

Widziałeś już wszystko, co komponenty React Gutenberga mogą zapewnić dla twoich projektów WordPress. Zamiast wymyślać koło na nowo i rozwijać własne komponenty podstawowe, najpierw spójrz na komponenty React Gutenberga, aby uzyskać spójność z resztą interfejsu WordPressa i skrócić czas programowania i konserwacji. Ponowne używanie oprogramowania jest kluczem do większej wydajności jako programiści WordPress.

Polecane zdjęcie Morning Brew na Unsplash.