Sam had one combined file, Hero Options (21 of them).html, holding 21 hero blocks that all shared a single external <style> block. He asked to save each hero individually into ~/Documents/Design Elements - Current/a - Hero Blocks/ so they could be handed to an agent and dropped onto a page or post, and to add agent instructions for any that were not deployable on their own.
None of the 21 were drop-in deployable as-is, for three reasons: (1) they shared one external stylesheet using generic .sa-h classes, so a single copied <section> carried no CSS; (2) the base class was width:100%, not full-bleed, so each would render boxed inside a WordPress content container (Sam's standing "hero blocks not full width" rule); (3) image paths were relative (../Images-WebP/...) and will not resolve on the live site.
I converted all 21 into self-contained, full-bleed, WordPress-ready Custom HTML blocks that mirror the existing Hero-w-form-rail.html convention already in that folder. Each file has: its own scoped <style> using a unique .sa-hero-* prefix (no CSS leakage and no collision if two land on one page), 100vw full-bleed via margin-left:calc(50% - 50vw), the <!-- wp:html --> Gutenberg wrapper, eager-loaded non-lazy bg image with width/height/alt set, and a per-file instruction header (suggested target URL, source image name, exact tokens to replace).
Three archetypes: form-rail (intake form card), results-rail (GET STARTED button plus the rotating 12-row settlement panel), and centered (single-column H1). Real copy from the source was preserved per hero; only {{HERO_IMAGE_URL}} (all) and {{FORM_ACTION_URL}} (form-rail) are tokenized for per-deploy swap. CTA links /contact/ and /about-us/our-results/ are root-relative and left correct.
Generated via a Python script for consistency. All 20 unique source images were confirmed present in Images-WebP/ before writing. QA passed: balanced section/style tags, exactly one scoped prefix per file, full-bleed present, wp:html wrappers paired, 12 result rows plus keyframes in every results file, form name attributes and FORM_ACTION_URL present, and the registered symbol on "Bigger Share Guarantee" intact.
.sa-h, so multiple heroes can coexist on a page without style bleed.~/Documents/Design Elements - Current/a - Hero Blocks/)01-lexington-downtown-form-rail.html through 21-er-medical-treatment-results-rail.html (21 files), each final and deployable after the two token swaps.INDEX-21-heroes.md: maps every file to archetype, suggested target URL, and source image, plus drop-in instructions.Source file untouched: the original Hero Options (21 of them).html remains in the folder and in uploads.
Complete. All 21 plus the index are saved to the workspace folder. Nothing deployed to the live site; these are design-library assets awaiting use. No home page involvement.