Build Work Archive template and all 6 sections (LS-1616) - #15
Merged
brandonmarshal merged 6 commits intoJul 29, 2026
Merged
Conversation
- Add 4 reusable, individually insertable card patterns: project card, discuss-project checklist, engagement stat, next-steps button - Bind the project card to real Portfolio post data (LS-1617): title, excerpt, taxonomy terms, and permalink via core/post-title, core/post-excerpt, core/post-terms, and core/read-more - Add matching section/block styles for all 4 components, built entirely from existing adaptive tokens — no new theme.json/dark.json tokens needed - Keep computed colour values (tints, translucency) in external style files only, never inline in pattern block attributes, to avoid editor "invalid content" errors - Add hover-lift CSS for the two interactive cards, and extend is-style-link-arrow-accent to support core/read-more
- Add the Hero section pattern (patterns/hero/work-hero.php): breadcrumb trail, eyebrow badge, heading, description, CTA buttons, and a new Work Capability List card component - Add matching section/block styles: card-work-capability-list, card-work-capability-row, work-hero background, and 3 tinted icon-well styles (brand/commerce/accent) - Add one new token, icon.commerce (warning-foreground), for the WooCommerce icon tint — no orange family exists in the palette - Scaffold a new "Work Archive" custom page template (templates/page-work-archive.html + patterns/template-work-archive.php, registered in theme.json), so sections can be assigned and tested on any page as they're built - Fix icons rendering empty across 3 patterns: outermost/icon-block needs the SVG embedded in its saved markup, not just an iconName attribute — replaced with real SVGs sourced from the official Phosphor package - Fix a duplicate arrow on the "Book a consultation" button (the button style already adds one via CSS) - Fix content collapsing to 800px instead of the theme's wide size: constrained layouts require an explicit alignwide/alignfull class, which the Yoast breadcrumbs block can't carry via align — forced it via className instead - Fix an invisible badge dot icon caused by a viewBox/circle size mismatch at small render sizes
- Categories section: eyebrow/heading/intro row + 3 category cards with a new compact `is-style-card-work-category` style - Selected Projects section: eyebrow/heading/intro, a platform filter using ls-plugin/taxonomy-filter (bound to project-group), and a 3-column Query Loop rendering the Work Project Card pattern - Rewired work-project-card.php bindings from the dead ls_plugin_portfolio_* taxonomy names to the real ones (project-group/project-tag) following the ls-plugin CPT/taxonomy rename - Added card.platform.wordpress/woocommerce tokens (real light/dark pairs) and a render_block hook (portfolio-card-colors.php) to swap each card's banner/badge per post, since a Query Loop can't set that statically - Fixed multi-term badge wrapping (core/post-terms forces display:block on links by default, orphaning the separator between terms) - Set enhancedPagination on the Query block so the taxonomy filter navigates client-side instead of reloading the page - Explicit fontSize overrides across both sections to match Figma instead of relying on the theme's default type scale
The new card-work-* style variations were scoped to a single page by name, breaking the existing card-feature/card-services/card-spotlight convention of naming styles after their shape rather than where they're used. Renamed all 11 to purpose-based slugs (card-category, card-case-study, card-chip, card-divider-top/bottom, card-list-shell, card-link-row, card-checklist, stat-segment, card-banner-tint(-woocommerce)) and updated every reference across patterns, inc/animations.php, inc/portfolio-card-colors.php, and the compiled animations.css so they read as reusable theme styles rather than Work-archive-only assets.
…archive (LS-1616) - Built the 3 remaining Work archive sections by reusing existing card patterns/styles (stat-segment, card-checklist, card-link-row, tick-accent) and creating only what didn't already exist: a top+bottom row-divider style, a pill-shaped "Secondary" button pair reusing existing fill/outline color tokens, and the two new section patterns themselves - Fixed mobile responsiveness using WordPress's own native mechanisms instead of custom media queries — core/columns' built-in stacking, core/group's minimumColumnWidth grid reflow, and core/navigation's built-in overlay breakpoint — registering two new breakpoints in theme.json (nav-toggle, columns-stack) that mirror WP core's own hardcoded values exactly - Fixed inconsistent heading sizes (24-48px) across all archive sections to a single 32px design target - Fixed the "Where to go next" grid's permanently-highlighted tile, which was meant to be a hover state rather than a static "current page" indicator - Fixed card-divider-both's blockTypes registration, left pointing at core/group after being converted to a wp:columns block, which was silently dropping its CSS with no error - Merged 5 byte-identical section-band styles into one shared content-band style, reused by all five Work archive sections; verified against live rendered output, not just source files
brandonmarshal
added
area:theme
|
Note
|
| Layer / File(s) | Summary |
|---|---|
Theme tokens and block styles theme.json, styles/dark.json, styles/blocks/..., styles/sections/..., src/scss/abstracts/mixins/_breakpoints-theme.scss, inc/animations.php |
Adds Work archive breakpoints, platform color tokens, reusable card/button/icon-well/badge styles, and section style definitions. |
Archive template and content patterns templates/page-work-archive.html, patterns/template-work-archive.php, patterns/hero/*, patterns/sections/*, patterns/cards/*, patterns/content/* |
Composes the Work archive from hero, category, project, statistics, CTA, and related-route patterns with localized content. |
Project taxonomy rendering inc/portfolio-card-colors.php, patterns/sections/work-selected-projects.php, patterns/cards/work-project-card.php, src/scss/animations/_taxonomy-filter.scss |
Adds a project Query Loop with taxonomy filtering and conditionally applies WooCommerce banner and badge classes during block rendering. |
Responsive and interactive styling src/scss/animations/*, assets/css/animations.css, functions.php |
Adds card and button hover states, reduced-motion handling, responsive layout changes, mobile header behavior, taxonomy-filter styling, and portfolio color integration loading. |
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant WorkArchiveTemplate
participant WordPressPatterns
participant QueryLoop
participant TaxonomyFilter
Browser->>WorkArchiveTemplate: Request Work archive page
WorkArchiveTemplate->>WordPressPatterns: Render ordered archive patterns
WordPressPatterns->>QueryLoop: Render project posts with work-project-card
TaxonomyFilter->>QueryLoop: Apply project-group filter
QueryLoop->>WordPressPatterns: Return project cards and pagination
WordPressPatterns->>Browser: Render archive sections and styled cards
Suggested labels: comp:block-templates, status:needs-review
Suggested reviewers: zaredrogers
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title accurately summarizes the main change: building the Work Archive template and its six sections. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
- Fix failing CI checks
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feature/ls-1616-rebuild-portfolio-blog-archive-templates
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
|
Tick the box to add this pull request to the merge queue (same as
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@patterns/cards/work-capability-list.php`:
- Around line 31-32: Update the capability headings in the work-capability list,
including the headings around “WordPress Work” and the corresponding headings at
the other referenced sections, from H4 to H2 so they follow the archive H1
hierarchy; preserve their existing styling and translated text.
In `@patterns/cards/work-engagement-stat.php`:
- Around line 16-17: Update the stat segment wrapper in the pattern’s wp:group
markup to use a neutral div rather than an article, since the segment has no
heading. Preserve the existing classes, styles, layout attributes, and child
content.
In `@patterns/section-stats-grid.php`:
- Around line 114-115: Add the existing is-style-stat-segment class to the final
statistic card’s wp-block-group element, matching the sibling cards. Preserve
its current layout and spacing attributes without duplicating styles.
In `@patterns/sections/work-categories.php`:
- Around line 72-73: Update the category CTA links in the relevant work-category
sections, including the links near “See WordPress work,” “See WooCommerce work,”
and “See Design-System work,” so each href targets its corresponding
taxonomy-filtered work destination rather than the shared /work/ URL; preserve
the existing category-specific link text.
In `@patterns/sections/work-related-routes.php`:
- Around line 43-180: Make each of the seven article cards in
patterns/sections/work-related-routes.php navigable by wrapping its content in
an appropriate destination link while preserving the existing card styling and
accessible keyboard focus. Also update the reusable card in
patterns/cards/work-next-steps-card.php to link to the Case Studies destination.
In `@patterns/sections/work-selected-projects.php`:
- Line 58: Make the block-attribute labels translatable using the ls-theme text
domain and JSON-safe encoding: update allItemsText in
patterns/sections/work-selected-projects.php:58-58, prefix in
patterns/cards/work-project-card.php:23-23, and read-more content in
patterns/cards/work-project-card.php:44-44. Use the appropriate PHP translation
functions (__(), esc_html__(), or esc_attr__()) for each value before embedding
it in the block JSON.
In `@src/scss/animations/_button-motion.scss`:
- Around line 250-254: Update the secondary outline button hover/focus-visible
rule in _button-motion.scss to also apply the existing outline hover border
token alongside its background and text tokens. Regenerate
assets/css/animations.css so the compiled animation styles include the same
border behavior.
In `@src/scss/animations/_card-motion.scss`:
- Around line 207-220: Resolve declaration-spacing lint failures by adding the
required blank line after the surface-card mixin invocation in
src/scss/animations/_card-motion.scss lines 207-220 and between custom-property
declarations and border-color at lines 523-534. Regenerate
assets/css/animations.css so the corresponding generated sections at lines
381-395 and 633-640 receive the corrected spacing; do not hand-edit the
generated CSS.
- Around line 642-655: Replace deprecated word-break: break-word with normal
word breaking plus overflow-wrap: anywhere in the shared badge rule and the
registered Brand badge, WooCommerce badge, and tag-pill CSS in
styles/blocks/post-terms/badge-brand.json:20,
styles/blocks/post-terms/badge-woocommerce.json:20, and
styles/blocks/post-terms/tag-pills.json:19. Regenerate
assets/css/animations.css:735-748 from the corrected Sass source so the compiled
asset matches.
In `@src/scss/animations/_header-motion.scss`:
- Around line 16-20: Update the mobile navigation behavior around
.site-header__actions so the search remains discoverable below the nav-toggle
breakpoint. Add or preserve an equivalent search control within the
collapsed/header menu, while keeping the existing mobile hiding behavior for
other header actions.
In `@styles/blocks/post-terms/tag-pills.json`:
- Line 9: Update the description in styles/blocks/post-terms/tag-pills.json at
line 9 to document the project-tag taxonomy rather than the Portfolio Service
taxonomy. Update CHANGELOG.md at line 15 to accurately document the Work Project
Card bindings: tag-pills uses project-tag and its badge uses project-group.
In `@styles/sections/cards/card-case-study.json`:
- Around line 1-27: Add PHP block-style registration for the slugs
card-case-study, card-list-shell, card-divider-bottom, card-divider-top,
card-checklist, card-chip, content-band, stat-segment, work-hero on Group and
card-divider-both on Columns, using the existing block-style registration
mechanism. The JSON sites styles/sections/cards/card-case-study.json (1-27),
styles/sections/cards/card-category.json (1-32),
styles/sections/cards/card-checklist.json (1-31),
styles/sections/cards/card-chip.json (1-27),
styles/sections/cards/card-divider-both.json (1-14),
styles/sections/cards/card-divider-bottom.json (1-19),
styles/sections/cards/card-divider-top.json (1-20),
styles/sections/cards/card-link-row.json (1-32),
styles/sections/cards/card-list-shell.json (1-32),
styles/sections/cards/stat-segment.json (1-26),
styles/sections/content/content-band.json (1-24), and
styles/sections/hero/work-hero.json (1-22) require no direct changes; their
slugs should be made available through the PHP registration.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: b2ba19f0-5a01-4409-8c1b-35d14e929acd
📒 Files selected for processing (50)
CHANGELOG.mdassets/css/animations.cssfunctions.phpinc/animations.phpinc/portfolio-card-colors.phppatterns/cards/work-capability-list.phppatterns/cards/work-discuss-project-list.phppatterns/cards/work-engagement-stat.phppatterns/cards/work-next-steps-card.phppatterns/cards/work-project-card.phppatterns/content/eyebrow-badge.phppatterns/hero/work-hero.phppatterns/section-stats-grid.phppatterns/sections/work-categories.phppatterns/sections/work-discuss-project.phppatterns/sections/work-related-routes.phppatterns/sections/work-selected-projects.phppatterns/template-work-archive.phpsrc/scss/abstracts/mixins/_breakpoints-theme.scsssrc/scss/animations.scsssrc/scss/animations/_button-motion.scsssrc/scss/animations/_card-motion.scsssrc/scss/animations/_header-motion.scsssrc/scss/animations/_taxonomy-filter.scssstyles/blocks/buttons/button-secondary-outline.jsonstyles/blocks/buttons/button-secondary.jsonstyles/blocks/groups/icon-well-accent.jsonstyles/blocks/groups/icon-well-brand.jsonstyles/blocks/groups/icon-well-commerce.jsonstyles/blocks/paragraphs/link-arrow-accent.jsonstyles/blocks/post-terms/badge-brand.jsonstyles/blocks/post-terms/badge-woocommerce.jsonstyles/blocks/post-terms/tag-pills.jsonstyles/dark.jsonstyles/sections/cards/card-banner-tint-woocommerce.jsonstyles/sections/cards/card-banner-tint.jsonstyles/sections/cards/card-case-study.jsonstyles/sections/cards/card-category.jsonstyles/sections/cards/card-checklist.jsonstyles/sections/cards/card-chip.jsonstyles/sections/cards/card-divider-both.jsonstyles/sections/cards/card-divider-bottom.jsonstyles/sections/cards/card-divider-top.jsonstyles/sections/cards/card-link-row.jsonstyles/sections/cards/card-list-shell.jsonstyles/sections/cards/stat-segment.jsonstyles/sections/content/content-band.jsonstyles/sections/hero/work-hero.jsontemplates/page-work-archive.htmltheme.json
- Fix heading hierarchy: bump the 3 capability-list headings (WordPress
Work, WooCommerce Work, Design-System Work) from H4 to H2, since they
were the first sub-headings after the archive's H1 with no H2/H3 in
between
- Fix category CTA links: "See WordPress work"/"See WooCommerce work" now
deep-link to their taxonomy-filtered destination
(?filter-0-project-group=<slug>) instead of all three pointing at the
same unfiltered /work/ URL; Design-System left unfiltered since no
matching project-group term exists yet
- Fix related-route cards having no actual links: all 8 "Where to go
next" cards rendered only <article> + text + an SVG arrow, with zero
<a href> anywhere — not navigable, not keyboard-focusable despite
looking clickable. Added a real link per card via a stretched-link
pattern (visible <a> wraps the title, CSS extends the click target to
the full card)
- Fix untranslated block-attribute strings: allItemsText, prefix, and
read-more content now run through wp_json_encode( __(...) ), matching
the existing header.php/template-search.php convention for
translatable JSON block attributes
- Fix deprecated word-break: break-word (4 locations): replaced with
overflow-wrap: anywhere in the shared badge rule plus the three
registered badge/tag-pill styles
- Fix stale documentation: tag-pills.json described the old "Portfolio
Service taxonomy" instead of project-tag; CHANGELOG.md still named the
pre-rename ls_plugin_portfolio_* taxonomies
- Fix mobile header: only the "Start a project" CTA hides below the
nav-toggle breakpoint now, not search — search has no other entry
point on mobile since the nav overlay drawer doesn't include it
- Fix the 4th stat card ("Tokens") duplicating is-style-stat-segment's
spacing/colour values instead of reusing the class; re-applied the
shared class and suppressed its trailing divider with a :last-child
rule instead, so the design's 3-divider intent (not 4) is preserved
- Fix button-secondary-outline's hover state changing background/text
but not border-color; reused the existing background-hover token,
since button.outline has no dedicated border-hover token to point at
- Fix button-secondary-outline rendering a solid near-black background
at rest — it was pointing at button.outline.background
(surface-400 = #12121A, a dark-mode surface colour) on a light
section; set to transparent instead, matching an existing literal-
transparent precedent already used elsewhere in the theme
Verified: npm run build:css, lint:json, schema:validate, security:scan,
and PHP syntax lint all pass; every fix re-checked directly against the
live rendered page/CSS output, not just source.
ZaredRogers
approved these changes
Jul 29, 2026
ZaredRogers
left a comment
ZaredRogers
left a comment
Contributor
There was a problem hiding this comment.
This looks good @brandonmarshal
brandonmarshal
deleted the
feature/ls-1616-rebuild-portfolio-blog-archive-templates
branch
July 29, 2026 06:54
This was referenced Aug 3, 2026
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
2 participants
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.
Summary
core/post-title,core/post-excerpt,core/post-terms, andcore/read-more.templates/page-work-archive.html+patterns/template-work-archive.php) so sections could be assigned and tested on any page as they were built.ls-plugin/taxonomy-filter(bound toproject-group) with a 3-column Query Loop, and rewires the project card's block bindings from the oldls_plugin_portfolio_*taxonomy names to the real ones following thels-pluginCPT/taxonomy rename.card-work-*style variations to generic, purpose-based names (card-feature,card-chip,stat-segment, etc.) — the original names were scoped to this one page, breaking the theme's existing naming convention.card-divider-both) and a pill-shaped "Secondary" button pair reusing existing colour tokens.core/columns' built-in stacking,core/group'sminimumColumnWidthgrid reflow, andcore/navigation's built-in overlay breakpoint for the header — registering two breakpoints intheme.json(nav-toggle,columns-stack) that mirror WP core's own hardcoded values exactly.card-divider-bothblockTypesregistration bug that was silently dropping its CSS.content-bandstyle used by all five Work archive sections.Closes LS-1616
Test plan
Static checks:
npm run lint:json— passednpm run schema:validate— passednpm run security:scan— passednpm run build:csscompiles cleanly, new CSS present in compiled outputVerified live on a local WordPress instance:
core/navigationoverlay breakpoint (600px); the stats row and the related-routes grid both use WP's nativecore/columns/minimumColumnWidthreflow and stack correctly instead of overflowing off-screencard-divider-bothrow/column dividers render correctly (top/bottom band + full-height vertical dividers) — verified directly against the live rendered CSS output, not just source, after catching theblockTypesregistration bugcontent-bandstyle — reconfirmed all 5 sections still render their content and background/padding correctly afterward🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements