Tabs: Restructure Tabs Menu and inner blocks#75954
Merged
Conversation
# Conflicts: # docs/reference-guides/core-blocks.md # packages/block-library/src/tabs-menu-item/controls.js # packages/block-library/src/tabs-menu-item/edit.js # packages/block-library/src/tabs-menu-item/editor.scss # packages/block-library/src/tabs-menu-item/save.js # packages/block-library/src/tabs-menu-item/style.scss
mikachan
added
[Type] Enhancement
|
Size Change: -521 B (-0.01%) Total Size: 6.89 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in cdfa537. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22905717939
|
Contributor
|
Alright, I see what y'all are going for here. This still keeps the content linked to the tab, 👍. If I can make one suggestion? I notice there are effects for when removing a tabs-menu-item or tab and keeping that in sync. However, if a user pastes a tab into tab-panel, will a new tab menu item also be created? |
scruffian
reviewed
Feb 27, 2026
scruffian
reviewed
Feb 27, 2026
Contributor
scruffian
left a comment
scruffian
left a comment
There was a problem hiding this comment.
This seems to be heading in the right direction, good work. I'm curious to see how we can keep settings in sync across these blocks, but not in this PR!
Member
Author
|
Thanks both! I think this should be ready for a proper review now.
Yes, good suggestion! I've combined these two effects into one so it's hopefully easier to maintain. I think we could address the pasting scenario in a follow-up, so I've added a comment in 8366201 to come back to it. |
Contributor
|
When I reorder the tab menu items, the labels change their IDs (1,2,3) so that tab 1 menu item is now Also we probably don't want to let people duplicate tabs menu item/tabs blocks as it messes things up. That might be better as a followup though. |
scruffian
reviewed
Mar 4, 2026
Member
Author
|
Thanks @scruffian!
I think I've addressed this in 4930794, by keeping the Tab Menu Item and Tab IDs in sync, rather than just incrementing the ID of each when a new tab is inserted.
I don't think this would be a lot of code, we might just need to add |
15 tasks
Member
Author
|
I've made some more improvements to this PR with the above commits:
This should be ready for another review 🙇 |
scruffian
reviewed
Mar 10, 2026
Contributor
scruffian
left a comment
scruffian
left a comment
There was a problem hiding this comment.
This is looking good, just one suggestion.
scruffian
approved these changes
Mar 12, 2026
Contributor
scruffian
left a comment
scruffian
left a comment
There was a problem hiding this comment.
Thanks for all the iterations. LGTM
Contributor
|
Something I noticed while testing, which we can deal with in a followup - It's possible to edit/remove the anchor text for the Tab Menu Item, which breaks the tabs. I wonder if we can make the anchor disabled for these blocks? |
Member
Author
|
Thanks for all your help with this, @scruffian! Here are some follow-ups:
|
This was referenced Mar 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Part of #73230
This is an attempt at refactoring the Tabs Menu block to use one Tabs Menu Item inner block per tab, rather than the current template approach.
Why?
Addressing some of the discussion in #73230.
Previously, the Tabs Menu block saved a single Tabs Menu Item as a template, and PHP duplicated it at render time for each tab using a regex substitution. This relied on matching a specific class (
wp-block-tabs-menu-item__template) to find and replace the template element, and it meant only one menu item block existed in the editor regardless of how many tabs there were.This PR attempts a new structure, where we have a Tabs Menu Item block per tab, and is more consistent with how other blocks work. Each button is independently editable, and it removes the class-based template pattern.
How?
tabs-menu/edit.js and tabs-menu/index.php: The tabs-menu no longer uses a template block duplicated in PHP. Instead it renders its inner blocks with per-tab context (index, id, label) injected by the PHP render callback. TheTabsMenuItemPreviewcomponent and associated block-preview functionality are removed.tabs-menu-item/edit.jsandtabs-menu-item/save.js: These have been simplified. The menu item is now a plainbuttonthat derives its label and index from block context rather than attributes. Custom colour attributes and state removed.tabs/edit.js: Two newuseEffecthooks sync deletions in both directions: deleting a core/tab removes the corresponding menu item, and deleting a menu item directly from its toolbar also removes its tab.tab/add-tab-toolbar-control.js: New tab IDs are now based on the highest existing ID number to avoid collisions when tabs are deleted and re-added.tabs-menu-item/block.json: Anchor support added so each button gets a stable id attribute.Testing Instructions
Screenshots or screencast