Wtyczka JetStyle Manager

JetStyleManager to darmowa wtyczka Crocoblock, która dokłada opcje wyglądu – typografię, kolory, odstępy, obramowania i responsywność – do bloków Gutenberga generowanych przez JetEngine, JetSmartFilters i JetFormBuilder. Po aktywacji wspierane bloki dostają przycisk „Block Style” z panelem stylów.

Stylowanie bloków przez panel Block Style: typografia, kolory, odstępy

JetStyleManager dodaje do wspieranych bloków Gutenberga przycisk „Block Style”, a ten otwiera panel wyglądu: typografię, kolory tła, tekstu i ikon, marginesy, paddingi z opcją „Unlink Sides”, obramowania w pięciu typach oraz Border Radius. Style ustawia się responsywnie, osobno dla desktopu, tabletu i mobile. Bez pisania CSS.

Układ panelu przypomina zakładkę Style z Elementora. Kto pracował w tamtym edytorze, odnajdzie się od razu. Producent deklaruje ponad 10 typów kontrolek stylów – od wyrównania i tła, przez obramowania, po kolor i pozycję ikon.

Typografia i integracja Google Fonts

Kontrolka typografii obejmuje pełen zestaw ustawień tekstu: rozmiar czcionki w zakresie 1–200 (jednostki PX, EM, REM, VW), grubość (Weight 100–1000), wysokość linii, odstępy między literami (Letter Spacing od -2 do 20) oraz Transform, Style i Decoration. Wersja 1.2.0 dorzuciła do kontrolki integrację z Google Fonts, a późniejsze wydania optymalizowały cache czcionek (1.3.7).

Rodzinę czcionki dobiera się więc prosto z biblioteki Google Fonts, w tym samym panelu, bez osobnej wtyczki do zarządzania typografią.

Kolory, obramowania, marginesy i paddingi

Zestaw Style Controls ustawia kolor tła, tekstu i ikon – z palety 12 domyślnych barw albo własnym kodem w formatach HEX, RGB i HSL. Część kontrolek ma dodatkowo zakładkę „Hover” dla koloru przy najechaniu. Obramowania mają pięć typów (Solid, Double, Dashed, Dotted, Groove) wraz z osobnym Border Radius.

• Margin i Padding – odstępy zewnętrzne i wewnętrzne z opcją „Unlink Sides”, która pozwala nadać różną wartość każdemu z czterech boków.
• Background Color i Text Color – kolory tła i tekstu z palety lub własnego kodu HEX/RGB/HSL.
• Icon Color, Size, Position – osobne kontrolki dla ikon występujących w blokach JetPlugins.
• Alignment – wyrównanie elementu w obrębie bloku.

Kontrolki responsywne desktop, tablet i mobile

Tryb responsywny ustawia odrębne wartości stylów dla trzech zakresów urządzeń – desktopu, tabletu i mobile – co przekłada się na osobne reguły media queries. To samo pole, choćby rozmiar czcionki czy padding, może mieć inną wartość na ekranie komputera, a inną na telefonie.

Responsywność włącza przełącznik urządzeń w panelu. Żadnego ręcznego pisania zapytań medialnych.

Które bloki i wtyczki JetPlugins styluje JetStyleManager

JetStyleManager styluje bloki generowane przez wtyczki JetPlugins: bloki dynamiczne i Listing Grid z JetEngine, wszystkie bloki filtrów z JetSmartFilters oraz pola i cały formularz z JetFormBuilder. Wtyczka działa wyłącznie z blokami tych wtyczek (oraz z blokami zintegrowanymi przez API) – nie rusza natywnych bloków rdzenia WordPress ani bloków innych producentów.

Wniosek prosty: bez przynajmniej jednej wtyczki Crocoblock generującej bloki Gutenberga nie ma czego stylować. JetStyleManager dokłada panel wyglądu do istniejących bloków JetPlugins, sam żadnych bloków nie tworzy.

Bloki dynamiczne i Listing Grid w JetEngine

W JetEngine JetStyleManager obsługuje bloki dynamiczne – Dynamic Field, Dynamic Link, Dynamic Image, Dynamic Repeater i Dynamic Meta – oraz blok Listing Grid i blok formularza. Dla siatki Listing Grid dostępne są między innymi Horizontal Gap i Vertical Gap, które regulują odstępy między elementami listy wpisów.

