Work rail: constrain to the content shell, fix jQuery error and scroll affordance (step 13)

[jasperf]

Step 13 of the Aviendha redesign, plus two frontend defects it surfaced on the demo homepage.

1. The rail was full-bleed and "the slider didn't work"

Two symptoms, one cause. Reported as the SVGs are small and there's no slider. The work section was the only one still outside a spine-section, and the carousel carried align: "full" — so at full viewport width all five cards fit side by side, the rail-mode scroll-snap container had nothing to overflow, and it never scrolled. The cards were always the mockup's minmax(19rem, 22rem); they only looked undersized against ~500px of dead space either side.

The work section now sits in a tinted aludra/spine-section ("Selected work"), matching the mockup's .section.section-tint > .shell > .spine, and the carousel dropped its alignment. Constraining it to the ~820px spine content column fixes the proportions and restores the scrolling in one move.

2. ReferenceError: Can't find variable: jQuery

view.js was declared as a block.json viewScript. Core enqueues a viewScript whenever the block is on the page — it has no way to know the block came in rail mode. The script opens with ( function ( $ ) { … } )( jQuery ), so it died on that line before ever reaching its own rail guard, and jQuery wasn't loaded because the generated view.asset.php declared no dependencies.

It is now enqueued from aludra.php behind aludra_blocks_have_slick_carousel() — the same gate as the Slick vendor assets — which finally makes good on 2.21.1's stated promise: a rail-only page now loads no carousel JavaScript, not just no Slick. Confirmed on the demo page: the only remaining scripts are core navigation and faq-tabs.

The file moved to blocks/carousel/js/view.js, because dropping viewScript from block.json also drops it as a webpack entry point — and it needs no bundling: hand-written jQuery, no imports. Recorded in CLAUDE.md so the next per-engine gating follows the same shape.

3. No visible cue that the rail scrolls

Rail mode draws no arrows and no dots, so the scrollbar was the only affordance — and on macOS that's an overlay scrollbar: zero layout space, invisible until you're already scrolling. Styling ::-webkit-scrollbar is documented to opt into a classic bar but did not override the platform default here (measured offsetHeight - clientHeight === 0 on the live page).

Added instead, both pure CSS so rail mode stays zero-JS:

• A right-edge fade, as a mask-image on the scroll container. A mask applies to the element as rendered, so it stays pinned to the edge where an absolutely positioned child of a scroll container would scroll away — and it needs no background color to fade against, so it works in tinted and untinted sections alike. It clears itself at the end of the track via a scroll-driven animation (animation-timeline: scroll(self inline)), so the last card isn't left permanently ghosted; browsers without scroll-driven animations keep a constant fade.
• An .aludra-rail-hint class for a mono "Scroll for more →" label, authored as a paragraph in the pattern rather than a pseudo-element — a ::after on the rail would either become an extra grid column or scroll out of view, and as real content it stays translatable and removable by the page author.

4. Latent spine-section bug this surfaced

The single-column mobile layout used a bare 1fr track. That's minmax(auto, 1fr), whose automatic minimum is the track's min-content width — so a horizontally overflowing child widens the track, and with it the document, instead of being cropped. The rail made the whole page scroll sideways on a phone (full-page screenshot came back 1384px wide on a 390px viewport). Now minmax(0, 1fr), matching the desktop track, which had already been floored at 0 for exactly this reason. Any wide child was affected — a table, a pre — not just this carousel.

Verification

• npm run validate:file -- patterns/page-homepage.php → PASS (re-run after the hint paragraph was added)
• Instrumented the live demo page: clientWidth 936 / scrollWidth 1664 (overflows and scrolls), --aludra-rail-fade animates 3rem → 0rem across the scroll range, zero page errors.
• Desktop (1920) and mobile (390) screenshots: rail in the shell, tinted band, edge fade on the last visible card, hint label below, no horizontal page scroll.

Released as 2.23.1.

[github-actions]

✅ WordPress Plugin Check Report

✅ Status: Passed

📊 Report

All checks passed! No errors or warnings found.

---

🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check