Tabs block: Polish #75128
Open
Tabs block: Polish #75128
+15
−28
Conversation
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
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
github-actions
bot
added
the
First-time Contributor
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jasmussen! 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. |
Contributor
Author
|
I would like to update the icons as well. I will provide some alternatives here in a bit, but one thing I think we should do, is use the same icon that Accordion uses for the content, extract that and add it to the icon library, and reuse it here for "tab content": The difference between two blocks that could arguably be mostly the same isn't worth maintaining, IMO: 
|
Contributor
Author
|
Also potentially a followup: we don't do this for any other block: I don't think we should be doing that here: building in flex/flow/constrained/grid into the Tab Content block itself. Accordion, Navigation Overlay, and other similar containers allow you to insert any container block you want, Group, Stack, Row, Grid, and thus choose which type of layout you have. IMO that should be how you choose the layout, otherwise this will be a bespoke and used-only-once interface for choosing block layout, that will be prone to code drift as those other container blocks evolve. As a segmented control, it's also likely to translate poorly to longer languages. |
jasmussen
added
[Type] Enhancement
Contributor
Author
|
Also, in addition to unifying to use the same icon between Tab Panel and Accordion Panel, we should unify the titles: 
Right now it's called Tab Panels (plural). @mikachan what do you think? I will need to change this code: Better do this now before beta, yes? |
|
Size Change: -95 B (0%) Total Size: 3 MB
ℹ️ View Unchanged
|
Contributor
Author
|
Here are the new icons I'm proposing. Probably can follow up with these separately, but sharing here to keep the discussion focused: 
The concepts were good, so the changes are mostly minor:
SVGs. Tabs: Tabs-menu: Tab: Panel-contents: |
Merged
t-hamano
approved these changes
Feb 3, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for working on this! I think this block deserves further polish, but for now I think it's okay to ship the PR as is.
I don't think we should be doing that here: building in flex/flow/constrained/grid into the Tab Content block itself.
I agree with this. Additionally, the following points can also be improved.
- Remove the Label UI. This is because the tab label can be edited directly by clicking the tab itself. Text fields cannot express HTML tags.
- Refactor the panel by using the
ToolsPanel.
Ultimately, the UI should be simplified as follows. Of course, this can be addressed in a follow-up PR rather than in this one.
| className="components-toolbar__control" | ||
| label={ __( 'Add a new tab' ) } | ||
| onClick={ addTab } | ||
| showTooltip |
Contributor
There was a problem hiding this comment.
Suggested change
| showTooltip |
Nit: the shouTooltip prop does nothing in this case.
Comment on lines
94
to
+97
| label={ __( 'Remove the current tab' ) } | ||
| onClick={ removeTab } | ||
| showTooltip | ||
| text={ __( 'Remove Tab' ) } | ||
| text={ __( 'Remove tab' ) } |
Contributor
There was a problem hiding this comment.
Can we remove the unnecessary label and showTooltip prop?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Followup to #69789. Polishes the new Tabs block.
Why?
The block is very functional and nice, but doesn't follow best practices in all cases. This PR polishes up a few of the pieces.
How?
Before:
Title Case for many labels and items, toggle instead of checkbox, a typographic widow, few small pieces. After:
Testing Instructions
Insert the Tabs block, explore.