Conversation
|
Caution Review failedPull request was closed or merged during review Note
|
| Cohort / File(s) | Summary |
|---|---|
Theme Color Documentation .github/reports/theme-colour-variables-google-doc.txt, .github/reports/theme-colour-variables.md, .github/tasks/task-list.md |
Added theme color palette reference files and a development task for Figma implementation checklist. |
Home Hero Section – JavaScript assets/js/gsap-effects.js |
Implemented GSAP-powered particle network effect with color parsing, particle system initialization, ResizeObserver-based resizing, pointer-responsive movement (when fine pointer available), and conditional reduced-motion support via gsap.matchMedia. |
Home Hero Section – Styling assets/css/gsap-animations.css, styles/sections/home-hero-section.json |
Added CSS for layered hero background, gradient orbs, canvas block, and responsive adjustments; fixed unclosed media query block. New theme JSON section configuration for core/group block styling. |
Home Hero Section – Registration & Pattern inc/gsap.php, patterns/home-hero.php |
Registered home-hero-section block style for core/group; updated hero pattern to render full-width group with centered heading and translated strings. |
Animation & Button Styling Refinements assets/css/animations.css |
Refactored button fill/outline/glow styles with new CSS custom properties for colors, delays, layout variables, and hover behavior; replaced fixed underline padding/thickness with customizable properties; consolidated motion variables and removed responsive media query for buttons. |
Button & Link Block Styles styles/blocks/buttons/button-glow-accent.json, styles/blocks/paragraphs/link-underline-accent.json |
Expanded glow button CSS variables (color, strength, outline, scale); added underline image gradient and layout properties for links. |
Heading Style Updates styles/blocks/headings/gradient-accent.json |
Switched gradient accent from accent-* to brand-* color preset; updated animation variables for gradient width, delay, and focus properties. |
Code Element Styling style.css |
Applied WordPress preset monospace font family and font size to code and pre elements. |
Front-Page Template templates/front-page.html |
Added new block-based template rendering hero pattern followed by constrained query loop for latest posts with pagination. |
Home Template Cleanup templates/home.html |
Removed header and footer template-part directives. |
Core Theme Configuration theme.json |
Added Roboto Mono font family; updated writingMode and fluid typography; added custom line-height and button-padding tokens; enabled useRootPaddingAwareAlignments; revised heading element styling and button variations with CSS blocks. |
Documentation CHANGELOG.md, inc/animations.php |
Updated changelog with hero section, theme configuration, and animation behavior changes; removed obsolete documentation comment. |
Sequence Diagram(s)
sequenceDiagram
participant Browser as Browser/DOM
participant Init as initHomeHeroSection()
participant GSAP as GSAP Ticker
participant Canvas as Canvas Element
participant ResizeObs as ResizeObserver
participant Pointer as Pointer Events
Browser->>Init: Detect .is-style-home-hero-section
Init->>Browser: Create/ensure background layers & canvas
Init->>ResizeObs: Initialize ResizeObserver
ResizeObs->>Canvas: Trigger resize & redraw
Init->>GSAP: gsap.matchMedia() check (prefers-reduced-motion, pointer: fine)
GSAP->>Canvas: Start animation ticker
Canvas->>Canvas: Draw particles & connections (loop)
alt Pointer Events Enabled
Pointer->>Canvas: onPointerMove (x, y)
Canvas->>Canvas: Update particle attraction to pointer
end
Browser->>Init: Component cleanup (teardown)
Init->>GSAP: Stop ticker
Init->>Pointer: Remove event listeners
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~60 minutes
Poem
🐰 A hero bounds forth with particles swirling,
Networks of light through the air come twirling!
Buttons glow soft, links underline bright,
Custom variables dance with responsive delight.
From theme.json's tokens to canvas so grand,
The homepage hero now takes its bold stand! ✨
🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 5.26% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title summarizes the main changes: adding GSAP-powered home hero animation and updating button styling with theme configuration adjustments. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
gsap-home-hero-animation
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 and usage tips.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive update to the theme's visual and interactive framework, most notably adding a GSAP-powered home hero section with a canvas-based particle network animation and a dedicated front-page template. The changes also include the registration of Roboto Mono, the implementation of fluid typography and root-padding-aware alignments in theme.json, and a refactor of button and link motion styles to utilize customizable CSS variables. Feedback focuses on ensuring mobile responsiveness for buttons where text wrapping was removed, improving interaction feel by addressing transition delays on hover, and updating the JavaScript color-parsing logic to support modern CSS Color Level 4 syntax.
| @@ -141,24 +140,43 @@ | |||
| white-space: nowrap; | |||
There was a problem hiding this comment.
The removal of the media query that previously set white-space: normal for smaller screens, combined with the global white-space: nowrap on line 140, will cause buttons with long text to overflow their containers on mobile devices. Consider restoring the responsive wrapping behavior.
white-space: normal;| .wp-element-button:hover, | ||
| .wp-block-button__link:hover { | ||
| transition-delay: 0s; | ||
| transition-delay: 80ms; |
There was a problem hiding this comment.
Adding a transition-delay of 80ms to the base button state may cause the interaction to feel slightly unresponsive on hover. Typically, delays are used for the 'exit' transition to maintain visual continuity, while the 'enter' transition should be immediate for tactile feedback.
| }; | ||
| } | ||
|
|
||
| const rgbMatch = trimmedValue.match( /^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)/i ); |
There was a problem hiding this comment.
The regular expression for parsing RGB colors does not account for the modern CSS Color Level 4 syntax (e.g., rgb(255 255 255 / 0.5)), which is increasingly common in WordPress block output. This may cause the parser to fail and fall back to the default blue color.
| const rgbMatch = trimmedValue.match( /^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)/i ); | |
| const rgbMatch = trimmedValue.match( /^rgba?\(\s*([0-9.%]+)[\s,]+([0-9.%]+)[\s,]+([0-9.%]+)(?:[\s,/]+([0-9.%]+))?\s*\)/i ); |
There was a problem hiding this comment.
Pull request overview
This PR extends the LightSpeed WordPress block theme with a GSAP-powered homepage hero background/effects, refreshed button/link/heading motion styles, and updated typography tokens (including new font presets).
Changes:
- Adds a new
front-page.htmltemplate and aHome Heropattern, wired to a GSAP-driven “Home Hero Section” Group style. - Introduces/updates GSAP effect bootstrapping plus supporting CSS for the hero network background and card spotlight behaviour.
- Refines global typography + button/link motion tokens via
theme.jsonand block style JSON definitions, and adds Roboto Mono for code styling.
Reviewed changes
Copilot reviewed 18 out of 21 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
theme.json |
Updates schema, typography presets/tokens, default element styles, and button variation variables. |
templates/home.html |
Removes the (previously minimal) home template. |
templates/front-page.html |
Adds a dedicated front-page template that includes the hero pattern plus a Query loop. |
styles/sections/home-hero-section.json |
Adds a Group block style definition stub for the hero section style. |
styles/blocks/paragraphs/link-underline-accent.json |
Expands CSS custom properties for the underline accent link style. |
styles/blocks/headings/gradient-accent.json |
Adjusts heading gradient accent styling to use brand palette variables. |
styles/blocks/buttons/button-glow-accent.json |
Expands CSS custom properties for the glow accent button style. |
style.css |
Applies the monospace preset to code/pre elements. |
patterns/home-hero.php |
Replaces the prior hero content with a minimal GSAP-backed hero section block pattern. |
inc/gsap.php |
Registers the home-hero-section block style for core/group. |
inc/animations.php |
Minor docblock adjustment around effect stylesheet definitions. |
CHANGELOG.md |
Adds/updates release notes to reflect GSAP hero, template, and token changes. |
assets/js/gsap-effects.js |
Adds the “Home Hero Section” network/canvas effect initialisation and teardown. |
assets/fonts/roboto-mono/roboto-mono-latin-wght-normal.woff2 |
Adds Roboto Mono Latin font asset. |
assets/fonts/roboto-mono/roboto-mono-latin-ext-wght-normal.woff2 |
Adds Roboto Mono Latin-ext font asset. |
assets/css/gsap-animations.css |
Adds CSS for the home hero section background/orbs/network canvas layering. |
assets/css/animations.css |
Refactors motion CSS for gradient headings, underline links, and button interactions. |
.github/tasks/task-list.md |
Adds a new dev task entry referencing an implementation checklist. |
.github/reports/theme-colour-variables.md |
Adds a generated report enumerating theme palette variables. |
.github/reports/theme-colour-variables-google-doc.txt |
Adds a text export variant of the theme palette variables report. |
| "fontSize": "var(--wp--preset--font-size--300)", | ||
| "fontWeight": "500", | ||
| "lineHeight": "var(--wp--custom--line-height--heading-default)", | ||
| "textDecoration": "uppercase" |
There was a problem hiding this comment.
textDecoration does not support the value uppercase (and won’t uppercase text). If the intent is uppercase H6 headings, this should be textTransform: "uppercase" (or apply uppercase via CSS) so the setting actually takes effect.
| "textDecoration": "uppercase" | |
| "textTransform": "uppercase" |
| <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} --> | ||
| <main class="wp-block-group"> | ||
| <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} --> | ||
| <div class="wp-block-query"> | ||
| <!-- wp:post-template --> | ||
| <!-- wp:group {"tagName":"article","style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} --> | ||
| <article class="wp-block-group"> | ||
| <!-- wp:post-title {"isLink":true} /--> |
There was a problem hiding this comment.
This template always renders a posts Query loop. That conflicts with the changelog/PR description stating the hero should render before the editable front-page content when show_on_front = page.
To support both modes, consider making front-page.html render core/post-content (for a static front page), and add/restore templates/home.html for the posts index variant that includes the hero + Query loop.
|
|
||
| ### Added | ||
|
|
||
| - Registered the theme font-family presets as `body`, `heading`, and `monospace`, and applied the `monospace` preset to code elements in `theme.json`. |
There was a problem hiding this comment.
This changelog entry says the monospace preset was applied to code elements in theme.json, but the change is actually in style.css (and there are no code/pre element styles in theme.json). Suggest rewording to match the implementation so release notes are accurate.
| - Registered the theme font-family presets as `body`, `heading`, and `monospace`, and applied the `monospace` preset to code elements in `theme.json`. | |
| - Registered the theme font-family presets as `body`, `heading`, and `monospace`, and applied the `monospace` preset to code elements in `style.css`. |
| @@ -9,15 +9,15 @@ | |||
| "description": "Animated gradient text for headings using the LightSpeed Theme accent presets.", | |||
There was a problem hiding this comment.
The description still says this gradient uses the theme “accent” presets, but the styles now reference brand-* colours. Update the description so the editor UI matches what the style actually does.
| "description": "Animated gradient text for headings using the LightSpeed Theme accent presets.", | |
| "description": "Animated gradient text for headings using the LightSpeed Theme brand colour presets.", |
| # Theme Colour Variables | ||
|
|
||
| Extracted from `theme.json` `settings.color.palette`. | ||
|
|
||
| - Name: Base<br> | ||
| Slug: base<br> |
There was a problem hiding this comment.
Per .github/reports/README.md, report files should use ISO date-prefixed filenames (YYYY-MM-DD-description.md). Consider renaming this report accordingly so it follows the repo’s report conventions.
| Theme Colour Variables | ||
|
|
||
| - Base | ||
| Slug: base | ||
| Hex: #F8F8F8 | ||
| Variable: var(--wp--preset--color--base) |
There was a problem hiding this comment.
Per .github/reports/README.md, report files should use ISO date-prefixed filenames (YYYY-MM-DD-description.*). Consider renaming this file accordingly so it follows the repo’s report conventions.
|
|
||
| ## Development | ||
|
|
||
| - [ ] Execute the detailed Figma Make implementation plan in `.github/tasks/2026-04-07-figma-make-implementation-checklist.md` |
There was a problem hiding this comment.
This task references .github/tasks/2026-04-07-figma-make-implementation-checklist.md, but that file isn’t present in the repo. Either add the checklist file or update the link so it points to an existing task document.
| - [ ] Execute the detailed Figma Make implementation plan in `.github/tasks/2026-04-07-figma-make-implementation-checklist.md` | |
| - [ ] Execute the detailed Figma Make implementation plan |
krugazul
left a comment
krugazul
left a comment
There was a problem hiding this comment.
@ZaredRogers ive run through the files changes and i have approved.
General Pull Request
Linked issues
Closes #
Changelog
Added
Card SpotlightGroup block style for editor use.body,heading, andmonospace.Changed
Fixed
show_on_front = postsrender the posts query beneath the hero instead of an empty static-page content block.Removed
Risk Assessment
Risk Level: Medium
Potential Impact:
Mitigation Steps:
How to Test
Prerequisites
gsap-home-hero-animationbranch ofls-theme.show_on_front = pageshow_on_front = postsprefers-reduced-motion.Test Steps
Card Spotlightstyle to a Group block and confirm the effect appears correctly on the front end and degrades sensibly where pointer tracking is unavailable.Expected Results
Edge Cases to Verify
Checklist (Global DoD / PR)
References
Summary by CodeRabbit
Release Notes
New Features
Style Updates
Documentation