Tabs: Rename tabs blocks to follow WCAG Tabs pattern

[shrivastavanolo]

What?

Closes #77341

Updates the naming of Tabs inner blocks to follow a clearer pattern aligned with WCAG Tabs pattern

Why?

The current naming of Tabs-related blocks (e.g., “Tabs Menu”, “Tab Menu Item”) can be confusing for users.

How?

• Updated block titles in block.json files:

  • Tabs Menu → Tab List
  • Tab Menu Item → Tab
  • Tab → Tab Panel
  • Tab Panel → Tab Panels

• Updated generated documentation to reflect the new naming.

No changes were made to block names (core/...), only user-facing labels/titles were updated.

Testing Instructions

1. Open a post or page in the editor
2. Insert the Tabs block
3. Verify the inner blocks:
   • “Tab List” appears instead of “Tabs Menu”
   • “Tab” appears instead of “Tab Menu Item”
   • “Tab Panels” container is correctly labeled
   • “Tab Panel” is used for individual panels
4. Add a new tab using the toolbar
   • Confirm the default label reflects the updated naming
5. Ensure functionality of tabs (switching, adding, removing) remains unchanged

Screenshots or screencast

Before	After

Use of AI Tools

Used AI assistance (Claude.ai) for drafting the PR description. All code changes were implemented and reviewed manually.

[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: shrivastavanolo <shreya0shrivastava@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>

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

[t-hamano]

Thanks for working on this!

No changes were made to block names (core/...), only user-facing labels/titles were updated.

I think changing only the visual title can be confusing because it creates an inconsistency between the title and the block name or CSS class name.

Fortunately, as this block is still in an experimental status, we can make breaking changes. Could you confirm and make changes based on the following points?

• Directory name (Example: from packages/block-library/src/tab to packages/block-library/src/tab-panel)
• Block name (Example: from core/tab to core/tab-panel)
• CSS classname and CSS selector (Example: from .wp-block-tab to .wp-block-tab-panel)
• name, parent, allowedBlocks field in block.json
• Context keys (Example: from core/tabs-menu-item-label to `core/tabs-tab-label)

Most of the work should be complete with bulk replacement in a code editor.

Alternatively, it should be sufficient to instruct the AI agent to change directory names, file names, variable names, etc., in accordance with the visual title change of the tab-related block., for example.

[shrivastavanolo]

@t-hamano Thanks for the review, that makes sense. I’ll go ahead and make the changes.

Quick question: do we also want to update any icon names (if they reference the old block naming), or should those remain unchanged?

[t-hamano]

Quick question: do we also want to update any icon names (if they reference the old block naming), or should those remain unchanged?

That's a good question. I think we should update all related icon names as well.

As a point of caution, this would be a breaking change for consumers who use the @wordpress/icons package, so it would be good to update the CHANGELOG.

You can create a new "Breaking Changes" section under the "Unreleased" section.

[shrivastavanolo]

@t-hamano Thanks for the clarification! I’ve made the updates accordingly.

Summary of changes:

• Renamed Tabs-related blocks to align with the new naming (directory names, block names, and block.json updates)
• Updated corresponding CSS classnames and selectors
• Updated context keys and related references
• Renamed associated icons in @wordpress/icons to match the new naming
• Added a Breaking Changes entry in the CHANGELOG for the icon updates

Tested on my end (adding/ removing tabs, etc.)

[t-hamano]

Thanks for the update! This might be a bit detailed, but I think we can update the following as well.

• use-tab-menu-sync.js > use-tab-list-sync.js
• useTabMenuSync >useTabListSync
• tabsMenuClientId > tabListClientId
• menuItems, menuItemCountChange, menuItemsInserted, prevMenuItems, newMenuItemBlock etc. > It would probably be best to replace menuItems with tabs.
• tabPanelClientId > tabPanelClientId

Maintaining consistency in terminology throughout the project will be helpful for other contributors when they read the code in the future.

[shrivastavanolo]

Hi @t-hamano I’ve updated the remaining references to keep the terminology consistent (useTabListSync, tabListClientId, tabs, etc.) + tested the functionality (adding, reordering tabs, etc.). Let me know if anything else needs adjustment.

[t-hamano]

LGTM! I believe everything has been processed correctly. Please check the last feedback I left.