Kontextusfüggő térköz

A kontextusfüggő térköz teljes irányítást ad a beágyazott tartalomban lévő elemek, például címsorok, bekezdések és listák közötti függőleges térköz (margó) felett. Automatikusan érvényes ezeken belül:

• a Rich Text elemben,
• a Post Content elemben (forrás: WordPress),
• a WooCommerce beágyazott tartalmában (a Pénztár kivételével).

A Bricks alapból megpróbál különféle felső margókat (margin-block-start) adni az olyan elemeknek, mint a címsorok és a bekezdések, a környezetüktől függően. Ha ezeket felül akartad írni, kézzel el kellett távolítanod a böngésző térközeit, vissza kellett vonnod a Bricks beépített stílusait, és saját margókat kellett megadnod. A kontextusfüggő térköz ezt leegyszerűsíti: alaphelyzetbe állíthatod ezeket a margókat, és vizuálisan megadhatod a saját szabályaidat a sablonstílusban a Kontextusfüggő térköz csoportban.

A használata

A funkciót a szerkesztőben a Stíluskezelő → Sablonstílusok → a sablonstílusod → Kontextusfüggő térköz részen éred el. Az értékek módosítása közben a Stíluskezelő előnézete frissül.

https://minta-bolt.hu/home/?bricks=run

A csoportban kétféle visszaállítás van:

• Alapértelmezett margók eltávolítása: kiválaszthatod azokat a HTML-címkéket, amelyekről el akarod távolítani az alapértelmezett margókat (címsor, bekezdés, listák stb.). Ez tiszta kiindulópontot ad az elrendezésedhez illő térközöknek, örökölt vagy alapértelmezett beavatkozás nélkül.
• Alapértelmezett padding eltávolítása: kiválaszthatod azokat a címkéket, amelyekről el akarod távolítani az alapértelmezett paddinget, például ul, ol, blockquote és button.

Beállítások áttekintése

Beállítás	Leírás
Alapértelmezett margók eltávolítása	Visszaállítja a margókat a kiválasztott vagy kézzel megadott HTML-címkéken.
Alapértelmezett padding eltávolítása	Visszaállítja a paddinget a kiválasztott vagy kézzel megadott HTML-címkéken.
Címsor	Felső margót ad az h1-től h6-ig terjedő elemeknek, ha előttük másik elem áll.
Bekezdés	Felső margót ad a p elemeknek, ha előttük másik elem áll.
Tartalék térköz	Minden olyan elemre érvényes, amely nem címsor, nem bekezdés és nem további célelem, vagy amelynek ezekhez nincs megadva térközérték.
További célelemek	Térközszabályok olyan elemekhez, mint ul, blockquote vagy bármilyen egyedi szelektor. Függőleges margót (fent, lent) és vízszintes paddinget (bal, jobb) lehet megadni.
Térköz alkalmazása belül	A kontextusfüggő térközt kiterjeszti az elrendezés más részeire is olyan burkoló szelektorok megadásával, mint a .contextual-spacing.

Térközváltozók használata

A Címsor, a Bekezdés, a Tartalék térköz és a célelemek mezői változókat is elfogadnak. A mezők melletti változóválasztóval választhatsz, például var(--space-xl) értéket a címsoroknak és var(--space-s) értéket a bekezdéseknek. Ha a változók folyékony térközskálából származnak (Stíluskezelő → Térközök, lásd a Folyékony térközök fejezetet), a szövegblokkok közötti térköz az elrendezés többi részéhez hasonlóan a képernyővel együtt nő és csökken.

További célelemek

A További célelemek ismétlővel a kontextusfüggő térközt a címsoroknál és bekezdéseknél több elemre is kiterjesztheted.

Választhatsz előre megadott elemeket:

• Rendezetlen lista (ul)
• Rendezett lista (ol)
• Listaelem (li)
• Ábra (figure)
• Idézet (blockquote)

Vagy saját szelektort is megadhatsz, például .my-class, code vagy div.

Mindegyikhez megadható:

• felső és alsó margó (margin-block),
• kezdő és záró padding (padding-inline).

Így egységes térközt kapsz mindenféle tartalomtípuson.

Alkalmazás további tartalmi területeken

Adj hozzá segédosztályokat olyan burkolókhoz (például Tároló, Div vagy Blokk elemekhez), amelyek vegyes tartalmi elemeket tartalmaznak, és a Bricks alkalmazza rájuk a kontextusfüggő térköz beállításaidat. Ehhez a Térköz alkalmazása belül mezőbe írd be a szelektort (például .contextual-spacing), több szelektort vesszővel válassz el.

Az itt megadott szelektoron belül a szabályok kicsit másképp működnek, mint a Rich Textben és a Post Contentben:

• A címsortérköz az h1-től h6-ig terjedő elemekre érvényes, amelyek nem az első gyermekek.
• A bekezdéstérköz azokra a p elemekre érvényes, amelyek nem az első gyermekek. Az Egyszerű szöveg elem alapból div-et ad ki, ezért az a tartalék térközt kapja.
• A tartalék térköz a burkoló közvetlen gyermekeire érvényes, ha másik gyermek követ előttük.
• A további célelemek a burkolón belül bárhol megfelelő elemekre érvényesek, ha előttük másik elem áll.

Miért nem alkalmazza a Bricks alapból minden címsorra és bekezdésre?

A legtöbb Bricks-elrendezésben, főleg, ha a Címsor és az Egyszerű szöveg elemeket más elemekkel együtt használod, a térközt a tárolók közötti hézag (gap) kezeli. Emiatt egyetlen térközszabály minden címsorra és bekezdésre nem lenne minden környezetben értelmes. A kontextusfüggő térköz arra ad rugalmasságot, hogy csak ott alkalmazd, ahol szükség van rá, szelektorokkal és segédosztályokkal.

1. példa: beágyazott bejegyzéstartalom

Egyetlen bejegyzéssablont építesz Post Content elemmel (forrás: WordPress). A kontextusfüggő térköz bekapcsolása előtt a bejegyzés a Bricks alapértelmezett térközét mutatja.

Ha bekapcsolod az Alapértelmezett margók eltávolítása beállítást, a Bricks a saját alapértelmezett térközét és a böngésző alapmargóit is eltávolítja. Ezután a kontextusfüggő térköz vezérlőivel megadhatod a saját értékeidet. Például:

• Címsor: 2rem
• Bekezdés: 1.25rem
• Tartalék: 1rem

A Bricks ezután csak az elemek között ad térközt, ahol szükséges. A bejegyzés első eleme fölött nincs margó, az egymást követő elemek között viszont egységes a térköz.

Az eredmény: tiszta elrendezés, felül nincs térköz, és te irányítod a függőleges ritmust.

2. példa: vegyes tartalmú elrendezés

Van egy egyedi sablonod, amelyben egy tároló a következő elemeket tartalmazza:

• egy Címsor elem,
• egy Egyszerű szöveg elem (p címkével),
• egy Kép elem (figure címkével),
• egy Post Content elem (forrás: WordPress).

Mivel ezek különböző rendszerekkel kezelik a térközt, az eredmény következetlennek tűnhet. Az elrendezés egységesítéséhez:

1. A Sablonstílusok → Kontextusfüggő térköz részen kapcsold be az Alapértelmezett margók eltávolítása beállítást.
2. Add meg a térközértékeket, például: Címsor 2rem, Bekezdés 1.25rem, Tartalék 1rem.
3. Töröld a tároló sortávolságát, hogy ne adódjon hozzá a margókhoz.
4. Adj egy globális osztályt, például .contextual-spacing a tárolóhoz.
5. Írd be a .contextual-spacing szelektort a Térköz alkalmazása belül mezőbe.

Az eredmény: a burkolón belüli összes elem követi a kontextusfüggő térközszabályaidat.