Call for Testing: Accordion Block

As part of the upcoming WordPress 6.9 release, we are introducing a brand-new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., 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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (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 AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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 metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. 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