Poznaj wtyczki do Gutenberga – Spectra (cz. I)

Poznaj wtyczki do Gutenberga – Spectra (cz. I)

Zapraszamy do cyklu artykułów o wtyczkach, które poszerzają możliwości edytora Gutenberg. Ponieważ dla wielu użytkowników zakres podstawowych bloków może być nie wystarczający, firmy zewnętrzne co chwilę poszerzają ofertę o dodatkowe pluginy, mające rozwinąć możliwości Gutenberga. W cyklu artykułów zaprezentujemy wyłącznie bezpłatne wtyczki, z których każdy może skorzystać.

Spectra (Gutenberg Blocks – Ultimate Addons for Gutenberg)

Jako pierwszy plugin przedstawiamy Spectra (dawniej występujący pod nazwą Gutenberg Blocks – Ultimate Addons for Gutenberg). Jest to jedna z najpopularniejszych wtyczek, mająca ponad 400 000 aktywnych instalacji (dane na październik 2022 r.).

Dodajemy ją przez wyszukiwanie w repozytorium i instalację (jak zainstalować wtyczkę), po uruchomieniu od razu dodaje nam wiele różnorodnych bloków do tworzenia stron i wpisów. Przyjrzyjmy się najpierw ustawieniom pluginu i zobaczmy, co możemy w nich zmienić. Ważne, aby mieć świadomość, że całość występuje w języku angielskim (zarówno ustawienia, jaki i nazewnictwo bloków).

Ustawienia wtyczki Spectra

Po przejściu do ustawień wtyczki możemy zdecydować, co i jak ma się wyświetlać, w jakim zakresie będziemy korzystać z bloków i wiele innych. Warto zapoznać się z tymi ustawieniami przed rozpoczęciem korzystania z pluginu.

Na początku powita nas krótki filmik, w którym ukazano, jak rozpocząć pracę z wtyczką i jakie są jej możliwości. Prezentujemy go poniżej:

Ponadto możemy szybko przejść do źródeł zewnętrznych: bazy wiedzy o wtyczce, supportu, społeczności użytkowników Spectry.

Kolejnym elementem są Blocks / Extensions (Bloki / Rozszerzenia) – pozwala nam on na wybranie, co z zasobów, jakie oferuje Spectra ma być aktywne na naszej stronie internetowej. Domyślnie zdecydowana większość jest włączona, ale to my decydujemy, co tak naprawdę będzie nam potrzebne. Dla szybszego przeglądania, możemy je posortować zgodnie z zastosowaniem – np. na kreatywne, do postów, SEO, social mediów czy formularzy.

Kiedy mamy już wybrane bloki, możemy przejść dalej. Ostatnią zakładką są Settings (Ustawienia). Ich pierwszym element, który wybieramy z menu po lewej stronie są Opcje edytora (Editor Options). Następnie możemy wybrać:

  • Domyślna szerokość treści (to ustawienie zostanie zastosowane do domyślnej szerokości treści Container Block).
  • Wypełnienie kontenera (to ustawienie spowoduje zastosowanie domyślnego dopełnienia w bloku kontenera).
  • Przerwa w elementach kontenera (to ustawienie zastosuje domyślne odstępy między wierszami i kolumnami w bloku kontenera).
  • Odstępy w edytorze bloków (to ustawienie spowoduje zastosowanie odstępów między wszystkimi blokami w edytorze bloków).
  • Zwiń panele (włączamy opcję „Zwiń panele”, jeśli chcemy zwinąć wszystkie inne panele w ustawieniach bloków z wyjątkiem tego, który jest kliknięty. W ten sposób mamy przed sobą tylko jeden panel ustawień, na którym możemy się skupić).
  • Kopiuj / Wklej style (uzyskujemy możliwość kopiowania i wklejania stylów Spectra i Core Gutenberg Blocks).
  • Automatyczne odzyskiwanie bloków (włączamy tę opcję, aby automatycznie odzyskać wszelkie błędne bloki, które mogą wystąpić na Twoich stronach internetowych. Dzięki temu zaoszczędzisz czas spędzony na klikaniu wszystkich przycisków „Spróbuj odzyskać blok”.

Kolejny element to Generowanie zasobów (Asset generation)

  • Generowanie plików (Spectra domyślnie ładuje CSS i JS na stronie domyślnie. Jeśli chcemy wygenerować oddzielne pliki CSS i JS dla bloków Spectra, włączamy tę opcję).
  • Regeneracja zasobów (jeśli występują problemy ze stylem, układem, kolorem lub innym elementem strony możemy dzięki tej opcji wygenerować zasoby CSS i Javascript).

Templates czyli szablony:

  • Włącz przycisk szablonów – zarządzamy tu widocznością przycisku, który pozwala szybko skorzystać z biblioteki gotowych szablonów podstron stworzony przez Spectra.

Kontrola wersji (Version Control):

  • Powrót do poprzedniej wersji (możemy przywrócić poprzednią wersję wtyczki. Zalecamy przed skorzystaniem z tego rozwiązania wykonać snapshot).
  • Włączenie wersji beta – lubisz testować nowości? To wersja dla Ciebie. Twórcy zastrzegają, aby uruchamiać ją jedynie na testowym WordPressie, a nie „żywym organizmie”).
  • Włącz starsze bloki (włączamy tę opcję, aby włączyć obsługę naszych starszych bloków w witrynie).

Wydajność (Performance)

  • Załaduj czcionki Google lokalnie (włączamy tę opcję, aby pobrać czcionki Google i zapisać je na swoim serwerze)
  • Wstępnie ładuj lokalne czcionki (ta opcja załaduje pliki czcionek natychmiast po wczytaniu strony. Wstępne ładowanie lokalnych czcionek może jeszcze bardziej przyspieszyć działanie witryny).
  • Zezwalaj tylko na wybrane czcionki (Spectra oferuje ponad 700 opcji czcionek Google. Możemy użyć tej opcji, aby wyświetlić tylko ograniczoną liczbę czcionek w ustawieniach bloku).

Ustawienia bloku (Block Settings)

W tym elemencie możemy zapisać ustawienia Recaptcha dla formularzy Spectra.

Coming soon

Możemy odpalić zaślepkę na stronie bez korzystania z dodatkowych wtyczek (po co warto ich używać). Co ciekawe – nie uzyskamy tutaj gotowej zaślepki, ale jaką ją możemy ustawić jedną, przygotowaną wcześniej przez nas podstronę.

Dodawanie bloków Spectra

Kiedy mamy już ustawione wszystkie opcje pluginu, możemy przejść do jego korzystania. Samo dodawanie bloków Spectra do wpisów jest bardzo proste. Wystarczy wybrać odpowiedni blok z listy – jak widać na poniższym obrazku, jest ich imponująca liczba.

Ponieważ oferta bloków i roszerzeń jest bardzo szeroka, w kolejnych wpisach przyjrzymy się im szczegółowo. Przetestujemy ich możliwości oraz zastanowimy się, które są najbardziej przydatne i w jakich projektach możemy je wykorzystać.

Subskrybuj
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments