/* * wakefly/icons -- the one scoped stylesheet this block needs. * * Loaded through block.json's `style`/`editorStyle`, so it is enqueued only on a page that * renders the block and it is unaffected by the SCRIPT_DEBUG style.css/style.min.css split * in functions.php. * * WHAT IS MEASURED AND WHAT IS NOT. The GRID branch at Layout=stacked, * Alignment=justify-content-center is computed-style measured -- it is the primary capture -- * and so are the two carousel arrows, from a targeted re-capture. The INLINE layout is read * from _icons.scss and corroborated against the page HTML; the carousel's own slide widths * are the one thing neither channel gives, and the block below that needs them says so. */ /* * BORDER-BOX, SCOPED TO THIS BLOCK. Neither WordPress core nor this theme sets a global * box-sizing reset, and core's own `* { box-sizing: border-box }` ships inside the block * library stylesheet, which is only enqueued for blocks core knows are on the page -- this * block's markup is written by hand, so none of it applies. */ .wp-block-wakefly-icons, .wp-block-wakefly-icons *, .wp-block-wakefly-icons *::before, .wp-block-wakefly-icons *::after { box-sizing: border-box; } /* * THE ROOT. MEASURED 1296x308 at 1440x900 with backgroundColor rgba(0,0,0,0) -- TRANSPARENT, * like cards and video and unlike image-gallery, pricing-tables and product-comparison, which * all paint white. padding 24px top and bottom from the shared `py-4` VerticalPadding class, * nothing left or right. * * THE TWO CUSTOM PROPERTIES ARE THE ONE PLACE THE GAP AND A SLIDE'S WIDTH ARE WRITTEN DOWN. * view.js and render.php both express the track's transform in terms of them rather than * carrying a number, so changing the gap moves the stepping with it and the server's string * and the client's cannot drift apart. */ .wp-block-wakefly-icons { --wf-icons-gap: 3.125rem; --wf-icons-per-view: 1; /* * THE CAROUSEL'S OWN GAP IS ZERO AND THE GRID'S IS NOT, and until 2026-09-10 this file * used one property for both. The projection carries neither number -- it says only that * `.icons-carousel-count-N .swiper-slide { width: ... }` exists "with real per-breakpoint * percentages" -- so the track borrowed the grid's measured 3.125rem, which is where the * 1346px slide pitch came from. * * MEASURED ON BOTH SIDES at 1440x900: the source's count-1 slide viewport is 1208px wide * and its slide PITCH is 1208px too, i.e. slide[1].x - slide[0].x with nothing between * them. A pitch equal to a full-width slide is a spaceBetween of 0, which is also what * units.image-carousel and units.image-link-carousel resolve * (--wf-carousel-space-between: 0px, from the same swiper-config.ts per-selector * override). The grid's 3.125rem stays where it was measured, on the grid. */ --wf-icons-carousel-gap: 0px; --wf-icons-slide-width: calc( (100% - (var(--wf-icons-per-view) - 1) * var(--wf-icons-carousel-gap)) / var(--wf-icons-per-view) ); /* * THE ARROW LADDER LIVES ON THE ROOT because two other things are derived from it: the * glyph inside the button and the inline margin the slide viewport carries to leave room * for the button. Both used to be literals and both were wrong; the ladder itself was * already right. Breakpoints unchanged -- 36px at 1200 and up, 32px from 480 to 1199, * 28px below 480 -- which reproduces the contract's measured 36 / 32 / 32 / 28 at * 1440 / 1024 / 768 / 390. */ --wf-icons-arrow: 36px; /* * WHAT THE COMPARISON MEASURES ON THIS UNIT IS THE , NOT THE . The sprite symbol * occupies 5x10 of a `viewBox="0 0 20 20"`, so the painted glyph is S/4 wide by S/2 tall * for an svg of size S. MEASURED ON BOTH SIDES: the source paints 7x14 / 6x12 / 6x12 / * 5x10 at 1440 / 1024 / 768 / 390, and this build painted 7x14 at all four because the * svg was a flat 28px. * * IT IS `arrow - 8px`, AND IT IS DELIBERATELY NOT THE SIBLING'S RATIO. The obvious move * was to copy blocks/image-link-carousel/style.css's --wf-carousel-arrow-glyph, which is * `calc(var(--wf-carousel-arrow) * 28 / 36)`. It was tried and MEASURED with * tooling/extract/probe.js on 2026-09-10: it gives S = 28 / 24.889 / 24.889 / 21.778, and * the bottom rung paints a of 5.444 x 10.889, which the extractor's own rounding * reports as 5x11 -- one pixel taller than the source's 5x10. `arrow - 8px` gives integer * S = 28 / 24 / 24 / 20 against the button's 36 / 32 / 32 / 28, i.e. a flat 4px inside the * button on every side, and S/4 x S/2 is then exactly 7x14 / 6x12 / 6x12 / 5x10 -- all * four measured pairs, with no rounding to argue about. * * THE TWO UNITS ARE NOT MEASURED ON THE SAME ELEMENT, which is why one formula does not * serve both: image-link-carousel's glyph carries inline paths and no , so the box * the extractor reports there is the itself (measured 28 / 25 / 25 / 22). */ --wf-icons-arrow-glyph: calc(var(--wf-icons-arrow) - 8px); padding-block: 1.5rem; } @media (max-width: 1199px) { .wp-block-wakefly-icons { --wf-icons-arrow: 32px; } } @media (max-width: 479px) { .wp-block-wakefly-icons { --wf-icons-arrow: 28px; } } /* --------------------------------------------------------------------------- the intro */ /* MEASURED 1296x24 at 1440x900 -- one line of body copy at the theme's own defaults. */ .wp-block-wakefly-icons__intro { margin-block-end: 1rem; } .wp-block-wakefly-icons__intro > :first-child { margin-block-start: 0; } .wp-block-wakefly-icons__intro > :last-child { margin-block-end: 0; } /* ---------------------------------------------------------------------------- the grid */ /* * MEASURED 1296x220 at 1440x900, 1024x768 and 768x1024 -- a row of three equal 182px items at * all three -- and a COLUMN at 390x844, where the items sit at y 179/415/651 each a full * 366px wide. * * 480px IS THE EXACT SWITCH POINT AND IT IS MEASURED, not assumed: _icons.scss's base rule is * `flex-direction: column` and `@media (min-width: 480px)` turns it into a wrapping row with * a 3.125rem gap. 390 is below it and the three wide viewports are all far above it. It is * not a Bootstrap breakpoint, which is why it is written as a literal here. * * THE COLUMN BRANCH STRETCHES AND USES A DIFFERENT GAP, and both come from the same * measurement: the three items sit at y 179/415/651 -- a 236px step -- and each is a FULL * 366px wide, where the item's own height is the 220 measured everywhere else. 236 - 220 = 16, * so the column gap is 1rem and not the row's 3.125rem. Reproduced, the root measures 366x780 * at 390x844, which is the contract's own figure; before this rule it measured 748. */ .wp-block-wakefly-icons__grid { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; } @media (min-width: 480px) { .wp-block-wakefly-icons__grid { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--wf-icons-gap); } } /* * SIX ALIGNMENT VALUES ARE REGISTERED AND ONE IS INSTANTIATED. `justify-content-center` is * MEASURED on all three of the non-carousel instances; start, end, around, between and evenly * were grepped for across the icons page payload with zero hits. They are built because the * field offers them and because each is one line of a property whose meaning is CSS's own -- * there is nothing to get wrong and nothing to invent. */ .wp-block-wakefly-icons__grid.is-align-start { justify-content: flex-start; } .wp-block-wakefly-icons__grid.is-align-end { justify-content: flex-end; } .wp-block-wakefly-icons__grid.is-align-center { justify-content: center; } .wp-block-wakefly-icons__grid.is-align-around { justify-content: space-around; } .wp-block-wakefly-icons__grid.is-align-between { justify-content: space-between; } .wp-block-wakefly-icons__grid.is-align-evenly { justify-content: space-evenly; } /* ---------------------------------------------------------------------------- one icon */ /* * THE ITEM'S 16px PADDING IS DERIVED FROM TWO MEASURED BOXES rather than read off a * declaration: the contract measures div.icon-item at 182x220 and the a.icon-link inside it at * 150x188. 182 - 150 = 32 and 220 - 188 = 32, symmetric on both axes, which is 16 a side. The * derivation is stated because it is a derivation. */ .wp-block-wakefly-icons__item { display: flex; justify-content: center; padding: 1rem; } /* * MEASURED 150x188: flex column, alignItems center, gap 6px. The link is `display: flex` on * both an and a
, since the source renders the same inner markup either way and only * the element changes. */ .wp-block-wakefly-icons__link { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; text-decoration: none; } /* * MEASURED 150x150, borderRadius 50%, objectFit contain, backgroundColor rgb(13,110,253) -- * this theme's `primary` slug EXACTLY, which matches _icons.scss's own * `$icon-link-background-color: $primary`. So the token is referenced rather than the hex * copied. * * `contain` AND NOT `cover`: the icons are square glyphs on a coloured plate, and cover would * crop one that is not square rather than letterbox it against the plate. */ .wp-block-wakefly-icons__image { flex-shrink: 0; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background-color: var(--wp--preset--color--primary); } .wp-block-wakefly-icons__media { display: block; width: 100%; height: 100%; object-fit: contain; } /* * MEASURED fontSize 16px (`medium`), fontWeight 700 (bold), colour rgb(51,51,51) (this * theme's `body-text` slug) and textAlign center. The colour is written because the link is an * , and theme.json's own link element sets `color: currentColor` -- so without a colour of * its own the label would take whatever the surrounding text is rather than the measured * body-text. * * THE 8px ABOVE THE LABEL IS SPACING, NOT HEIGHT, AND THE DERIVATION THAT SAID OTHERWISE WAS * WRONG. This rule used to carry `min-height: 2rem`, reasoned from three contract figures -- * link 150x188, image 150x150, gap 6 -- as 188 - 150 - 6 = 32. Two boxes were being solved * for with one equation, and it picked the wrong one. * * MEASURED ON BOTH SIDES, 2026-09-10: the source's label is 24x115 at root-relative y=244 and * this build painted 32x115 at y=236. Both bottoms land on 268, which is the link's own * bottom, so the height was the thing that was wrong and the position followed from it. 24 is * one 16px line at the theme's 1.5 line-height -- the box this build measured before the * min-height was added. * * THAT LEAVES 188 - 150 - 6 - 24 = 8 TO PLACE, and it has to stay somewhere or the link * collapses to 180 and the whole item shortens. It goes above the label: with the contract's * measured `gap: 6px` on the link left alone, the label's margin box starts at 236 and its * border box at 244, which is both measured numbers at once. WHICH ELEMENT THE SOURCE HANGS * IT ON IS NOT DISTINGUISHABLE from what is measured -- 8px under the image reads identically * -- so it is written here, where the measurement that caught it was taken, and the ambiguity * is stated rather than hidden in a round number. */ .wp-block-wakefly-icons__text { margin-block-start: 0.5rem; font-size: var(--wp--preset--font-size--medium); font-weight: 700; text-align: center; color: var(--wp--preset--color--body-text); } /* * THE INLINE LAYOUT. Read from _icons.scss -- `.icon-item-inline .icon-link { flex-direction: * row; min-width: 200px }` and `.icon-link-image { width/height: 75px }`, half the stacked * size -- and corroborated against the page HTML, which shows the same three images in a row * layout. NOT computed-style measured: the extractor resolves only the first match per * selector and that match is the stacked instance. */ .wp-block-wakefly-icons__item.is-layout-inline .wp-block-wakefly-icons__link { flex-direction: row; align-items: center; width: auto; min-width: 200px; text-align: start; } .wp-block-wakefly-icons__item.is-layout-inline .wp-block-wakefly-icons__image { width: 75px; height: 75px; } .wp-block-wakefly-icons__item.is-layout-inline .wp-block-wakefly-icons__text { text-align: start; } /* ------------------------------------------------------------------------ the carousel */ /* * MEASURED root box 1296x308 at 1440x900 -- the SAME HEIGHT as the grid variant, because both * render a row of items at rest. * * THE SLIDE WIDTH IS THE ONE THING NEITHER CHANNEL GIVES, and it is a discovery defect rather * than a decision made here. The contract records that * `.icons-carousel-count-N .swiper-slide { width: ... }` is defined for N=1..5 in _icons.scss * "with real per-breakpoint percentages" and that count-1 measures one FULL-WIDTH slide per * view -- but the percentages themselves are not in the projection, and neither is the * carousel's own space-between. So: N slides per view at every viewport, sharing the row * equally after the gaps, with the gap taken from the grid's own measured 3.125rem. count-1 is * then exactly the one full-width slide the capture measures, and every other N is a * consistent reading of the same rule that nothing has measured. */ .wp-block-wakefly-icons__carousel { position: relative; } .wp-block-wakefly-icons__carousel.is-per-view-1 { --wf-icons-per-view: 1; } .wp-block-wakefly-icons__carousel.is-per-view-2 { --wf-icons-per-view: 2; } .wp-block-wakefly-icons__carousel.is-per-view-3 { --wf-icons-per-view: 3; } .wp-block-wakefly-icons__carousel.is-per-view-4 { --wf-icons-per-view: 4; } .wp-block-wakefly-icons__carousel.is-per-view-5 { --wf-icons-per-view: 5; } /* * THE 44px SLIDE INSET, WHICH THIS BUILD DID NOT HAVE AT ALL. MEASURED ON BOTH SIDES at * 1440x900: the source's slide viewport is 1208px wide at root-relative x=44 and this build's * was 1296px at x=0 -- the full width of the root, with the arrows floating over the slides * instead of beside them. 1296 - 44 - 44 = 1208 closes exactly. * * IT IS `arrow + 8` RATHER THAN A FLAT 44, and that is the one figure here carried from a * sibling rather than measured on this unit. Only the 1440 pair was measured on icons. * units.image-carousel and units.image-link-carousel both measure the .swiper side margin as * the arrow plus 8 at every width -- 36+8=44 at 1440, 32+8=40 at 1024 and 768, 28+8=36 at * 390 -- off the same shared Swiper rule, and the arrow ladder measures the same 36/32/32/28 * on this unit. At 1440 the derivation reproduces the measured 44. THE OTHER THREE VIEWPORTS * ARE THE SIBLING RULE READ ACROSS, not an icons measurement, and the hand-back says so. */ .wp-block-wakefly-icons__viewport { margin-inline: calc(var(--wf-icons-arrow) + 8px); overflow: hidden; } /* * `will-change` IS NOT SET AND THE TRANSITION IS. A slide change is a transform on this one * element, which is what makes the step cheap; the duration is here rather than in view.js * because it is a CSS property, the same split blocks/hero-carousel already uses. */ .wp-block-wakefly-icons__track { display: flex; gap: var(--wf-icons-carousel-gap); transition: transform 500ms ease; } .wp-block-wakefly-icons__slide { flex: 0 0 var(--wf-icons-slide-width); display: flex; justify-content: center; min-width: 0; } @media (prefers-reduced-motion: reduce) { .wp-block-wakefly-icons__track { transition: none; } } /* * THE ARROWS. MEASURED on the targeted `icons-carousel` re-capture: 36x36 at 1440, 32x32 at * 1024 AND 768, 28x28 at 390 -- the same four-step pattern the image carousels' arrows * measure. backgroundColor rgb(240,100,0) is this theme's `secondary` slug, colour white, * borderRadius 50%, borderWidth 0, position absolute with a -22px top margin so the control * floats over the row rather than pushing it down. The glyph measures 28x28 at 1440 and is the * absorbed sprite's own `navigation-previous` / `navigation-next` symbol. * * THE NEXT ARROW'S RIGHT EDGE IS FLUSH WITH THE ROOT'S: measured at x=1332 against a root * spanning 72..1368, which is 1368 - 36. Hence `inset-inline-end: 0` on a relatively * positioned carousel rather than an offset of its own. */ .wp-block-wakefly-icons__arrow { display: flex; align-items: center; justify-content: center; position: absolute; inset-block-start: 50%; margin-block-start: -22px; width: var(--wf-icons-arrow); height: var(--wf-icons-arrow); padding: 0; border: 0; border-radius: 50%; background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--white); cursor: pointer; } .wp-block-wakefly-icons__arrow.is-previous { inset-inline-start: 0; } .wp-block-wakefly-icons__arrow.is-next { inset-inline-end: 0; } .wp-block-wakefly-icons__arrow-glyph { width: var(--wf-icons-arrow-glyph); height: var(--wf-icons-arrow-glyph); fill: currentColor; }