/** * De knoppen van de oude site, als core/button. * * De site draait op de overgenomen Drupal-stylesheet (assets/css/legacy.css). * Daarin is een knop de klasse `.btn` op een ``. Een `core/button` schrijft * zijn eigen klassen (`.wp-block-button > .wp-block-button__link`) en die kent * legacy.css niet. Dit bestand legt precies dezelfde doos op die klassen, zodat * een redacteur een gewoon knopblok kan plaatsen en er in de editor hetzelfde * ziet als op de site. * * Waarom hier en niet elders: * - niet in legacy.css: dat is een kopie van de oude site en blijft dat; * - niet in wp-bridge.css: dit bestand is óók editor-stijl (zie * glorieux_setup()). In de blok-editor staat de wikkel `.glx-legacy` niet om * de pagina-inhoud, dus mogen deze regels daar niet op leunen. * * Vandaar `.wp-block-button > .wp-block-button__link` (0,2,0) en niet de losse * klasse: drie regels zouden anders van de knop winnen. * * .glx-legacy a{color:#C8D200} (0,1,1) legacy.css regel 824 * .wp-block-button__link{…} (0,1,0) theme.min.css (editor) * :root :where(.wp-block-button__link){…} (0,1,0) theme.json * * De eerste maakte de knoptekst limoengroen in plaats van wit, de tweede gaf de * knop in de editor de oude SCSS-vorm (50px rond, 16px, donkere tekst). */ /* ─── 1. De knop ───────────────────────────────────────────────────────────── Eén op één de doos van `.glx-legacy .btn` (legacy.css regel 899 en 903). Let op `min-width`: die staat op regel 899 op 230px en op regel 903 weer op auto, dus auto is de eindstand. `transition` is daar om dezelfde reden none. */ .wp-block-button > .wp-block-button__link { display: inline-block; max-width: 100%; min-width: auto; margin: 0; padding: 21px 40px; background: #C8D200; color: #fff; border: none; border-radius: 10px; cursor: pointer; vertical-align: middle; text-align: center; text-decoration: none; font-family: 'LatoHeavy', 'Lato', sans-serif; font-size: 14px; font-weight: normal; line-height: normal; letter-spacing: 1px; text-transform: uppercase; transition: none; } .wp-block-button > .wp-block-button__link:hover, .wp-block-button > .wp-block-button__link:focus { background: #425269; color: #fff; } /* ─── 2. De drie gevulde kleuren ───────────────────────────────────────────── Dezelfde drie als op de oude site: `.btn` (groen), `.btn.purple-btn` en `.btn.orange-btn` (legacy.css regel 905-912). De namen komen uit glorieux_knop_stijlen() in inc/knoppen.php; laat ze gelijk lopen. De vierde stijl (`Link`) heeft geen doos en staat in sectie 3. Groen is ook de stand zónder stijlklasse, zodat een knop die een redacteur zonder keuze plaatst er goed uitziet. */ .wp-block-button.is-style-glorieux-groen > .wp-block-button__link { background: #C8D200; } .wp-block-button.is-style-glorieux-paars > .wp-block-button__link { background: #8565ca; } .wp-block-button.is-style-glorieux-oranje > .wp-block-button__link { background: #fab926; } /* De hover van de oude site is voor alle drie dezelfde donkerblauwe. */ .wp-block-button.is-style-glorieux-groen > .wp-block-button__link:hover, .wp-block-button.is-style-glorieux-groen > .wp-block-button__link:focus, .wp-block-button.is-style-glorieux-paars > .wp-block-button__link:hover, .wp-block-button.is-style-glorieux-paars > .wp-block-button__link:focus, .wp-block-button.is-style-glorieux-oranje > .wp-block-button__link:hover, .wp-block-button.is-style-glorieux-oranje > .wp-block-button__link:focus { background: #425269; } /* ─── 3. De tekstlink ──────────────────────────────────────────────────────── De vierde knop van de oude site: `.link-btn` (legacy.css regel 917-918). Geen gevulde doos maar limoengroene hoofdletters met het pijltje van assets/images/legacy/link.png ernaast. Op hover krimpt de rechterruimte van 30px naar 20px, waardoor het pijltje naar de tekst toe schuift — vandaar dat `transition` hier terug aan gaat; sectie 1 zet hem op none (zoals `.btn`). Waarom deze stijl bestaat: op de oude site stond `.link-btn` alleen op de nieuwskaartjes, en daar altijd op een lege div. De opmaak is dus wel ontworpen maar heeft er nooit tekst in gestaan. Het is de enige knop van het ontwerp die geen gevulde doos is, en daarmee de secundaire knop die een redacteur anders niet kan maken (`Omlijnd` van de kern is weggehaald, zie inc/knoppen.php). Alles wat sectie 1 zet en hier niet hoort, wordt hier teruggedraaid. De selector is (0,3,0) tegen (0,2,0), dus dat lukt zonder !important. Het pad naar het pijltje is absoluut, net als in legacy.css: knoppen.css is óók editor-stijl en staat daar in een iframe met een andere basis-URL. `right top` komt uit legacy.css en klopt hier: het pijltje is 14x13px, de regelhoogte 14px en de bovenruimte 0, dus het staat op de tekstregel. `text-align: inherit` staat er omdat `.link-btn` in legacy.css geen uitlijning zet en die dus overerft; sectie 1 zet `center` (dat hoort bij `.btn`). Zolang het label op één regel past maakt het niets uit, bij een label dat afbreekt wel. Twee andere dingen uit sectie 1 blijven hier bewust staan, want legacy heeft er geen mening over en de WordPress-stand is de veiligere: `max-width:100%` (een lang label breekt af in plaats van uit de kolom te lopen) en `vertical-align:middle` (een knopblok staat nooit inline). */ .wp-block-button.is-style-glorieux-link > .wp-block-button__link { padding: 0 30px 0 0; background: url(/wp-content/themes/glorieux/assets/images/legacy/link.png) no-repeat right top; color: #c8d200; border-radius: 0; line-height: 14px; text-align: inherit; transition: all .2s; } /* Hover: alleen het pijltje schuift op. De donkerblauwe vulling uit sectie 1 mag hier niet komen, dus staan achtergrond en tekstkleur er opnieuw bij. */ .wp-block-button.is-style-glorieux-link > .wp-block-button__link:hover, .wp-block-button.is-style-glorieux-link > .wp-block-button__link:focus { padding-right: 20px; background: url(/wp-content/themes/glorieux/assets/images/legacy/link.png) no-repeat right top; color: #c8d200; } /* ─── 4. De rij ────────────────────────────────────────────────────────────── `.wp-block-buttons` is normaal flex via de layout-klasse `is-layout-flex`, maar in de pagina-inhoud worden de layout-klassen gestript (glorieux_strip_layout_classes in inc/legacy.php, nodig voor de marges van de gemigreerde pagina's). Zonder deze regel valt de rij op de site terug op block-gedrag terwijl de editor hem wél als flex toont — dan lopen editor en site uiteen. 18px is de tussenruimte van de oude site (`.welcome-block .btn{margin:0 18px 0 0}`), en de 20px ondermarge komt van `.btn{margin:0 0 20px}`. Een knoprij die anders moet staan, zet dat als marge op het blok; die inline stijl wint hiervan. */ .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin: 0 0 20px; } /* ─── 5. Een icoon in de knop ──────────────────────────────────────────────── Twee knoppen van de oude site dragen een icoon vóór het label: de twee in het welkomstblok op de homepage (`.welcome-block .btn img{margin:0 10px 0 0}`, legacy.css regel 1090). Die 10px staat hier zonder context, want een icoon in een knop is geen eigenschap van het welkomstblok maar van de knop. Het icoon zit in het tekst-attribuut van het knopblok, als een gewone ``. Dat kán: rich-text maakt er een object van (één teken in de tekst, de `` in `replacements`), dus het overleeft het opslaan, het teruglezen uit het contenteditable-veld én het herschrijven van het label. Wat de redacteur er niet mee kan: een icoon toevoegen dat er nog niet staat. De knop zet `withoutInteractiveFormatting`, en dat filtert het formaat "Inline afbeelding" weg omdat `img` een interactieve tag is. Weghalen kan hij wel — het is één teken. `vertical-align` staat er expliciet bij. Op de site en in het editor-canvas komt hij ook uit `.glx-legacy img` (legacy.css regel 825), maar dit bestand mag niet op die wikkel leunen (zie de kop) en hij bepaalt de hoogte van de knop: het icoon is 21px hoog en tilt daarmee de regel van 17 naar 21px, wat de knop van 59 naar 63px brengt — de maat van de oude site. */ .wp-block-button > .wp-block-button__link img { margin: 0 10px 0 0; vertical-align: middle; }