Call for Testing: Accordion Block

As part of the upcoming WordPress 6.9 release, we are introducing a brand-new block, the Accordion block.

This block was first introduced in the Gutenberg 21.5 release as an experimental feature and is now being stabilised. More testing is needed to ensure its reliability and polish before it ships with the WordPress 6.9 release.

What is the Accordion block?

The Accordion block lets you display collapsible sections of content, which is ideal for FAQs, expandable information lists, etc.

• The block acts as a container, i.e. Accordion that holds multiple child blocks, which we can consider as Accordion Items
• By default, adding an Accordion block inserts two Accordion Items.
• Each item contains a title and an expandable content area that can be toggled open or closed.

Now, before we start testing, let’s understand the difference between the Accordion and the Details blocks.

While both blocks allow collapsible content, their structure and purpose differ:

• Accordion block: Designed for multiple collapsible grouped sections, such as FAQ lists. It contains several Accordion Items inside a single parent block, as shown in the screenshot below.

• Details block: Intended for a single collapsible section, for example, a single “Read more” toggle as shown in the screenshot below.

Test Steps

Please try out the Accordion block in the latest Gutenberg plugin (v21.5 or later). Here are some testing scenarios:

1. Visit Gutenberg > Experiments and check the option to “Enable experimental blocks”
2. Navigate to Post/Page or template
3. Verify you can add an Accordion block now.
4. Confirm that the Accordion Item is added with an Accordion Heading and an Accordion Panel (ref the screenshot above)
5. Edit item placeholders and add content inside the Accordion Panel
6. Save and confirm that expand/collapse both function as expected in the front end and the editor
7. Verify Reordering
   1. Move Accordion Items up or down
   2. Confirm that the order updates correctly in both the editor and the frontend
8. Styling & Settings: This only applies to all items when you work through the global styles. If you change the style of an item in a block instance, the style will not be reflected in other items.
   1. Apply block-level style settings (colors, typography, background, etc).
   2. Confirm that styles are reflected in all items consistently.
9. Verify the duplicate of the accordion block
10. Remove an existing item and ensure the block continues to function as expected

Discover more scenarios based on the different use cases and see if that works as expected. Refer to the visual below to understand how you can play around with different settings.

Testing Instruction

Why Your Testing Matters

Your feedback helps ensure the Accordion block offers a consistent, stable, and intuitive experience for all users, including the Accessibility considerations. If you encounter any related issues, please report them here.

How to report an issue

1. Write down step-by-step instructions on how an issue can be reproduced. Also, attach a screenshot/screencap for better clarity.
2. Use the Test report plugin to collect all essential meta information.
3. Before creating a new issue, check if there is a related issue has already been reported in the Guutenberg repo. If not, create a new one here.

Props to @wildworks, @muddassirnasim and @mosescursor for pre-publish review of this post.

#core-test, #full-site-editing, #gutenberg, #needs-testing