✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Samouczek: Utwórz suwak jako dynamiczny blok Gutenberga

21

W tym samouczku omówimy sposób tworzenia dynamicznego bloku WordPress Gutenberg. Efektem końcowym jest suwak pokazujący polecany obraz z wybranych postów kategorii. Kod obejmuje użycie komponentu wyższego rzędu (withSelect) do pobrania wszystkich kategorii w edytorze bloków.

Co zrobimy

Blok wyrenderuje prosty suwak za pomocą skryptu jQuery Cycle2. Ale możesz użyć dowolnego innego skryptu suwaka. Blok wyświetli wewnątrz edytora listę wszystkich kategorii, pozwalając użytkownikowi wybrać jedną kategorię. Wyświetlając blok w interfejsie, będzie on dynamicznie pobierał posty z wybranej kategorii i wyświetlał ich polecane obrazy jako slajdy. Ten samouczek będzie dość prosty, umożliwiając rozwijanie i dostosowywanie suwaka w dowolny sposób.

Zdecydowałem się nie renderować pokazu slajdów w edytorze. Zwykle upewnij się, że renderowanie w edytorze i interfejsie jest takie samo. Ale w przypadku slidera lubię zachować prostotę, aby nie zasypywać użytkownika ciągłymi animacjami w edytorze.

Blok będzie miał tylko dwa ustawienia; wybór kategorii i liczby slajdów (postów). Polecam dodać więcej ustawień, takich jak prędkość przesuwania, ustawienia wyświetlania pigułek, strzałek, tekstu i inne typowe ustawienia suwaka. Samo dodanie tych ustawień powinno być dość proste.

Cały kod jest napisany w Javascript ES6 / ES2015+. Pamiętaj, że ten kod wymaga Babel do przekształcenia i zbudowania ostatecznych plików JavaScript. Sprawdź poniższy przewodnik, jeśli nie wiesz jak.

Skonfiguruj pliki

W tym przykładzie tworzymy blok wewnątrz motywu. W folderze motywu mam podfolder ‘ gutenberg/‘, w którym umieściłem mój package.jsoni webpack-config.js. Wewnątrz podfolderu „ src/" w tym folderze umieszczam wszystkie moje pliki kompilacji. Konfiguracja mojego pakietu webpack jest skonfigurowana tak, aby umieszczać pliki kompilacji w moim podfolderze motywu „ assets/js/“.

Utwórz nowy pusty plik źródłowy w theme-folder/gutenberg/src/block-slider.jsi skonfiguruj pakiet Webpack, aby utworzyć plik kompilacji w programie theme-folder/assets/js/block-slider.js. Możesz dowolnie zmieniać lokalizacje i/lub nazwy plików, pamiętaj tylko o dostosowaniu poniższego kodu.

Musimy również pobrać niezbędny skrypt slidera. Możesz pobrać Cycle2 pod tym linkiem lub użyć dowolnego innego skryptu slajdów i dostosować poniższy kod. Umieszczam jquery.cycle2.min.jsplik w folderze mojego folderu motywu /assets/js/.

Przygotuję też mały plik CSS, który będzie ładowany tylko w edytorze. Mamy tylko mały kawałek stylizacji, aby wybór kategorii był optymalny. Tworzę pusty plik editor-block-slider.cssi umieszczam go w theme-folder/assets/css/.

Na koniec przechodzimy do pliku PHP, który jest załadowany w motywie. Dla uproszczenia robię część PHP w temacie functions.php.

Zarejestruj blok Gutenberga w PHP

Wszystkie bloki Gutenberga muszą być zarejestrowane w [register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)(). Wolę wywoływać go wewnątrz funkcji podpiętej do init. Pierwszym parametrem jest nazwa Twojego bloku wraz z przestrzenią nazw. Postanowiłem nazwać mój skrypt suwaka awp/slider(dostosuj, jak chcesz). Drugi argument to tablica argumentów.

