/* * Variácia „Lead" pre core/paragraph — šírka. * * Typografia je v `theme.json` (`styles.blocks.core/paragraph.variations.lead`); * tu je len `max-width`, pretože `theme.json` ho pre bloky nemá — `dimensions` * pozná `minHeight` a `aspectRatio`, nie `maxWidth`. * * Súbor ide do stránky dvoma cestami, pretože jedna nestačí: * `wp_enqueue_block_style()` je len frontendový (vešia enqueue na * `wp_enqueue_scripts`, ktorý v administrácii nebeží) a do kanvasu editora * vedie `add_editor_style()`. Zoznam je v `functions/BlockStyles.php`. * * 🔴 **Žiadne `!important` a žiadne marginy — a to je celá pointa.** * Lead má byť úzky a **vľavo**, kým nadpis nad ním je centrovaný. Pokúšal som * sa to dosiahnuť `margin-left: 0 !important` a bola to slepá ulička: * auto-centrovanie robí layout jadra pravidlami, ktoré `!important` používajú * samy, takže rozhoduje špecificita — a tá sa v editore líši od frontendu * (`.block-editor-block-list__layout.is-root-container > :where(…)` má (0,2,0) * proti frontendovým (0,1,0)). Keď som špecificitu dohnal, `margin-left: 0` * začalo zarovnávať na okraj **kontejnera**, ktorý je v editore širší než * obsahový stĺpec — a lead vyskočil 208 px vľavo mimo stĺpec. * * Správne riešenie je štrukturálne: **lead je vnútri `core/group`**. * Auto-centrovanie sa uplatňuje len na *priame deti* constrained layoutu; * vnútri grupy je flow layout, ktorý nič necentruje, takže `max-width` sám * posadí odstavec k ľavému okraju — na frontende aj v editore, bez toho, aby * sa čokoľvek prebíjalo. Odstup nad leadom nesie tá grupa. */ /* * 🔴 **Dve triedy, nie jedna.** `:root :where(.is-layout-constrained) > *` * z `theme.json` nastavuje `max-width: 1024` s rovnakou špecificitou (0,1,0) * a pri remíze vyhráva, lebo globálne štýly stoja v `` za štýlmi blokov. * * Prejaví sa to len tam, kde lead sedí **priamo v obsahu stránky** — keď je * vnútri `core/group` s `layout: default`, constrained pravidlo naň nesadne * a 552 prejde. Preto to na Kontakte fungovalo a na Produkte nie: odmerané, * ten istý štýl dal raz 552 a raz 1024. */ .is-style-lead.wp-block-paragraph, .is-style-lead { max-width: var(--wp--custom--measure, 552px); } /* * ⚠️ Zarovnanie vľavo sa týmto súborom **riešiť nedá**. `constrained` layout * dáva deťom `margin-inline: auto` s `!important`, čo na prvku s `max-width` * znamená vycentrovanie — a `!important` z CSS bloku neprebijeme. Preto lead * na každej stránke sedí v `core/group` s `layout: default`, kde to pravidlo * neplatí (Kontakt, O nás, Produkt). `max-width` `!important` nemá, preto * prešlo a zarovnanie nie. */ /* * Na mobile klesne Lead na úroveň tela (`small`, 16,6). Od 2026-09-28 je to * jediný Lead — „Lead sekcie" (`measure`) s ním splynul (Filip). Dve triedy * zámerne: typografiu vypisuje `theme.json` a globálne štýly stoja za štýlmi * blokov, takže pri rovnakej špecificite by vyhrali ony. */ @media (max-width: 900px) { .wp-block-paragraph.is-style-lead { font-size: var(--wp--preset--font-size--small); } } /* * Variácie karty (`is-style-card-number`, `is-style-card-big-number`) — čísla * v hornom slote karty, blok E. * * **Tu opäť nič nie je a je to správne.** Obe sú čistá typografia a tú * `theme.json` vie (`styles.blocks.core/paragraph.variations`). Existujú len * preto, že s prerábkou karty na core bloky (2026-09-10) zanikol atribút * `mediaType` na mriežke — čo je v karte, hovorí blok, ktorý tam je, a dva * odstavce s rôznou veľkosťou písma sa inak rozlíšiť nedajú. * * Odkiaľ sú hodnoty: * * 1. **Poradové číslo je 22/27/600/0,2** (zadal Lukáš) a `fontSize` je * literál `22px`, nie preset. Bolo * to na presete `medium`, kým `medium` neprešel na **22,4**, čo je veľkosť * leadu; tie dve hodnoty len dovtedy zdieľali preset. Odmerať sa to * rozhodnúť nedá: výška inku číslice „1" je v dizajne 17,06 proti 16 * v renderi, čo pri k = 0,656 design px na pixel snímky nerozlíši 22 * od 22,4. * 2. **Veľké číslo je 64/64/600/−0,6** a `fontSize` preset **je** — `x-large` * („Nadpis sekcie") je presne 64. Literál by tu bol zbytočný. * * Číslo sa **zadáva ručne** (Lukáš, 2026-09-10: „cisla sa mozu zadavat rucne, * nemusi tam byt ziadny counter"). CSS counter na mriežke aj typ média „Číslo * s tečkou" zanikli — tečku napíše redaktor. */ /* * Variácie Integrácií (`is-style-integrations-col-title`, * `is-style-integrations-name`, `is-style-integrations-desc`) — tri roly * odstavca v páse F. * * **A tu opäť nič nie je a je to správne.** Všetky tri sú čistá typografia * a tú `theme.json` vie (`styles.blocks.core/paragraph.variations`). To, čo * typografia nie je — šípka externého odkazu, natiahnutá kliknutelná plocha * a hover celej položky — nesie **poloha** v páse, nie štýl, a je * v `assets/blocks/pattern-integrations.css`. * * Existujú preto, že vzhľad pásu do 2026-09-10 stál na triedach, ktoré * redaktor písal ručne do *Pokročilé → Ďalšia trieda CSS*. Odvtedy platí * konvencia (`docs/03-architektura.md`): rola vzhľadu, ktorú by redaktor * inak musel napísať ako triedu, je registrovaný blokový štýl — a tam, kde * sa dá, aj štruktúrny selektor, aby na ňu nešlo zabudnúť. * * Odkiaľ sú hodnoty: * * 1. **Titulok stĺpca je 17,6/21/600/0,2** a `fontSize` **je preset** — * „Základný" je presne 17,6, tá istá veľkosť ako názov karty. Preset a nie * literál zámerne: na mobile sa láme na 16,6 a štruktúrny selektor * v `pattern-integrations.css` má ten istý preset, takže obe cesty majú * rovnakú hodnotu aj na mobile. * 2. **Názov položky je 14,4/18/600/0,2** a **popis 14,4/18/500/0,2** — * líšia sa len tučnosťou. `fontSize` je literál `14.4px`, nie preset, * lebo `button` (14,4) sa hodnotou zhoduje, ale menuje sa podľa tlačidla. * * Farba (`ink`) tu nie je, hoci dizajn ju hovorí — `styles.color.text` * v `theme.json` je `ink` globálne, takže by to bol zápis, ktorý nič nemení. */