Enhance Group Block Placeholder Design and Accessibility for Consistency with Other Blocks

[sarthaknagoshe2002]

Fixes: #66062

What?

This PR improves the placeholder UI and accessibility of the Group block to align it with other blocks (e.g., Columns, Query Loop); refer #66062. It addresses the following:

1. Implements a consistent design pattern for the Group block placeholder with:
   • Icon and title.
   • Description text.
   • Interactive controls for initial configuration.
2. Improves accessibility by:
   • Ensuring variation buttons have correct labels and descriptions.
   • Providing accessible names for all interactive controls using aria-describedby.

Why?

• The Group block placeholder currently uses an inconsistent design pattern compared to other blocks like Columns and Query Loop. This inconsistency may confuse users and reduce the user experience.
• The variations picker for Group, Columns, and Query Loop blocks had missing aria-describedby attributes.

How?

1. Design Consistency:

   • Updated the Group block placeholder to include an icon, title, and description matching the design pattern of other blocks.
   • Added a clear and informative description to the placeholder for better guidance.

2. Accessibility Improvements:

   • Updated variation buttons to include appropriate aria-describedby attributes, ensuring accessible names match the visible text.
   • Used screen reader text and associated descriptions for interactive controls to provide semantic meaning.
   • Corrected the accessible name for Group block variations by integrating the title and description.

Testing Instructions

1. Verify Design Consistency:

   • Add a Group block in the editor and observe the placeholder.
   • Confirm the placeholder displays an icon, title ("Group"), and description ("Group blocks together. Select a layout:").
   • Ensure the layout options (variations) are displayed clearly with labels.

2. Compare Placeholders:

   • Add Columns, and Query Loop blocks. Observe their placeholders.
   • Ensure the Group block now follows the same design pattern as these blocks.

3. Accessibility Testing:

   • The aria-describedby attribute is present and correctly associates the title and description.
   • Test the variation buttons for the Columns and Query Loop blocks to verify similar improvements.

Screenshots or screencast

Before

Design	Floating tooltip

After

Design	Floating tooltip

aria-describedby label

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sarthaknagoshe2002 <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: afercia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @sarthaknagoshe2002! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[sarthaknagoshe2002]

@ellatrix Could you please review this PR?

[jasmussen]

Thanks for the PR! Design-wise, it's not clear that the icon and label helps this state, and the removal of the label and icon was intentional:

• Placeholders are increasingly used in narrow contexts, so the less content inside, the better (Placeholders look broken when block is narrow, e.g. when used in a grid #64288)
• The help text is specifically authored to start with the word "Group", making the added label redundant.
• When the block is selected, the icon to indicate the block type is shown in the block toolbar, right above:

The placeholder's original design did not consider all the contexts in which it was used, and so rather than regressing the Group block to a past design, it seems more friutful to consider how we can refresh the other placeholders to scale better to additional contexts.

[sarthaknagoshe2002]

@jasmussen I’d like to propose adding these changes along with some additional updates suggested in #54867. This will help ensure placeholders are present, maintain consistency, and ensure that when adding to narrow layouts, the selection appears in the block controls.

[afercia]

making the added label redundant.

@jasmussen while I do understand the need to make the placeholder scale well in narrow spaces, I'm not sure you are fully understanding the users needs, the accessibility requirements, and the technologies we have to support. A visible label is needed to visually expose the accessible name of the variations. Please keep into consideration all the devices and technologies users use, thanks.