JetStyleManager

Ingyenes, nyílt forráskódú bővítmény, amely vizuális stíluskezelőt ad a Gutenberghez a JetPlugins blokkokhoz, reszponzív vezérlésekkel és fejlesztői API-val.

This content is not available in your language yet.

Mi ez és milyen problémát old meg?

A JetStyleManager egy ingyenes kiegészítő, ami a Gutenberg szerkesztőt bővíti ki egy külön Block Style panellel. Ezzel kód írása nélkül, vizuálisan állíthatod a JetPlugins-hez tartozó blokkok (pl. JetEngine, JetSmartFilters, JetFormBuilder) stílusát. Megoldja a Gutenberg alapstílusok szűkösségét: részletes tipográfia, színek, elrendezés, távolságok, szegélyek és ikon-beállítások kerülnek a blokk oldalsávjába.

Hogyan működik a szerkesztőben?

Telepítés és aktiválás után a támogatott blokkoknál megjelenik a Block Style gomb.
Rákattintva egy panel nyílik, ahol a stílusokat valós időben állíthatod.
A beállítások eszköznézetenként (asztali/tablet/mobil) külön értéket kaphatnak, így reszponzív szabályokat hozol létre CSS nélkül.
A bővítmény a választásaidból generált stílusokat a frontendre optimalizáltan tölti be.

Fő funkciók, érthetően

Elrendezés és igazítás: blokk- és tartalomszintű igazítások, sor- és oszlopközök, elemek közötti gap/space kezelés.
Távolságok: precíz margin és padding kontrollok, eszközönként eltérő értékekkel.
Színek és háttér: háttérszín, szövegszín, átlátszóság és állapotfüggő megjelenés (pl. hover).
Szegély és lekerekítés: szélesség, szín, stílus, valamint border-radius a modern kártya-szerű felületekhez.
Ikon beállítások: méret, szín, elhelyezés; ideális gomboknál és listáknál.
Tipográfia: betűcsalád, méret, súly, betűköz, sorköz; beépített Google Fonts támogatással, így nem kell külön betűtípus-kezelést beépítened.
Reszponzív vezérlés: egy-egy stílus minden eszközre finoman hangolható, külön médiakérdések írása nélkül.
Teljesítmény-optimalizálás: a generált stílusok a rendszer által szervezetten kerülnek betöltésre, így csökken a szerkesztő és a frontend terhelése.
Editor Load Level és „skins” koncepció: a Crocoblock ökoszisztémában csökkenthető a látható stílusopciók száma a gyorsabb szerkesztésért; a mentett „skin” stílusokkal következetes megjelenést tarthatsz. Gutenberg alatt a Block Style panel a fő funkció.

Gyakorlati példák

JetEngine Listing Grid kártyák: állíts egységes kártya-hátteret, kártyán belüli cím- és kivonat-tipográfiát, képarányt és a kártyák közti gap-et. Mobilon csökkentsd a paddinget és a címméretet.
JetSmartFilters gombok: add meg az aktív/hover állapot színeit, szegélyét és lekerekítését. Tablet nézetben növeld a gombok közötti távolságot, hogy könnyebb legyen érinteni.
JetFormBuilder űrlapok: hangold finomra a mezők szegélyét, fókusz-színeit, címkék tipográfiáját és a küldés gomb stílusát. Külön mobilnézetben nagyobb gomb és nagyobb sorköz a jobb hozzáférhetőségért.

Fejlesztőknek röviden

A JetStyleManager API-t kínál, amellyel saját Gutenberg-blokkjaidhoz egységes stílus-UI-t adhatsz:

Vezérlők és szekciók: több mint tíz kontrolltípus (szín, méret, tipográfia, kapcsoló stb.), csoportosítva szekciókba.
Médiakérdések: reszponzív értékek kezelése a vezérlőkben.
Kimenet: a választásokból generált stílusok különálló fájlba szervezhetők a jobb teljesítményért.
Integrációs minta:

// Pszeudokód: JetStyleManager kontroll hozzáadása saját blokkhoz
add_action( 'jet-sm/register-style-controls', function( $manager ) {
  $manager->add_section( 'card', [ 'label' => 'Kártya' ] );
  $manager->add_control( 'card_bg', [
    'type'         => 'color',
    'label'        => 'Háttérszín',
    'css_selector' => '{{WRAPPER}} .card',
    'css_property' => 'background-color',
    'responsive'   => true,
  ] );
} );

Ezzel kész UI-t és CSS-generálást kapsz, saját build-rendszer nélkül.

Előnyök és értékajánlat

Kódmentes stílusolás: kevesebb egyedi CSS, gyorsabb munka.
Egységes dizájn: a csapat ugyanazokat a vizuális szabályokat alkalmazza, eltérés nélkül.
Reszponzív kontroll: mobilra, tabletre, asztalira külön finomhangolás.
Idő- és költségmegtakarítás: fejlesztői órák helyett vizuális állításokkal készülsz el.
Jobb teljesítmény: a stílusok optimalizált betöltése könnyebb szerkesztőt és gyorsabb oldalt ad.

Kinek ajánlott?

Weboldal-építőknek és tartalomszerkesztőknek, akik JetEngine, JetSmartFilters vagy JetFormBuilder blokkokat használnak a Gutenbergben, és gyorsan akarnak szép, reszponzív felületeket.
Ügynökségeknek és csapatoknak, ahol több szerkesztő dolgozik és kulcs az egységes megjelenés, minimális CSS-szel.
Bővítményfejlesztőknek, akik saját Gutenberg-blokkjaikhoz szeretnének kész stílus-UI-t és CSS-generálást adni, egységes API-val.

Korlátok és megjegyzések

A Block Style panel elsősorban a JetPlugins Gutenberg-blokkjaival működik; nem ad teljes körű stílusolást az összes alap WordPress blokkhoz.
Az Editor Load Level és a skins funkcionalitás a Crocoblock ökoszisztémában, bizonyos szerkesztőkben érhető el teljes értékűen; Gutenbergben a fő fókusz a Block Style panel.

Összefoglalva: a JetStyleManagerrel vizuálisan, gyorsan és következetesen stílusolhatod a JetPlugins Gutenberg-blokkjait. Ha kódmentes, reszponzív beállításokat és fejlesztőbarát stílus-API-t keresel, ez a bővítmény pontosan erre való.