W ramach tej samej funkcji zarejestruję skrypt budowania [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)()i zarejestruję plik CSS edytora za pomocą [wp_register_style](https://developer.wordpress.org/reference/functions/wp_register_style/)(). Oba te uchwyty zostaną dodane jako argumenty odpowiednio do „ editor_script” i „ editor_style“. Jeśli chodzi o zależności, dodałem kilka najbardziej podstawowych pakietów dla skryptu, aby upewnić się, że nasz skrypt blokowy jest ładowany we właściwej kolejności. Jeśli chodzi o styl edytora, użycie „ wp-edit-blocks” jest dobrą zależnością, aby uniknąć nadpisania stylów.

I wreszcie, ponieważ jest to blok dynamiczny, musimy również dodać render_callbackargument „ “, wskazujący na funkcję odpowiedzialną za renderowanie bloku w interfejsie użytkownika.

Na koniec definiujemy funkcję render. Do funkcji zwrotnej otrzymujemy dwa parametry; tablicę atrybutów z bloku i zawartość wewnętrzną (nieużywaną w tym bloku). Po prostu zwrócę jakiś fikcyjny ciąg. Wrócimy i rozwiniemy funkcję renderowania później. Pamiętaj, aby zwrócić ciąg, a nie echo.

function awp_gutenberg_slider_render($attributes, $content) { return 'Slider render comes here.'; }

Powrócimy do funkcji renderowania PHP na samym końcu tego samouczka. Teraz nadszedł czas, aby przejść do JavaScript!

Zarejestruj niestandardowy blok Gutenberga w JavaScript

Otwórzmy nasz block-slider.jsplik źródłowy. W tym momencie uruchomię skrypt (npm run start), aby przekształcić wszystko, co robimy w tym pliku, w plik kompilacji. Musimy zarejestrować blok za pomocą [registerBlockType](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/)(). Sprawdź link, aby zobaczyć wszystkie możliwe argumenty.

Jak zdecydowaliśmy w register_block_type()PHP, nasz blok nazywa się awp/slider. Chcemy również dodać do bloku dwa atrybuty, jak wspomniano wcześniej: jeden dla wybranego identyfikatora terminu i jeden dla liczby slajdów.

Lubię też dodawać funkcjonalność wyrównania bloków. Zostanie on dodany automatycznie poprzez dodanie znaku ‘ align‘ do supportsobiektu. Jeśli chcesz wszystkie wyrównania bloków, możesz po prostu ustawić alignna true. Jednak suwak wyrównany do lewej lub do prawej nie ma większego sensu, więc zdefiniuję określone typy wyrównywania bloków, które obsługuje ten blok: „Wyrównaj do środka” (‘ center‘), „Szeroka szerokość” (‘ wide‘) i „ Pełna szerokość” (‘ full‘). Ponadto, aby zdefiniować domyślne wyrównanie i udostępnić je z poziomu PHP, dodaję ‘ align‘ jako atrybut do naszego bloku.

Ustawiam editargument bloku na osobny komponent, który następnie stworzymy. I na koniec savefunkcja po prostu zwraca null, ponieważ jest to blok dynamiczny.

Musimy zdefiniować komponent dla editwłaściwości. Przed kodem rejestracyjnym definiuję komponent funkcyjny, BlockEditktóry po prostu renderuje a divi a Placeholderz jakimś fikcyjnym tekstem.

[Placeholder](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/placeholder)to fajny komponent do renderowania obszaru dla ustawień – i niekoniecznie do rzeczywistego renderowania bloku. Wewnątrz Placeholderkomponentu renderujemy listę terminów do wyboru.

W tym momencie nasz blok powinien być dostępny w WordPress Gutenberg! Stwórzmy nowy post, dodajmy nowy blok i znajdźmy nasz blok w kategorii Wspólne. Tak obecnie wygląda nasz blok:

Samouczek: Utwórz suwak jako dynamiczny blok GutenbergaSamouczek: Utwórz suwak jako dynamiczny blok Gutenberga

Dodawanie ustawień inspektora

Dodajmy kilka ustawień do Inspektora (prawy pasek boczny edytora). Jak wspomniano, nasz blok ma tylko jedno ustawienie; liczba slajdów. W tym miejscu zalecam dodanie większej liczby ustawień do bloku suwaka. Pamiętaj, aby zarejestrować atrybuty dla każdego dodanego ustawienia.

Aby dodać coś do Inspektora używamy komponentu [InspectorControls](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inspector-controls)( ). wp.blockEditorWewnątrz renderujemy [PanelBody](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/panel#panelbody)( wp.components) w celu dodania nowej sekcji zwijanej. Następnie po prostu renderujemy [RangeControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/range-control)( wp.components), aby utworzyć ustawienie wejściowe i wybrać liczbę slajdów. Ustawiamy minimum na 1 a maksimum na 10. Łączymy zdarzenie valuei onChangez atrybutem numSlides.

Dzięki powyższemu kodowi powinniśmy teraz otrzymać fajną sekcję z suwakiem zakresu do ustawiania liczby slajdów.

Samouczek: Utwórz suwak jako dynamiczny blok Gutenberga

Ponownie polecam zabawę w dodawanie kolejnych ustawień do suwaka. Następnym krokiem jest stworzenie elementu do renderowania listy kategorii do wyboru.

Tworzenie komponentu wyboru kategorii

Aby nasz kod był uporządkowany i wielokrotnego użytku, utwórzmy komponent selektora kategorii w osobnym pliku. Wewnątrz folderu build tworzę nowy plik awp-category-picker.js.

Wewnątrz tego pliku definiujemy komponent, który będzie przechodził przez wszystkie kategorie obecnie w WordPressie i renderuje je w jakiś sposób. Aby uzyskać kategorie, musimy umieścić go w tak zwanym komponencie wyższego rzędu, który za pośrednictwem rekwizytów dostarczy naszemu komponentowi to, czego potrzebujemy. W tym celu użyjemy [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect). Wewnątrz withSelectmożemy złożyć prośbę o pobranie wszystkich kategorii w WordPress za pomocą selektora sklepu [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). Możemy użyć:

aby pobrać wszystkie terminy w ramach dostarczonej informacji o taksonomii. Jeśli nie znasz komponentów i selektorów wyższego rzędu w WordPress Gutenberg, mam post, który wyjaśnia tę koncepcję bardziej szczegółowo: Utwórz niestandardowy blok Gutenberga – część 10: Pobieranie postów i komponentów wyższego rzędu.

Ponieważ musimy wyeksportować komponent z tego pliku, w zestawieniu umieszczamy kombinację withSelecti nasz zdefiniowany komponent export default. Nasz CategorySelectkomponent po prostu zwraca div z jakimś fikcyjnym tekstem, dzięki czemu możemy zobaczyć, że to działa. withSelectPowinna zawierać podporę ‘ ‘ termsdo CategorySelect. Dodałem a console.log()na tym rekwizycie, więc widać, że działa.

Ostatnią rzeczą, którą musimy zrobić, to zaimportować i użyć tego komponentu selektora kategorii w naszym bloku niestandardowym.

Wracając block-slider.js, najpierw musimy zaimportować komponent na górze pliku. A wewnątrz naszego Placeholderkomponentu po prostu renderujemy komponent.

Z powyższym kodem twój blok powinien teraz renderować div z CategorySelectkomponentu. Jeśli otworzysz konsolę w przeglądarce, powinieneś również zobaczyć niektóre logi. Pamiętaj, że withSelectjest to zapytanie asynchroniczne, co oznacza, że ​​może renderować wiele razy. Po raz pierwszy warunki prop to null. Ale ostatnie dzienniki powinny kończyć się tablicą terminów kategorii.

Świetny! Kontynuujmy pracę z naszym CategorySelectkomponentem i sprawmy, aby faktycznie renderował listę terminów, umożliwiając użytkownikowi wybranie jednego!

Renderowanie listy terminów do wyboru

Istnieje wiele sposobów renderowania listy wyborów, na której użytkownik może wybrać jeden element. Jeśli chcesz czegoś naprawdę prostego, możesz wyrenderować standardowe menu wyboru ([SelectControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/select-control)). To zależy wyłącznie od Ciebie. Zdecydowałem się na czystsze i przyjemniejsze podejście, używając [MenuGroup](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-group)( wp.components) i [MenuItem](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-item)( wp.components).

Wewnątrz MenuGroupkomponentu musimy przejść przez props.termstablicę, a dla każdego elementu chcemy wyświetlić MenuItemkomponent renderujący nazwę terminu. I oczywiście chcemy to renderować tylko wtedy, gdy props.termsfaktycznie coś zawiera (żądanie asynchroniczne, pamiętasz?).

Komponentowi nadałem MenuGroupklasę niestandardową, ponieważ będziemy musieli ukierunkować to za pomocą CSS. Ustawiłem rekwizyt rolena MenuItemmenuitemradio“, aby mieć pewność, że w danym momencie można wybrać tylko jeden. Domyślnie działają one jako pola wyboru, dzięki czemu można wybrać wiele elementów.

Dzięki powyższemu kodowi nasz blok powinien teraz (po krótkiej sekundzie) wyrenderować ładną listę wszystkich kategorii w twojej instancji WordPressa.

Możesz zauważyć, że nasz blok rozszerzy się, obejmując wszystkie kategorie. Jeśli jesteśmy w instancji WordPressa z wieloma kategoriami, szybko staje się to problemem. Chcemy się upewnić, że selektor jest kontenerem o maksymalnej wysokości, który otrzyma pionowy pasek przewijania, jeśli istnieje wiele kategorii. Tutaj wkracza nasz plik CSS.

W naszym editor-block-slider.csspliku dodaj:

.awp-categoryselect div { max-height: 200px; overflow: hidden scroll; border: 1px solid #b3bcc0; }

Ten CSS kieruje się do divwnętrza naszego MenuGroupi zapewnia, że ​​nigdy nie przekroczy 200 pikseli. Jeśli zawartość strony MenuGrouppowiększy się (więcej kategorii), pokaże się pionowy pasek przewijania. To jest absolutne minimum CSS dla naszego bloku, ale oczywiście możesz dodać więcej CSS, jeśli chcesz.

Ostatnią rzeczą, którą musimy poprawić w naszym selektorze kategorii, jest funkcjonalność wyświetlania aktualnie wybranego elementu i umożliwienie użytkownikowi wybrania terminu z listy. W tym celu musimy przekazać kilka props do tego komponentu z naszego bloku.

W block-slider.jstym celu musimy przekazać aktualnie wybrany termin (wartość atrybutu termId) oraz funkcję aktualizującą wybrany termin (setAttributes) jako rekwizyty do naszego komponentu selektora kategorii.

W powyższym kodzie w wierszu #6definiujemy funkcję, która po prostu aktualizuje atrybut termId. Tę nazwę funkcji przekazujemy jako prop do CategorySelectat line #17. W linii #16przekazujemy aktualną wartość termId. Dzięki temu możemy zaktualizować nasz CategorySelectkomponent, aby odzwierciedlał wybraną pozycję i pozwolić użytkownikowi na rzeczywisty wybór terminu.

Wracając awp-category-picker.js, dodajemy nowe rekwizyty do MenuItem. Zwracamy truelub falsedla właściwości, isSelectedczy bieżący identyfikator terminu jest taki sam, jak aktualnie wybrany. selectTermFunkcję inicjujemy w onClickzdarzeniu, przekazując termin ID. Aby zaznaczona pozycja była wizualna, warunkowo dodajemy ikonę przed każdą pozycją.

Dzięki temu nasz selektor kategorii powinien wyglądać tak:

Samouczek: Utwórz suwak jako dynamiczny blok Gutenberga

Lista powinna wyraźnie oznaczać wybrany termin ikoną wyboru, a zamiast tego można kliknąć dowolny termin, aby wybrać ten termin.

To było wszystko dla edytora i części JavaScript! Teraz pozostaje tylko renderowanie frontendu, które zrobimy w PHP.

Renderuj blok dynamiczny w PHP

Zanim zagłębimy się w funkcję render, najpierw zajmijmy się kilkoma rzeczami.

Najpierw musimy umieścić w kolejce skrypt cycle2 w interfejsie użytkownika, aby nasz kod suwaka faktycznie zamienił się w suwak. Robimy to za pomocą prostej funkcji podłączonej do wp_enqueue_scripts. Dostosuj poniższe, jeśli wybrałeś inny skrypt suwaka.

add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'cycle2-slider-js', get_template_directory_uri(). '/assets/js/jquery.cycle2.min.js', ['jquery'], '', true ); });

