Bricks 2.2 beta: design system szintlépés

A Bricks 2.2 beta nem egy „pár új feature” jellegű kiadás, hanem egy elég komoly design-system frissítés. A fókusz egyértelmű: amit eddig szétszórva kezeltünk (színek, tipó, spacing, utility classok, változók), azt most a builderen belül egy központi helyen lehet menedzselni – úgy, hogy közben a kimenet továbbra is CSS variables + globális classok logikára épül.

Style Manager: végre egy helyen a design tokenek

A 2.2 egyik kulcsa a Style Manager: egy új popup felület, ami gyakorlatilag a Bricks „design system központja”. Itt tudod egyben kezelni a projekt stílus-alapjait: theme styles, globális classok, CSS variables, paletták, tipográfia- és spacing skálák, sőt framework generálás és a Style Manager saját beállításai is ide kerültek.

Color Manager: paletták, dark mode, árnyalatok – CSS változókkal

Aki dolgozott már több aloldalas, több fejlesztős Bricks projekten, az tudja: a színek kezelése hamar káosszá tud válni. A Color Manager erre hoz egy elég régóta várt, „design token” szemléletű megoldást. A lényeg: a színek CSS custom property-ként élnek, és a Bricks segít palettaszinten menedzselni őket (import/export, shade-ek, dark mód variánsok).

• Paletták kezelése: létrehozás/szerkesztés/átnevezés/törlés, plusz import/export JSON formátumban (adatbázisba mentve).
• Színenkénti menedzsment: light/dark variánsok, változónév (custom property) és integrált picker.
• Shade generálás: világos/sötét/átlátszó árnyalatok, plusz harmonizálás (pl. complementary, monochromatic).
• Utility class generálás: background/text/border/fill/stroke/outline jellegű classok, amik automatikusan globális classként megjelennek.
• Legacy színek migrálása: régi (2.2 előtti) színformátumok átalakítása modernebb, HSL-alapú változókra.
• CSS preview + export: palettaszinten vagy egyes színeknél is megnézheted és exportálhatod a generált CSS-t.

Megújult Color Control: gyorsabb, okosabb, változó-centrikus

A builderen belüli színválasztó (Color Control) is kapott egy komoly ráncfelvarrást. A cél itt az, hogy ne csak „kiválasztok egy hexet” legyen, hanem szabványos CSS értékekkel és változókkal is kényelmesen tudj dolgozni.

• Szabad szöveges input: hex/RGB/HSL/raw CSS, vagy akár var(--token) közvetlenül.
• Változó keresés: ha beírod, hogy var vagy --, rá tudsz keresni a változókra a managerből.
• Paletta popup: grid/list nézet, root színek és shade-ek böngészése.
• Átlátszóság preview: háttérmintával és tooltip részletekkel.
• Picker több formátummal: HSL/RGB/hex nézetekkel.
• Preferenciák mentése: aktív paletta és nézet localStorage-ben.

Új elem: Toggle – Mode (light/dark) a frontenden

Ha a projektedben tényleg komolyan veszed a dark mode-ot, akkor ez a kis elem nagyot tud dobni a UX-en: a Toggle – Mode egy gomb, amivel a látogató oldalújratöltés nélkül tud light/dark mód között váltani.

• Saját light/dark ikonok (ha nem adsz meg, van alap sun/moon SVG).
• Külön stílusolható ikon méret és szín mindkét módban (CSS property-ken keresztül: color, fill, font-size).
• Akadálymentesítés: állítható aria-label.
• A projekt default módjához igazodik (light/dark/auto), és az aktív állapotot ennek megfelelően kezeli.

Typography & Spacing Scales: fluid skálák, utility classok, export

A 2.2-ben végre van egy rendes skála generátor és editor tipográfiához és spacinghez. Ez azért fontos, mert a konzisztens UI nem attól lesz konzisztens, hogy „érzésre” 14/16/18 px-eket dobálunk, hanem attól, hogy van egy skálád, és ahhoz tartod magad.

• Skála típusok: t-shirt (2xs…2xl), numerikus (1…n), vagy teljesen custom lépések.
• Skála arányok: minor secondtől akár octave-ig (klasszikus typographic scale logika).
• Reszponzív (fluid) változók: minimum (mobil) és maximum (desktop) értékekből a Bricks fluid custom property-ket generál, amik a beállított breakpointek között skálázódnak.
• Utility class mapping: megmondod, milyen class név és milyen property készüljön (pl. font-size, margin, stb.), és a Bricks globális classként legenerálja.
• CSS export: a generált változókat és classokat fájlba is ki tudod exportálni.
• Reset/rename: skálák visszaállítása és átnevezése.

CSS Framework Importer: hozd be a saját utility rendszered

Sok csapatnál van egy már bejáratott CSS framework vagy utility készlet (legyen az saját, vagy valami publikus). A CSS Framework Importer azt csinálja, hogy bemásolod a framework CSS fájl tartalmát, és a Bricks kiszedi belőle a classokat és a CSS változókat, majd betölti a Class & Variable Managerbe.

• Automatikus class-felismerés és csoportosítás (layout, colors, typography stb.).
• CSS variables kinyerése a frameworkből.
• Prefixek a névütközések elkerülésére.
• Kategória-választás és import opciók (custom CSS, variable value-k kezelése).

Komponensek: Slotok, variánsok, nested property binding

A Bricks komponens rendszere eddig is erős volt, de a 2.2-ben több olyan építőkocka jön, amitől tényleg „framework-szerűbb” lesz a gondolkodás.

Component Slots: tartalom-injektálás a komponensbe

A Slot element lényegében egy placeholder a komponensben. Amikor példányosítod a komponenst, a slotokba tudsz elemeket behúzni, és azok ott renderelődnek. Tipikus példa: egy Card komponens, ahol a struktúra fix (keret, padding, shadow), de a „badge” vagy a „CTA” rész projektfüggő.

Component Style Variants: egy struktúra, több kinézet

A Style Variants arra jó, hogy ne duplikáld a komponenst csak azért, mert kell belőle „primary / secondary / ghost” verzió. Van egy base variáns, és mellé felveszel továbbiakat. A példány szintjén pedig kiválasztod, melyik variánst használja.

• Variánsok létrehozása/átnevezése/törlése komponens szinten.
• Szerkesztés közben variáns-váltó a célzott stílusoláshoz.
• Példányoknál dropdownból választható variáns.
• Gutenberg integráció: ha a komponenst blockként használod, a variáns ott is select mezőként megjelenik.
• A base variáns címkéje testreszabható.

Nested components: property bindings

A nested property binding akkor jön jól, amikor egy komponensen belül van egy másik komponens, és azt szeretnéd, hogy a belső komponens bizonyos property-jei a parent property-jeiből öröklődjenek. Magyarul: nem kézzel huzalozod minden példánynál újra, hanem a hierarchia „átadja” az értékeket.

Bricks komponensek Gutenberg blockként: ikon, kategória, preview

Ha a csapatod vegyesen használja a Bricks buildert és a klasszikus WordPress block editort, akkor a Components as blocks vonal kifejezetten hasznos. A 2.2-ben a komponens Gutenberg megjelenését jobban tudod csinosítani: beállíthatsz block kategóriát, ikont, és preview képet a block inserterben.

Search Criteria: végre kontroll a keresés felett

A WordPress alap keresése sokszor túl „fekete doboz”. A Bricks 2.2 Search Criteria funkciója azt adja meg, hogy pontosan mely mezőkben keressen (post title/content/excerpt, term mezők, user mezők, vagy akár custom meta mezők). Extra csavar: súlyozást is adhatsz, így például a title találat erősebben számítson, mint a content.

Beállítás helye: natív WP keresésnél a Search Result template-ben, query filteres keresésnél pedig a Filter – Search elemben.

Doksi: http://academy.bricksbuilder.io/article/search-criteria/

Új Query Type: Array – loopolj saját adatszerkezetből

Az Array query type az egyik legfejlesztőbarátabb újdonság: nem muszáj mindent WP_Query-vel a DB-ből kinyerni. Ha van egy custom PHP array-ed vagy JSON adatod, azt közvetlenül be tudod kötni query loopba. Támogat paginationt, feltételes szűrést, és dinamikus data providerrel is összerakható.

Doksi: https://academy.bricksbuilder.io/article/query-loop/#array

Builder: Instant navigation (kísérleti)

A builderben a lapok közötti ugrálás eddig teljes reload volt. A 2.2-ben van egy opt-in, experimental Instant navigation, ami AJAX-szal próbál gyorsítani: úgy váltasz oldalt, hogy a builder UI és az állapot nagy része megmarad. Ez workflow-ban sokat számíthat, de kísérleti jelleg miatt érdemes óvatosan bekapcsolni.

Template-ek: Community templates kivezetve, wireframes/design sets stabil

A „Community templates” opciót kivezették, a kommunikáció alapján később egy rendes Template Marketplace irány látszik (külsős, akár fizetős template-ekkel). Közben több design set frissült (Liv, Sizzle, Reality, Digital), és ami fontosabb: a Wireframes és Design sets kikerült az experimental státuszból, tehát stabilnak számítanak.

Apróbb, de hasznos finomhangolások

• Spacing control: meg tudja jegyezni a linked állapotot (Bricks → Settings → Builder).
• Nav menu & nestable: állítható custom Mobile Menu Breakpoint.
• Contextual spacing: „Remove default padding” beállítás.
• WooCommerce: új template a „My Account – Payment Methods” részhez.
• Pagination: új filter hookok, hogy a Pagination elem különböző query object típusokkal is jobban testreszabható legyen (bricks/pagination/...).
• Új dynamic data tag-ek: format_date és query_array.

<?php
/**
 * Példa: Pagination testreszabása Bricks filter hookkal.
 * A konkrét logika projektenként változik, a lényeg, hogy 2.2-ben több új hook érhető el.
 */
add_filter('bricks/pagination/total_pages', function($totalPages, $query) {
  // Itt tudod felülírni a total oldalszámot egyedi query objektumoknál.
  return $totalPages;
}, 10, 2);

Összefoglaló: kinek éri meg most ránézni a 2.2-re?

Ha a Bricks-et nem „egy landingpage builderként” használod, hanem komolyabb site-oknál (design system, komponensek, utility classok, több sablon, Woo), akkor a 2.2 beta már most érdekes. A Style Manager + Color Manager + skálák együtt egy olyan irány, ami közelebb visz a fenntartható, token-alapú frontendhez – úgy, hogy közben a Bricks workflow megmarad vizuálisnak.