/* * wakefly/image-link-carousel — the one scoped stylesheet this block needs. * * IT IS A SECOND FILE AND NOT A SHARED ONE WITH wakefly/image-carousel, deliberately. The two * widgets emit the same root class in the SOURCE, which is exactly why one selector configures * both there — but in WordPress they are two block types with two `wp-block-…` prefixes, and a * stylesheet declared by one block.json is enqueued only for that block. Sharing a file would * mean one block's page loading rules for a block that is not on it, and a rename in either * one silently un-styling the other. The four values that ARE shared are shared as * measurements: the arrow ladder, the viewport margin derived from it, the caption bar and the * 500px image width, each carrying the same comment in both files. * * EVERY NUMBER BELOW IS A MEASUREMENT FROM THE UNIT CONTRACT OR ARITHMETIC OVER TWO OF THEM. */ /* * 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. */ .wp-block-wakefly-image-link-carousel, .wp-block-wakefly-image-link-carousel *, .wp-block-wakefly-image-link-carousel *::before, .wp-block-wakefly-image-link-carousel *::after { box-sizing: border-box; } .wp-block-wakefly-image-link-carousel { /* * The resolved `spaceBetween`, and THE ONLY PLACE THE NUMBER IS WRITTEN DOWN: * assets/js/carousel-view.js and functions.php both build the track's transform as a * calc() over this property. The shared `defaultSwiperOptions.spaceBetween` is 20 and the * initializeSwiper('.image-carousel', …) call this widget resolves through passes 0. */ --wf-carousel-space-between: 0px; /* `speed: 500`, from the same options object. */ --wf-carousel-speed: 500ms; /* * THE ARROW LADDER, AND THE VIEWPORT MARGIN IS DERIVED FROM IT. Measured arrow boxes on * this unit: 28x28 at 390, 32x32 at 768 and 1024, 36x36 at 1440. Measured .swiper side * margins as the difference between the inner and viewport boxes: 342 - 270 = 72 (36 a * side), 672 - 592 = 80 (40), 912 - 832 = 80 (40), 1272 - 1184 = 88 (44). The margin is * the arrow plus 8 at every measured width. * * THE CONTRACT'S PROSE SAYS "44px … identical at all four viewports" AND ITS OWN NUMBERS * SAY OTHERWISE, on this unit and on image-carousel alike. The measurements are what this * builds to; the discrepancy is in the hand-back. * * THE TOP RUNG'S BREAKPOINT IS UNMEASURED: 1024 measures 32 and 1440 measures 36, so the * step is between them. 1400 is Bootstrap's xxl and is the breakpoint this source uses for * its only other responsive value; 1200 would reproduce all four captured viewports too. */ --wf-carousel-arrow: 28px; /* 28x28 glyph inside a 36x36 button, measured at 1440 and only at 1440, so the other three rungs scale on that one ratio rather than on invented numbers. */ --wf-carousel-arrow-glyph: calc(var(--wf-carousel-arrow) * 28 / 36); /* * $image-component-width in the source's _image.scss. Measured 500px wide at all four * viewports — including 390, where 123px hangs off each side of a 270px slide and the * viewport clips it. That overflow is the source's and is reproduced, not corrected. */ --wf-carousel-image-width: 500px; /* The arrows are absolutely positioned against this box. */ position: relative; } @media (min-width: 768px) { .wp-block-wakefly-image-link-carousel { --wf-carousel-arrow: 32px; } } @media (min-width: 1400px) { .wp-block-wakefly-image-link-carousel { --wf-carousel-arrow: 36px; } } /* ------------------------------------------------------------------------------ the frame */ /* Bootstrap's div.container. Measured exactly as wide as the root at all four viewports, so its only job is the 12px inline gutter: 1296 - 12 - 12 = 1272. */ .wp-block-wakefly-image-link-carousel__container { padding-inline: 12px; } /* * NOT INSTANTIATED ON EITHER SOURCE INSTANCE — both measure 548 tall, which reconciles as * 24 + 500 + 24 with no intro node. The 16px below it is image-carousel's measurement on the * same wrapper class, carried here because the two widgets render the same .cshtml partial for * it; it is the one value in this file measured on the sibling unit rather than on this one. */ .wp-block-wakefly-image-link-carousel__intro { margin-block-end: var(--wp--preset--spacing--40); } .wp-block-wakefly-image-link-carousel__intro > :first-child { margin-block-start: 0; } .wp-block-wakefly-image-link-carousel__intro > :last-child { margin-block-end: 0; } /* * div.swiper — the clipping viewport. Measured 1184x500 at x=128 in a 1440 window, 832 at * x=96, 592 at x=88 and 270 at x=60. `overflow: hidden` is what clips the 500px image inside a * 270px slide at 390. */ .wp-block-wakefly-image-link-carousel__viewport { position: relative; margin-inline: calc(var(--wf-carousel-arrow) + 8px); overflow: hidden; } /* div.swiper-wrapper, the track: measured display flex, position relative, translate3d(0,0,0) at rest. `gap` is the resolved spaceBetween, which is 0. */ .wp-block-wakefly-image-link-carousel__track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--wf-carousel-space-between); transition: transform var(--wf-carousel-speed) ease; will-change: transform; } /* WCAG 2.3.3 is AAA and is not required; it costs three lines and takes away only the sweep. */ @media (prefers-reduced-motion: reduce) { .wp-block-wakefly-image-link-carousel__track { transition: none; } } /* * ONE ROW, EXACTLY AS WIDE AS THE VIEWPORT at every measured width (1184 / 832 / 592 / 270), * which is why one image shows whatever the count class says. The computed justify-content is * literally `center`, so core's layout vocabulary needed no mapping. * * `visibility` is the measured rest state — the source paints swiper-slide-visible on the * active row only — and it also takes the clipped rows' anchors out of the tab order. */ .wp-block-wakefly-image-link-carousel__slide { flex: 0 0 100%; /* * `min-width: 0` IS LOAD-BEARING AND IT IS 123px, MEASURED. A flex item's min-width * defaults to `auto`, which is its MIN-CONTENT size — and this slide's min-content is its * non-shrinking item, 516px wide. So at 390x844 the slide grew from the 270 that * `flex: 0 0 100%` asks for to 516, the media landed at x=68 instead of the contract's * x=-55, AND every step of the track's -100% transform would have been 516 rather than one * viewport. Verified in isolation before it was written: the same three rules with and * without this line put the item at -15 and at +108 inside a 270px box. */ min-width: 0; display: flex; flex-direction: row; justify-content: center; visibility: hidden; } .wp-block-wakefly-image-link-carousel__slide.is-current { visibility: visible; } /* ------------------------------------------------------------------------ the slide's link */ /* * THE ITEM IS THE ANCHOR AND IT HAS NO FRAME. That is the measured difference from * image-carousel, whose identical inner markup sits inside a