Po drugie chcemy wrócić do register_block_type()wywołania funkcji. Kiedy zajmujemy się blokami dynamicznymi, zdecydowanie powinniśmy dodać nowy argument; attributes. W tym argumencie definiujemy wszystkie atrybuty, które zdefiniowaliśmy registerBlockTypew JavaScript, w tym ich wartości domyślne. Jeśli tego nie zrobimy, nie wszystkie atrybuty będą dostępne w naszym wywołaniu zwrotnym renderowania. Jeśli atrybut pozostał niezmieniony w edytorze bloków, atrybut i jego wartość nie będą dostępne w tablicy atrybutów w PHP. Dlatego zalecam, aby zawsze zwracać uwagę na dodanie attributestablicy do register_block_type()funkcji PHP podczas pracy z blokami dynamicznymi. Dla naszego bloku wyglądałoby to tak:

Teraz wracamy do naszej funkcji renderowania wywołań zwrotnych awp_gutenberg_slider_render(). Wynik zależy wyłącznie od Ciebie, zwłaszcza jeśli zdecydujesz się użyć innego skryptu suwaka. Poniżej znajduje się prosty przykład.

Główną ideą jest sprawdzenie, czy dany termin został wybrany ($attributes['termId']). Jeśli jest wypełniony tworzymy a [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)()z argumentami dotyczącymi liczby postów ($attributes['numSlides']) oraz wybranego identyfikatora kategorii. Następnie należy wygenerować odpowiedni kod HTML do pracy cycle2, zapętlić posty i wyświetlić ich obrazki jako slajdy.

