Spine-section styles for services, pricing, reviews and FAQ (steps 7–10)

[jasperf]

Steps 7–10 of the Aviendha redesign. The four remaining homepage sections move into aludra/spine-section (added in 2.22.0) and pick up the mockup's treatment. Released as 2.23.0.

Design target: designs/aviendha/aviendha-redesign.html in the imagewize.com repo; per-section rationale in docs/aludra/AVIENDHA-REDESIGN-BLOCKS.md §§5–8 there.

What's in it

Step	Block	Change
7	services-block	New is-style-list — single-column hairline rows (icon, heading + copy, mono two-digit index) instead of two-per-row cards
8	pricing-tiers	New is-style-spec-sheet — one bordered container split by internal hairlines, no shadow, no hover lift
9	review-profiles	New is-style-quotes — avatar-free quote cards with role + sector attribution
10	faq-tabs	New native display mode — real <details>/<summary>, no JavaScript

The default styles (cards / avatars / tabs) are untouched, so Elayne and other consumers are unaffected.

patterns/page-homepage.php wraps each of the four sections in a spine section, moves their standalone headings into the spine column, and replaces the pricing section's Nynaeve-specific font-size slugs (3xl, lg, xs) and per-element inline border/spacing styles with the shared scale and variant CSS.

Decisions worth flagging

testimonial-grid was the wrong answer for step 9. The plan floated swapping the pattern to it, on the strength of its description being avatar-free. But it ships a data-slick payload and a viewScript — adopting it would have put jQuery and Slick straight back on the page that 2.21.1 had just cleared. A style variant on review-profiles keeps the page script-free and reuses the existing content model.

Native FAQ needed the child to carry its own displayMode. Block context is only available in edit and server-side render_callback, never inside save() — so faq-tab-answer can't read the parent's mode at save time, and it has to, because native mode changes its markup. The value is duplicated onto each child as a real attribute and mirrored by the parent's edit.js (guarded by an equality check so it doesn't loop).

Pricing turned out not to be a pure content rewrite. The featured tier's 3px top accent bar is a ::before; core column attributes can't express it, so it needed a real style variant rather than just pattern markup.

The services index is a CSS counter, not authored 01/02 text, so it can't drift out of step when an author reorders, adds or removes a row.

Fixed along the way

.faq-tab-answer { display: none } hid the entire FAQ in native mode. The rule exists so tabs/accordion can reveal one answer at a time via an .active class that view.js adds — and native mode deliberately never runs view.js. All four <details> were in the page and validated fine, but rendered invisible. Now scoped so details.faq-tab-answer stays visible.

Worth remembering as a class of bug: switching off a block's JavaScript can strand CSS that was relying on it.

Also

assets/placeholders/avatar.svg — replaced the hand-drawn front-facing bust, drawn in cool greys (#e5e7eb/#9ca3af) that the palette contract set out to remove, with the eos-face icon from Blade UI Kit (MIT, credited in readme.txt) recoloured into Aludra's warm neutrals. No background disc, so it takes on whatever surface it's dropped onto instead of stamping a fixed cream circle onto all of them.

Testing

• npm run validate — all 9 patterns pass, including page-homepage.php.
• Verified on the demo subsite (http://demo.imagewize.test/aviendha/) at desktop and mobile: pricing stacks to a single sheet with horizontal dividers at 781px (matching where core stacks columns), the services index drops below 560px, and the first FAQ entry renders open.

[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