Repository navigation
Fix: Spotlight BugHerd batch fixes (tickets #7–#17) - #22
Merged
Merged
Conversation
Add blockGap: spacing--10 to the newsletter and republish-stories icon+text groups in the header, which previously fell back to the larger global default blockGap. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The collapsed search input (core/search, isSearchFieldHidden) had no styling of its own and stayed in normal flex flow, so opening it pushed the "Dashboards" button around and broke onto two lines. Adds a header-search.css component styled after ati-theme-2026's is-style-header-search: the input opens out of flow via position, sized per breakpoint. Above 1000px it slides out to the left of the icon, tiered narrower at each step to stay clear of the site logo as the available gap shrinks. At 1000px and below that gap is too tight for a usable inline input, so it instead drops open as a full-width bar below the whole header (utility row + logo + nav), anchored to .site-header so it clears both. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bump the "is-style-card-links" category badge (e.g. "HIV/AIDS") from fontSize 100 to 200 everywhere it appears on story cards, matching the size already used on the single-post article header. Requested by Zared despite Figma showing 100, for legibility. Applied consistently across all 8 occurrences so the badge doesn't render at two different sizes depending on which listing it's in: story-card-editorial, story-card, and project-entry patterns, plus the archive, home, and front-page templates (which embed the same markup directly rather than via wp:pattern). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…#12) Sections that are already align:"wide" (auto-centered to theme.json's 1320px wideSize) also had their own manual left/right padding on top of that centering. Below 1320px that padding was necessary — align:wide alone provides no edge protection until the width cap engages — but above 1320px it stacked on top of the centering and pushed content further in than sibling sections without that extra padding (e.g. the header, or the archive hero, which happened to look right only because of WordPress core's unrelated `.wp-block-group.has-background` default padding fallback). Standardizes on the one pattern that's actually safe at every width (already used by parts/header.html): real spacing--20 padding on the outer, unconstrained container (now each template's <main>), with the align:"wide" sections inside it relying purely on the width cap for centering, no padding of their own. Full-bleed background sections (archive-listing-header, archive-listing-header-archive) get explicit spacing--20 padding instead of relying on the has-background accident. dashboard-promo.php already did this correctly; trust-bar.html is intentionally left out of scope, it matches Figma and has no reported issue. page-full-width had a DB "custom" override (from an earlier Site Editor save) patched separately via REST so the fix actually renders. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The group wrapping each stat's number + label (e.g. "6.1m" / "On Antiretroviral Treatment") had no blockGap of its own, so it inherited the theme's global default (spacing--30) — too loose for a tightly related number/caption pair. Sets blockGap: spacing--5 explicitly on all 4 occurrences (HIV and TB cards, 2 stats each). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The homepage hero query picked the newest post by date automatically, with no editorial control over what's featured. Adds "sticky":"only" so it instead pulls the post(s) editors explicitly pin via WordPress's native "Stick to the top of the blog" option, keeping order:desc/ orderBy:date as the tie-breaker if more than one post is stuck. Verified the filter is genuine (not coincidentally showing the newest post already) by temporarily sticking an older post and confirming the hero switched to it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Footer nav links ("Latest News", "Data Desk", "Republish", "Contact
us") matched the header's main nav styling (fontWeight 500, fontSize
300/Small). Ticket asked for a thinner weight (400) and smaller size
(200/Base) to differentiate them from the main navigation.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Figma (node 234:6734) shows a subtitle under the "Contact us" H1 that
was missing on the live page. page-intro-banner.php itself deliberately
has no subtitle (per Zared's 2026-09-04 "no intro copy under the title"
note) and is shared by every page on the default page.html template, so
the fix couldn't touch that file without reintroducing copy on pages
that don't want it — confirmed core/post-excerpt wouldn't help either,
since get_the_excerpt() falls back to an auto-trimmed content snippet
rather than rendering nothing when a page has no manual excerpt.
Adds a Contact-us-only variant instead:
- patterns/page-intro-banner-contact-us.php: near-identical copy of
page-intro-banner.php with the subtitle paragraph added (fontSize
400/neutral-300, matching Figma exactly). Inserter:false, same
precedent as spotlight-badge.php, so it can't be accidentally
inserted into an unrelated page.
- templates/page-contact-us.html: picked up automatically by
WordPress's page-{slug}.html template hierarchy for the "contact-us"
page (verified against wp-includes/template.php's own hierarchy
order) — no manual template assignment needed, and no other page is
affected since they still resolve to the generic page.html.
Spacing needed no changes — blockGap:30 between title/subtitle and the
banner's padding-bottom:100 already matched Figma's measured gaps
exactly (verified via getBoundingClientRect in the browser).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
templates/search.html rendered raw, unstyled core blocks (default blue links, no images, no card treatment, huge unstyled gaps between results) instead of reusing any of the theme's actual design. Rebuilds it out of components already proven elsewhere: - Header row: same styled search pill (border-radius--500, icon, button-inside) as archive-listing-header's, plus a properly sized/ colored query-title. - Results: same story-card-editorial markup used on archive.html (featured image, category badge, title, excerpt, author/date row). - Pagination: same post-listing-pagination pill style as archive.html. - No-results state: centered, readable copy instead of a bare paragraph. Extends archive-listing-header.css's search selectors to also match .post-listing-header instead of duplicating the CSS, and adds a max-width:100% safeguard — wp:search's "width" attribute is a fixed px value with no responsive fallback, which overflowed narrow viewports before this (affects both search.html and archive-listing-header's own search box). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The H1 in every page-intro-banner/archive-listing-header variant had no explicit fontWeight, so it rendered at the browser's UA-stylesheet bold default (700) on Libre Baskerville's 400-700 variable range — heavier than intended. Adds fontWeight: var(--wp--custom--font-weight --semi-bold) (the theme's own 600 token, not a bare number) to: - patterns/page-intro-banner.php (all default pages) - patterns/page-intro-banner-contact-us.php (Contact Us variant, #16) - patterns/archive-listing-header-archive.php (category/tag archives) - patterns/archive-listing-header.php (home.html's "Latest" header) Scope grew from the ticket's single Contact Us pin to every page-hero H1 after confirming with Jose, since they all shared the same unstyled-weight gap. Also fixed a DB-only issue this surfaced: templates/page-full-width.html has a DB override whose saved content had page-intro-banner fully detached (inlined raw blocks instead of a live wp:pattern reference), so the pattern-file fix alone didn't reach /dashboards/, /hiv-dashboard/, or /tb-dashboard/ — patched separately via REST, no git change needed for that part. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adopts the review-behavior and tooling additions from ls-theme's CodeRabbit config that make sense for this repo too: assertive review profile, incremental re-review on push, request_changes_workflow, walkthrough/linked-issue presentation options, path_filters, finishing touches (autofix/docstrings/unit tests), eslint/markdownlint/gitleaks/ trufflehog tooling, and a knowledge_base pointing at AGENTS.md with auto-learning enabled. Also extends auto_review.base_branches to feature/.* and fix/.* so CodeRabbit reviews PRs opened against those branches too, not just main/develop. Keeps this repo's own Spotlight-specific path_instructions and review_checklist wording (client theme, not a starter template) and its recursive path globs (patterns/**/*.php, templates/**/*.html, parts/**/*.html), which are already more thorough than ls-theme's single-level globs. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Merged
4 tasks done
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes 11 style/content/behavior issues reported via BugHerd on the Spotlight project (spotlightnsp.lightspeedwp.dev), covering the header, the search experience, category archive listings, sitewide horizontal spacing consistency, the homepage dashboard promo, hero story selection, footer navigation, the Contact Us page, and page-hero heading weight — plus an additional search-results-page redesign requested mid-batch. Two tickets (#9, #11) were also resolved but live entirely in page/template content in the database, not in this repo — see Deployment Notes for manual staging replication.
Changes
blockGap: spacing--10between icon and text on both items, which previously fell back to the much larger global default.assets/css/header-search.css. Above 1000px it slides open beside the icon (tiered width per breakpoint); at 1000px and below it drops as a full-width bar below the header. Fixes it overlapping the logo, main nav, and "Dashboards" button in every state, including a mobile-width overflow bug found along the way.is-style-card-links, e.g. "HIV/AIDS") bumped fromfontSize--100tofontSize--200across all 8 occurrences (3 patterns + 5 template instances), matching the size already used on single-post pages.align:"wide"sections that were double-padding on top of the width-cap centering (only visible above 1320px viewports, so easy to miss). Real padding moved onto each template's own<main>, mirroring the pattern already used by the header. Touches every template in the theme.blockGaptospacing--5on all 4 pairs."sticky":"only") instead of always auto-showing the newest post by date, giving editors control over what's featured.fontWeight:500/fontSize:300to400/200, to read as secondary to the main header navigation (ticket mislabeled "hero navigation," confirmed against the pinned element that it's the footer).page-intro-banner-contact-uspattern +page-contact-us.htmltemplate (auto-picked by WordPress'spage-{slug}template hierarchy), so no other page using the shared banner picks up Contact-Us-specific copy.semi-boldtoken (600), applied consistently to every page-hero variant: default pages, Contact Us, category/tag archives, andhome.html's header.templates/search.htmlto reuse the site's existingstory-card-editorialcard, styled search pill, and pagination components instead of rendering raw/unstyled core blocks. Fixed a related mobile-overflow bug in the shared search-pill CSS along the way.Files Modified
Templates:
templates/archive.html,front-page.html,home.html,index.html,page.html,page-full-width.html,single.html,404.html,search.htmlNew templates:
templates/page-contact-us.htmlPatterns:
patterns/archive-listing-header.php,archive-listing-header-archive.php,dashboard-promo.php,hero-lead-story.php,page-intro-banner.php,project-entry.php,related-coverage.php,story-card.php,story-card-editorial.phpNew patterns:
patterns/page-intro-banner-contact-us.phpTemplate parts:
parts/header.html,parts/footer.htmlAssets:
assets/css/archive-listing-header.cssNew assets:
assets/css/header-search.cssPHP:
functions.php(new stylesheet enqueue)Key Improvements
story-card-editorial, the search pill styling) instead of introducing new one-off valuesgetBoundingClientRect/getComputedStylein Playwright), not just visual review, for the alignment and spacing fixespage.htmltemplate picked it upRelated Issues
BugHerd project: Spotlight (https://www.bugherd.com/projects/540664/)
Closes: #7, #8, #9, #10, #11, #12, #13, #14, #15, #16, #17
(Ticket links:
https://www.bugherd.com/projects/540664/tasks/<number>)Testing
npm run lint,npm run schema:validate,npm run theme:validate,npm run patterns:escape,npm run security:scan— passcomposer run lint:php,composer run phpcs— pass (4 pre-existing warnings infunctions.php, unrelated to this batch)Deployment Notes
/dashboards/page's content: remove the redundant padding wrapper arounddashboard-promo, and tightenblockGapon its 4 stat pairs.hiv-dashboard/tb-dashboardpages: set Template to "Full Width Page," removealign:fullfrom the content wrapper, addspacing--60top/bottom padding.page-full-widthtemplate is also DB-customized: its inlinedpage-intro-bannercopy needs the samefontWeightfix as the pattern file (checksourcevia the templates REST endpoint first — may not apply if staging's copy isn't customized).No other breaking changes — this PR is theme templates/patterns/CSS only, no build step required.
Checklist
develop)npm run lint,npm run theme:validate, and the full AGENTS.md validation suite pass