Zwróć uwagę, jak dodać odpowiednią klasę wyrównania bloku w linii #12. Wynikiem powinien być suwak prezentowanych obrazów. Pamiętaj, że jest to podstawowy przykład, który ma pewne wady. Na przykład pobieramy ostatnie trzy posty z wybranej kategorii. Ale zakładając, że jeden z nich nie ma polecanego obrazu, suwak wyświetli tylko dwa posty.

Ważną rzeczą do zapamiętania jest zwracanie ciągu i nie powtarzanie go. Zalecam również używanie w swoim motywie pewnego rodzaju funkcji szablonów do renderowania dynamicznych bloków, takich jak te. Może szybko stać się nieuporządkowanym naprawianiem i budowaniem kodu HTML jako ciągu.

Ostatnie słowa

Ten samouczek pokazał, jak utworzyć niestandardowy dynamiczny blok WordPress Gutenberg, w którym renderujesz zawartość frontendu w PHP. Zobaczyłeś też, jak używać komponentu wyższego rzędu withSelectdo tworzenia zapytań o wszystkie terminy kategorii i metody wyświetlania listy, którą można wybrać.

Cały powyższy kod jest napisany tak prosto, jak to tylko możliwe. Dodałem tylko absolutne minimum ustawień. Suwak działa, ale zwykle chcesz więcej – na przykład tworzenie linków do slajdów, wyświetlanie tytułów z postów, strzałek suwaka lub opcji dostosowania prędkości lub innych ustawień suwaka. Chodzi o to, aby pokazać Ci podstawy i ułatwić Ci rozbudowę, rozbudowę i zmianę w celu dopasowania do potrzeb Twojego projektu.

Źródło nagrywania: awhitepixel.com

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów