From 9253836dcde56d743e528a72cb4761c0aad523fa Mon Sep 17 00:00:00 2001 From: Param Chandarana Date: Wed, 14 Jan 2026 14:45:26 +0530 Subject: [PATCH] Fix: Accordion collapsed state background color not applying correctly 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 Fixes #3670 --- src/block/accordion/frontend-accordion.js | 2 +- src/components/block-css/index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/block/accordion/frontend-accordion.js b/src/block/accordion/frontend-accordion.js index 93693f48e9..e49d9ff7f6 100644 --- a/src/block/accordion/frontend-accordion.js +++ b/src/block/accordion/frontend-accordion.js @@ -87,7 +87,7 @@ class StackableAccordion { } el.classList[ - ! Array.from( el.classList ).includes( 'stk--is-open' ) ? 'add' : 'remove' + el.open ? 'add' : 'remove' ]( 'stk--is-open' ) // When the accordion is triggered to open/close, we animate diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js index 1383eba268..0274473d92 100644 --- a/src/components/block-css/index.js +++ b/src/components/block-css/index.js @@ -304,11 +304,11 @@ const BlockCss = props => { // TODO: why do we have this condition for the collapsedSelector, but they just do the same prepending?? if ( hasCollapsed ) { if ( generateForAllBlockStates ) { - collapsedSelector = prependClass( selector, '%h :where(.stk-block-accordion.stk--is-open) .%s' ) + collapsedSelector = prependClass( selector, '%h :where(.stk-block-accordion:not(.stk--is-open)) .%s' ) } else if ( blockState === 'collapsed' ) { - collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' ) + collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' ) } else { - collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' ) + collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' ) } }