Accordion block: Add dynamic CSS class based on icon visibility/position

[mrleemon]

Description

The new Accordion block allows users to customize the toggle icon via the inspector, specifically its position (left or right) or whether it is hidden entirely.

Currently, the block markup does not reflect these choices in the CSS classes of the parent container. This makes it challenging for theme authors to write CSS to handle layout shifts, text alignment, or spacing adjustments that should trigger when the icon state changes.

Proposed solution

Add a state-specific class to the Accordion block wrapper (or the Accordion Item block wrapper) that reflects the iconPosition and showIcon attributes.

Proposed class mapping:

• Icon position - left: .has-icon-left
• Icon position - right: .has-icon-right
• Icon hidden: .has-no-icon (or .is-icon-hidden)

Technical implementation suggestion

In the block's edit and save functions, the class utility should be updated to include these classes based on the attributes:

const classes = clsx( {
    'has-icon-left': iconPosition === 'left' && showIcon !== false,
    'has-icon-right': iconPosition === 'right' && showIcon !== false,
    'has-no-icon': showIcon === false,
} );