Add social sharing, FAQ pattern with accordion, and icon-block audit (LS-1207)#12
Conversation
…(LS-1207) Add the Social Sharing Block after post content on the single-post template, and introduce a reusable FAQ section pattern using Yoast SEO's native yoast/faq-block. Style the FAQ block as an accessible accordion (card look, animated marker, keyboard/ARIA support) since Yoast ships it unstyled by design.
brandonmarshal
added
area:theme
|
Warning Review limit reached
Next review available in: 7 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
Note
|
| Layer / File(s) | Summary |
|---|---|
FAQ markup and presentation patterns/section-faq.php, src/scss/animations/_faq-motion.scss, assets/css/animations.css |
Adds a reusable FAQ pattern and styles for layout, open states, chevron rotation, answer transitions, and reduced motion. |
FAQ interaction behavior assets/js/faq-accordion.js |
Adds ARIA attributes, answer IDs, click handling, keyboard activation, and accordion state synchronization. |
Conditional script loading inc/animations.php |
Enqueues the deferred accordion script only when the Yoast FAQ block is present. |
Single-template social sharing
| Layer / File(s) | Summary |
|---|---|
Social-sharing section patterns/template-single.php |
Adds a styled Share section with LinkedIn, Facebook, X, and WhatsApp links after post content. |
Estimated code review effort: 3 (Moderate) | ~20 minutes
Sequence Diagram(s)
sequenceDiagram
participant WordPress
participant FAQPattern
participant FAQScript
participant FAQUI
WordPress->>FAQPattern: Render Yoast FAQ block
WordPress->>FAQScript: Enqueue deferred script when block exists
FAQScript->>FAQUI: Initialize FAQ questions and answers
FAQUI->>FAQUI: Toggle open state on click or keyboard activation
Suggested labels: area:seo, comp:block-templates, status:needs-review
🚥 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 clearly summarizes the main additions: social sharing, the FAQ accordion pattern, and the icon-block audit. |
| 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
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feature/LS-1207-content-blocks-implementation
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
|
![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 new accordion feature for Yoast FAQ blocks, including SCSS styles, a JavaScript toggle script, a reusable FAQ pattern, and social sharing links in the single post template. The review feedback focuses on improving robustness and accessibility: implementing progressive enhancement by scoping accordion styles under a JS-applied ".is-accordion" class, replacing the unreliable "has_block" check with a "render_block" filter to ensure the script enqueues correctly in modern block themes, and making the JavaScript initialization idempotent while dynamically setting the initial "aria-expanded" state.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
patterns/template-single.php (1)
2-9: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winFix the PHPCS-blocking file header.
Add an
@packagetag to the pattern file comment; PHPCS currently fails with “Missing@packagetag in file comment.”Proposed fix
/** * Title: Template: Single * Slug: ls-theme/template-single + * `@package` ls-theme * Categories: templateAs per path instructions,
patterns/*.phpfiles require correct Pattern registration header comments.🤖 Prompt for 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. In `@patterns/template-single.php` around lines 2 - 9, Add the required `@package` tag to the file-level docblock in the template-single pattern header, preserving the existing pattern registration metadata and description so PHPCS recognizes the file comment as valid.Sources: Path instructions, Pipeline failures
🧹 Nitpick comments (1)
assets/js/faq-accordion.js (1)
22-22: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueInitialize
aria-expandedbased on the section's actual state.Currently,
aria-expandedis hardcoded to'false'on initialization. If a section is ever rendered with theis-openclass by default (e.g., via backend logic or a modified block pattern), the ARIA state will be out of sync. Deriving the initial state from the class list ensures robustness.♻️ Proposed refactor
- question.setAttribute( 'aria-expanded', 'false' ); + const isOpen = section.classList.contains( 'is-open' ); + question.setAttribute( 'aria-expanded', isOpen ? 'true' : 'false' );🤖 Prompt for 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. In `@assets/js/faq-accordion.js` at line 22, Update the FAQ accordion initialization near question.setAttribute so aria-expanded is derived from whether the associated section currently has the is-open class, setting it to true for open sections and false otherwise instead of hardcoding false.
🤖 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/section-faq.php`:
- Around line 1-13: Add the required `@package` ls-theme tag to the file-level
docblock in the section-faq pattern registration header, preserving the existing
metadata and formatting.
---
Outside diff comments:
In `@patterns/template-single.php`:
- Around line 2-9: Add the required `@package` tag to the file-level docblock in
the template-single pattern header, preserving the existing pattern registration
metadata and description so PHPCS recognizes the file comment as valid.
---
Nitpick comments:
In `@assets/js/faq-accordion.js`:
- Line 22: Update the FAQ accordion initialization near question.setAttribute so
aria-expanded is derived from whether the associated section currently has the
is-open class, setting it to true for open sections and false otherwise instead
of hardcoding false.
🪄 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
Run ID: 62d5a4c3-0b3a-4de4-a909-37c874d236aa
📒 Files selected for processing (7)
assets/css/animations.cssassets/js/faq-accordion.jsinc/animations.phppatterns/section-faq.phppatterns/template-single.phpsrc/scss/animations.scsssrc/scss/animations/_faq-motion.scss
Add missing @Package tags to section-faq.php and template-single.php to fix the PHPCS pipeline failure. Make the FAQ accordion progressively enhanced by gating its collapse behavior behind a JS-applied is-accordion class, so content stays fully visible if JavaScript fails to load. Add an idempotency guard against double-initialization and derive aria-expanded from actual state instead of hardcoding it. Replace the has_block() check for enqueuing the accordion script with a render_block filter, since has_block() only inspects the current post's content and misses the block when rendered via template parts or query loops.
ZaredRogers
left a comment
ZaredRogers
left a comment
There was a problem hiding this comment.
Nice on @brandonmarshal
2 participants
Summary
patterns/template-single.php, rendered after post content on the single-post template.patterns/section-faq.php) using Yoast SEO's nativeyoast/faq-block, with 3 placeholder Q&A pairs for editors to duplicate/edit.src/scss/animations/_faq-motion.scss,assets/js/faq-accordion.js, conditionally enqueued ininc/animations.phponly on pages containing the FAQ block).outermost/icon-block) usage per the plugin verification task. Found 2 empty placeholders (section-card-feature.php,section-card-solutions.php— intentional, duplicate-per-use patterns) and 9 icon instances across 4 CTA patterns that bypass the plugin entirely with hand-embedded inline SVG instead. No code changes made for this — findings documented on the issue and spun off into LS-1530 since it needs a design decision before any fix.Full findings and discussion logged on LS-1207.
Closes LS-1207
Test plan
Static checks:
php -lclean on all changed/new PHP filesnode theme-utils.mjs escape-patterns— no escaping/translation issuesnode theme-utils.mjs validate-theme— no new failures introducednpm run build:csscompiles cleanly, new FAQ accordion CSS present in compiled outputVerified live on a local WordPress instance, not just statically:
🤖 Generated with Claude Code
Summary by CodeRabbit