WP Manifestindependent plugin directory
manifest / editor / gutenberg-swiper

Gutenberg Swiper

Slider oparty o gutenberg i Swiper.js

by Kacper Ramenda · github.com/kacperramenda/gutenberg-swiper

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/kacperramenda/gutenberg-swiper/archive/refs/heads/main.zip
Readme github.com/kacperramenda/gutenberg-swiper ↗

Technologie

Wtyczka została wykonana w następującym stacku:

  • Vite
  • @wordpress/create-block
  • SCSS
  • Swiper.js

W nawiązaniu do naszej dzisiejszej rozmowy, w której mówiłem że nie miałem nigdy okazji implementować Vite postanowiłem użyć go do buildowania. Do stylowania użyłem SCSS wg konwencji nazewniczej BEM. Zdecydowałem się na bibliotekę Swiper.js ponieważ jest aktualnie najpopularniejszym rozwiązaniem tego typu, a zarazem oferuje nowoczesne technologie (brak JQuery) oraz modułową architekturę która pozwala na importowanie tylko tych elementów z których korzystamy co sprawia że wtyczka nie jest "ciężka". Kolejnym atutem dla swiper.js jest doskonała obsługa urządzeń mobilnych (np. gesty).

Struktura slidera

Slajdy składają się wg założeń z następujących elementów:

  • Zdjęcie (z media library)
  • Nagłówek
  • Opis
  • Przycisk CTA z odnośnikiem

Edycja slajdów w edytorze

  • Dodawanie / usuwanie / sortowanie slajdów bezpośrednio w edytorze jest zrealizowane wg założeń.
  • InnerBlocks (blok parent + child).

Rendering

Blok jest renderowany statycznie (save), ponieważ treść slidera jest definiowana przez użytkownika w edytorze i nie wymaga przetwarzania po stronie serwera (PHP) przy ładowaniu strony. W połączeniu z biblioteką Swiper.js oferuje to bardzo dobrą wydajność.

Frontend

  • Dostępne są 2 rodzaje przejść, które użytkownik może wybrać w "InspectorControls" (Slide lub fade).
  • Swiper zawiera domyślne strzałki oraz paginację Swiper.js (tylko zmienione kolory).
  • Jest w pełni responsywny.

InspectorControls

  • Wybór automatycznego odtwarzania
  • Czas wyświetlania slajdu (czas do przełączenia na kolejny slajd)
  • Szybkość animacji
  • Loop
  • Wybór efektu przejścia

Wydajność

Skrypty są ładowane tylko i wyłącznie w miejscach, gdzie blok jest renderowany, dzięki wykorzystaniu viewScript: "file:../../build/view.js" w block.json rodzica (kontenera).

Inne informacje

  • Konfiguracja swipera jest przekazywana przez atrybut data-swiper-config w formacie JSON, a następnie są parsowane.
  • Plugin bez problemu obsługuje wiele swiperów na tej samej stronie
  • Swiper Slider akceptuje tylko jeden blok "Slajd" dzięki relacji child-parent

Instrukcja dodania slidera na stronę

  1. Dodaj blok Swiper slider.

    image

  2. Wybierz odpowiednią dla Ciebie konfigurację swipera w panelu po prawej stronie. img.png

  3. Dodaj slajd do swipera (blok "slajd" dostępny tylko dla bloku rodzica Swiper Slider) img_1.png

  4. Uzupełnij treść slajdu i dodaj kolejne img_2.png

  5. Zapisz. Ostylowany swiper teraz będzie się znajdował na twojej stronie. img_3.png

  6. W celu zmiany kolejności slajdów, wystarczy zamienić ich kolejność w edytorze.

DEPRECTADED Instrukcja dodania slidera na stronę

  1. Dodaj blok Swiper slider.

    image

  2. Dodaj dowolną ilość slajdów, uzupełnij ich treść oraz wybierz odpowiednią dla Ciebie konfigurację swipera w panelu po prawej stronie.

    image

  3. Aby ustawić link do przycisku CTA, wejdź w edycję slajdu klikając na niego, następnie w menu po prawo w polu "Link odnośnika" podaj adres URL.

    image

  4. Zapisz stronę.

  5. Gotowe - w pełni funkcjonalny slider znajduje się na stronie.

    image