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.

Note: In the latest specification, only one accordion item is inserted. This will the new behavior in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 21.9 Release. Please check #72021 PR for more details.

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

Call for Testing: Ability to Hide Blocks

A new feature is introduced in Gutenberg 21.8RC: the ability to hide blocks from the frontend.

This option provides more flexibility for working with content and layouts. Instead of deleting or moving a 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. you don’t want published, you can temporarily hide it. The block remains in the editor, but it will not appear on the live site until the visibility is switched back on.

Why this matters

  • Makes it easier to experiment with different layouts without losing content.
  • Allows draft or placeholder content to stay visible in the editor but hidden from site visitors.
  • Encourages non-destructive editing and smoother collaboration.
  • Creates a foundation for future enhancements

Key Changes to Observe

  • In the editor,
    • It adds a menu item to the block settings options to change the block’s visibility.
      • “Hide”: A “Hide” option appears on each block by default
      • “Show”: Clicking on “Hide”, the block setting toolbar should display the “Show” option.
    • In the List view, the visibility of multiple blocks can be changed simultaneously.

Test Steps

  1. Install and activate the Gutenberg plugin (V21.8RC). Alternatively, you can test this with this playground link.
  2. Navigate to the post, page, or template.
  3. Select the block and click on the “Hide” control from the toolbar settings
  4. Observe that the block is no longer visible in the editor, and the “Show” control should be toggled on for that block (Observe the List view)
  5. Check the change in the front end, and the block should be hidden 
  6. Now, turn off the hide setting in the editor
  7. The block should reappear in the editor and the front end
  8. Nested blocks: Place a few blocks inside a Group/Columns block and hide the parent.
    1. Confirm that all inner blocks are hidden
  9. Multiple instances: Hide different blocks across the page and verify that only the chosen ones are excluded from the frontend.

Testing Instruction

Since this feature is newly introduced, it needs testing, and feedback is especially valuable.

Please share:

  • Did the toggle behave as expected?
  • Did you run into inconsistencies between the editor and the frontend?
  • Were there any issues with nested, synced, or reusable blocks?

Your input will help refine this feature as it moves toward the WordPress 6.9 release.

Follow #71203 PR for more details. If you observe any related issues, please feel free to report them here.

📈Performance / Asset Check

Hidden blocks should not appear on the frontend, and their related CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site./JS should no longer be actively used. Optionally, you can verify this via the Network tab or CSS Coverage in DevTools. Visible blocks must continue loading normally. On small pages, coverage differences may be subtle; the key point is that hidden blocks do not add frontend markup or assets. Check #9213 PR for more details. If you would like to verify this, follow the steps in the comment.

If you’re unsure whether what you are experiencing is a bug, you can ask in the #outreach channel on the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Change Log

1.0.0 Initial Post

1.1.0 Add Performance check

Props to @wildworks @psykro for pre-publish review of this post.

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

Help test changes to template management

Update: this feature has been punted to WordPress 7.0

A recent update to the Site Editor template management system has significantly enhanced WordPress template management by providing greater flexibility and control over the template editing experience. It is now possible to view created templates separately from theme templates, store more than one template per template type (or slug), edit templates and save them without making them active, manage template revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. more effectively, and mark specific templates as active or inactive according to requirements.

For more context on the history behind this change, read through the following proposal on GitHub

Key Changes

  • Template Management: Allows multiple templates with the same target slug and introduces the ability to switch between them by setting one as “active.”
  • Theme templates remain the “source of truth”: To edit a theme template, one first needs to create a duplicate of it as a Created Template and edit that template.
  • Theme Template Control: Users can now disable theme templates (except the essential index template)
  • New UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.: Adds “Active templates” and “Created Templates” views in the Site Editor
  • APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. Simplification: User templates now use standard Post Type REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. endpoints
  • Enhanced Features: Enables revisions, duplication, and trashing through normal Post actions

Benefits

  • Created templates are retained when switching themes
  • Users can disable template edits when needed
  • New templates can be created without immediately publishing
  • Templates can be added for all slugs, not just missing ones
  • Improvements to template revisions, template duplication, and deleting templates
  • And more. For full details, see the PR description

Testing Instructions

  1. Install and activate the Gutenberg Nightly plugin from GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Times, or use this Playground link
  2. Navigate to Site Editor > Templates and test the new template management features
  3. Verify that you can see template categories for Active, Custom, and theme templates.
  4. Test custom theme templates
    1. Create, edit, and save a custom theme template, and confirm it only appears in the Created templates list.
  5. Test active templates
    1. Create multiple templates for the same target slug (ie, single-post) and ensure you can activate/deactivate different templates, and that the front-end rendering uses the correct template.
    2. Confirm that when activating one template, the other templates for that slug are marked as inactive.
    3. Test that you can activate a template in the template editing view.
  6. Test default template fallback
    1. Deactivate a theme template and ensure the correct fallback template (in line with the template hierarchy) is used instead.
  7. Test switching themes
    1. Once you’ve created a custom template, switch to a different 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. theme and ensure the custom template remains.
  8. Test that template revisions, duplicating templates, and deleting templates work as expected.

Testing Steps

Breaking Changes

  • Changes to getEditedPostId and getCurrentPostId may impact plugins
  • Plugins should migrate to use getEditedPostSlug instead

Logging bugs and discussions

All existing bugs are being tracked in the following tracking issue in the Gutenberg GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository: https://github.com/WordPress/gutenberg/issues/71735

If you encounter any new bugs related to this feature during testing, please log them as new issues and mention them in the above tracking issue.

If you’re unsure whether what you are experiencing is a bug, you can ask in the #outreach channel on the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., +make.wordpress.org/themes

Props to @krupajnanda, @annezazu, @bph, and @juanmaguitar for assistance in reviewing this post.

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

Call for testing: Gutenberg

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ is now in betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process., with that comes a new opportunity for testing.

There is now a testing page dedicated to Gutenberg, you can find it right here. There are currently 2 types of testing being looked for, each has a central feedback form.

Looking for other ways to give feedback? You can also write a blog post (let the editor team know about that in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. #core-editor) or add an issue to the GitHub repository.

Your feedback and testing is really important at this stage of Gutenberg, it really does matter and help make this as good as it can be.

+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. +make.wordpress.org/design

#needs-testing

A new call for testing…

A new call for testing is out for the prototype editor. It looks neat! If you’d like to help test, remember that it’s in very early prototype stages so functionality is limited and they’ve asked for help with the following (other functions haven’t been built yet):

  1. Add a new paragraph.
  2. Add an image.

Written response:

  1. Is it clear what each section does?
  2. How do the flows for adding paragraphs and images feel overall?

Post testing notes on the thread at https://make.wordpress.org/design/2017/02/09/initial-gutenberg-prototype-editor-testing/

Report bugs (search first!) at https://github.com/WordPress/gutenberg/issues

#needs-testing