Typografia i kolory pól dynamicznych oraz układ siatki dopasowują się więc do stron z dynamiczną treścią – katalogów ofert, portfolio czy list nieruchomości.

Bloki filtrów w JetSmartFilters

Dla JetSmartFilters JetStyleManager styluje wszystkie bloki filtrów i udostępnia kontrolki specyficzne dla tego typu elementów. Należą do nich Direction (Horizontal lub Vertical), Filter Position, Space Between, Children Offset Left, a dla bloku Range Filter osobno Points Width, Points Height i Stroke.

Domyślnie filtry – checkboxy, listy czy suwak ceny – wyglądają surowo. Tu dopasowują się do layoutu sklepu WooCommerce lub katalogu ofert.

Pola i formularze w JetFormBuilder

W JetFormBuilder JetStyleManager styluje pojedyncze pola oraz cały formularz, a Block Style jest tu praktycznym warunkiem wizualnego dopasowania pól bez kodu. Część ustawień działa per pole, część dla całego formularza – Form Break Field stylowany jest na przykład tylko w ustawieniach całego formularza.

To najczęstszy scenariusz użycia wtyczki: typografia, kolory, obramowania, odstępy i wyrównanie pól oraz przycisku formularza zbudowanego na Gutenbergu.

Editor Load Level i skiny po stronie Elementora

JetStyleManager udostępnia po stronie Elementora funkcję Editor Load Level – pięć poziomów od None do Full, które redukują liczbę ładowanych opcji stylowania widgetów JetElements, JetBlocks, JetBlog, JetTabs i JetTricks. Według producenta ustawienie minimum potrafi przyspieszyć edytor o 20–30%. Skiny zapisują wygląd jednego widgetu i przenoszą go na inne.

Ta część funkcji jest poboczna wobec głównego zadania wtyczki, czyli stylowania bloków Gutenberga. Odnosi się wyłącznie do pracy w edytorze Elementora z wymienionymi wtyczkami Crocoblock.

Pięć poziomów Editor Load Level

Editor Load Level steruje tym, ile opcji w sekcji Style ładuje się w edytorze Elementora. Niższy poziom to mniej ustawień do wczytania, a więc lżejszy i szybszy edytor – kosztem kontrolek wyglądu dostępnych na bieżąco.

1. None – brak ładowanych opcji stylowania.
2. Pozostałe poziomy pośrednie stopniowo zwiększają zakres dostępnych ustawień.
3. Full – pełen zestaw opcji stylowania widgetów.

Zapisywanie i stosowanie skinów

Skiny rozwiązują problem, który rodzi niski Editor Load Level: zakładka Style znika, a wygląd nadal trzeba zachować. Save as Skin zapisuje ustawienia Style danego widgetu, Apply Skin przenosi je na inny widget, a Reset Skin przywraca domyślny wygląd.

Schemat pracy wygląda więc tak: zaprojektować wygląd przy pełnym zestawie opcji, zapisać go jako skin, a potem zredukować Editor Load Level dla wydajności bez utraty designu.

Ograniczanie widoczności ustawień wg ról użytkowników

JetStyleManager zarządza tym, które role użytkowników widzą ustawienia stylów. Narzędzie przydaje się przy przekazywaniu strony klientowi – chroni zaprojektowany wygląd przed przypadkową zmianą przez osobę bez uprawnień do edycji stylów.

Dla kogo JetStyleManager ma sens

JetStyleManager sprawdza się u użytkowników ekosystemu JetPlugins budujących strony na Gutenbergu, którzy chcą dopasować wygląd bloków JetEngine, JetSmartFilters lub JetFormBuilder bez pisania CSS. Najwięcej daje przy stylowaniu pól formularzy JetFormBuilder oraz w lżejszych i starszych setupach JetEngine – w nowszych projektach jego rolę przejmuje wbudowany Style Manager w JetEngine.

Twórcy formularzy JetFormBuilder i osoby nieznające CSS

Dla twórców formularzy w JetFormBuilder to panel Block Style w JetStyleManager ustawia bez kodu kolory, typografię, obramowania i odstępy poszczególnych pól oraz przycisku. Osoby, które nie chcą albo nie umieją pisać CSS, dopasowują wygląd elementów dynamicznych i filtrów wizualnie, w panelu edytora.

Dla kogo JetStyleManager sprawdza się najlepiej:

• użytkownicy JetPlugins budujący strony na Gutenbergu bez Elementora,
• twórcy formularzy JetFormBuilder, którzy chcą dopasować wygląd pól bez kodu,
• osoby nielubiące lub nieznające CSS, stylujące bloki wizualnie,
• agencje przekazujące stronę klientowi, korzystające z ograniczania ustawień wg ról,
• użytkownicy Elementora z wtyczkami Crocoblock, którym zależy na lżejszym edytorze.

Agencje przekazujące stronę klientowi

Agencje łączą kilka funkcji: Editor Load Level odchudza edytor, skiny zachowują zaprojektowany wygląd mimo ukrytych ustawień, a zarządzanie widocznością wg ról ogranicza dostęp klienta do opcji stylów. Razem zmniejsza to ryzyko, że przekazana strona „rozjedzie się” po stronie odbiorcy.

Dla kogo JetStyleManager nie jest potrzebny

JetStyleManager nie ma zastosowania bez wtyczek Crocoblock, bo nie styluje natywnych bloków rdzenia WordPress ani bloków innych producentów – bez JetEngine, JetSmartFilters czy JetFormBuilder nie ma czego stylować. Nie służy też do globalnego, jednolitego stylowania.

Dla kogo JetStyleManager nie jest najlepszym wyborem:

• użytkownicy nowszego JetEngine (3.8.0+) z wbudowanym Style Managerem dla Blocks Views,
• osoby niekorzystające z wtyczek Crocoblock – brak kompatybilnych bloków do stylowania,
• szukający globalnego stylowania, np. jednego stylu dla wszystkich formularzy naraz,
• szukający aktywnie rozwijanego narzędzia – rozwój wtyczki jest w praktyce wstrzymany od sierpnia 2024.

JetStyleManager a wbudowany Style Manager w JetEngine

Wbudowany Style Manager w JetEngine, wprowadzony w wersji 3.8.0 (grudzień 2025), przejmuje rolę pełnioną wcześniej przez JetStyleManager dla widoków blokowych. Daje natywne kontrolki stylowania prosto w edytorze blokowym – z responsywnością desktop, tablet i mobile oraz integracją z WordPress Fonts Manager.

W nowych projektach opartych na aktualnym JetEngine osobna wtyczka JetStyleManager przestaje więc być konieczna. Jej naturalnym obszarem zostają starsze setupy oraz stylowanie formularzy JetFormBuilder.

Wymagania i kompatybilność z WordPress, PHP i Elementorem

JetStyleManager wymaga WordPress 5.6 lub nowszego oraz PHP 7.2 lub nowszego, a kanoniczne dane WordPress.org potwierdzają zgodność do wersji 6.6.x. Wtyczka działa głównie w edytorze blokowym Gutenberg i nie wymaga Elementora, choć po jego stronie obsługuje Editor Load Level i skiny. Przy lekkich motywach możliwe są konflikty specyficzności CSS nadpisujące ustawione style.

Minimalne wersje WordPress i PHP

Wymagania techniczne są niskie, co pasuje do charakteru wtyczki jako lekkiego rozszerzenia edytora. Poniższa tabela zestawia parametry potwierdzone w kanonicznym źródle WordPress.org wraz z zakresem wspieranego ekosystemu JetPlugins.

Współpraca z Gutenbergiem i Elementorem

Głównym środowiskiem pracy wtyczki jest edytor blokowy Gutenberg – to tam pojawia się przycisk „Block Style” i panel ustawień wyglądu. Elementor nie jest wymagany do działania podstawowej funkcji.

Po stronie Elementora wtyczka pozostaje „świadoma” edytora i obsługuje Editor Load Level oraz skiny dla widgetów JetElements, JetBlocks, JetBlog, JetTabs i JetTricks. Deweloperzy dostają API, które integruje panel stylów z własnymi wtyczkami blokowymi, z obsługą media queries i generowaniem stylów do osobnego pliku.

Konflikty z motywami i obsługa RTL

Uwaga o kompatybilności: przy lekkich motywach, takich jak GeneratePress, zgłaszano konflikt specyficzności CSS – reguły motywu potrafią nadpisać style ustawione w JetStyleManager. Rozwiązaniem bywa zwiększenie specyficzności CSS po stronie wtyczki.

W recenzjach przewijała się też uwaga o niepełnej obsłudze RTL. Wsparcie multisite oraz oficjalne polskie tłumaczenie interfejsu nie są udokumentowane przez producenta, dlatego nie trafiły do tabeli parametrów.