Missing Dimension Controls & Limited Customization in Accordion Block

[monzuralam]

What problem does this address?

While working with the Accordion block, several important styling controls are currently unavailable, which limits design flexibility:

1. Accordion Item → Styles → Dimensions
   • The Padding control is missing.
   • This prevents adjusting inner spacing for accordion items.

2. Accordion Heading → Styles → Dimensions
   • The Margin control is missing.
   • This restricts spacing control around the heading element.

3. Icon Customization
   • There is no option to change the open/close icons for the accordion.
   • This limits visual customization and consistency with different design systems.

Expected Behavior

• Ability to control padding for Accordion Items.
• Ability to control margin for Accordion Headings.
• Option to customize or replace open/close icons (e.g., plus/minus, arrows, custom SVGs).

Steps to Reproduce

1. Add an Accordion block.
2. Insert an Accordion Item.
3. Go to Styles → Dimensions:
   • Notice that Padding is missing.
4. Select Accordion Heading:
   • Go to Styles → Dimensions.
   • Notice that Margin is missing.
5. Try to change the open/close icon:
   • No option is available.

What is your proposed solution?

• Add missing Dimensions controls (Padding & Margin) in the respective block settings panels.
• Introduce an Icon customization option, allowing users to:
  • Select from predefined icons, or
  • Upload/use custom SVG icons.

Why This Matters

These features are essential for achieving consistent and flexible layouts without relying on custom CSS. Adding them would significantly improve the usability of the Accordion block for design-focused workflows.

Environment

• WordPress version: 6.9.4
• Browser: Chrome Version 147.0.7727.102 (Official Build) (64-bit)
• OS: Windows 11

[vishnupprajapat]

I’d like to work on this issue

[t-hamano]

Thanks for the suggestion. The current block support is carefully selected, but it's certainly worth reconsidering.

1. Accordion Item → Styles → Dimensions
   • The Padding control is missing.
   • This prevents adjusting inner spacing for accordion items.

I agree with this.

2. Accordion Heading → Styles → Dimensions
   • The Margin control is missing.
   • This restricts spacing control around the heading element.

Accordion items support gaps, allowing us to adjust the spacing between the Accordion Heading and Accordion Panel. Adding margin support to the Accordion Heading will conflict with gap support.

3. Icon Customization
   • There is no option to change the open/close icons for the accordion.
   • This limits visual customization and consistency with different design systems.

We are currently working on improving the icon API. For now, let's avoid adding block-specific functionality. See #75715 for more details.

[hbhalodia]

Hi @monzuralam @t-hamano, Have raised the PR for point 1, i.e, to include the padding as spacing support in the accordion items.

As said, for point 2 will conflicts with support gaps, For point 3 yes once Icon API would land, we can provide the support to use that and it would allow users to choose icons. We are tracking the accordion in the issue shared - #75715, (to remove hardcoded svg icons (+) and use icon API for the same).