Fix: Accordion collapsed state background color not applying correctly

[param-chandarana]

When using different background colors for Normal and Collapsed states on the accordion's inner column, the Collapsed state color was not being applied when the accordion was closed.

Root Cause:

1. CSS selector in block-css/index.js was targeting '.stk-block-accordion.stk--is-open' which applied collapsed styles when accordion was OPEN (inverted logic)
2. Frontend class toggle was toggling based on class existence instead of the actual 'open' attribute state

Fixes:

1. Changed collapsed CSS selector to ':not(.stk--is-open)' to correctly apply styles when accordion is closed
2. Fixed frontend-accordion.js to add/remove 'stk--is-open' class based on el.open property instead of toggling

Screenshots:

Fixes #3670

Summary by CodeRabbit

• Bug Fixes
  • Improved accordion component state management to ensure open and closed states are consistently synchronized and properly reflected in the user interface.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The accordion component's state determination has been refactored. The frontend logic now directly checks the element's open attribute instead of relying on class presence, while CSS selectors for collapsed states are inverted to target elements lacking the stk--is-open class.

Changes

Cohort / File(s)	Summary
Accordion State Logic src/block/accordion/frontend-accordion.js	Changed class toggle for stk--is-open to directly reference the element's open attribute rather than checking class presence
Accordion CSS Generation src/components/block-css/index.js	Inverted collapsed state CSS selectors from .stk--is-open to :not(.stk--is-open) across all state paths

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A toggle most clever, so spry and so neat,
Open attribute and class now compete,
With :not() inverted, the states align true,
The accordion dances in CSS anew! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: correcting how the accordion's collapsed state background color is applied. It directly matches the primary change addressing the inverted CSS selector logic and class toggling issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

src/components/block-css/index.js (1)

304-312: Selector fix is correct, but duplicate branches remain.

The change from .stk--is-open to :not(.stk--is-open) correctly fixes the inverted logic so collapsed styles now apply when the accordion is closed.

However, the TODO on line 304 still applies — lines 309 and 311 produce identical selectors. Consider consolidating these branches or documenting why they're separate if there's intent to differentiate them in the future.

♻️ Optional: consolidate duplicate branches

 	if ( hasCollapsed ) {
 		if ( generateForAllBlockStates ) {
 			collapsedSelector = prependClass( selector, '%h :where(.stk-block-accordion:not(.stk--is-open)) .%s' )
-		} else if ( blockState === 'collapsed' ) {
-			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' )
 		} else {
 			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' )
 		}
 	}

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 56b250f and 9253836.

📒 Files selected for processing (2)

• src/block/accordion/frontend-accordion.js
• src/components/block-css/index.js

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/block-css/index.js (2)

src/components/block-css/util.js (2)

• prependClass (167-178)
• prependClass (167-178)

src/util/index.js (1)

• selector (264-306)

🔇 Additional comments (1)

src/block/accordion/frontend-accordion.js (1)

89-91: LGTM!

The change from toggle-based to explicit add/remove based on el.open is correct. This ensures the stk--is-open class accurately reflects the <details> element's actual open state, which is essential for the :not(.stk--is-open) CSS selector to work correctly for collapsed styling.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}