Since it's already been in the wild for some time, there's been enough time for it to be used in multiple places across Gutenberg, and this has surfaced many needs expressed in the form of style overrides. This is helpful as it's information that we can now use to improve the base component - however, we're actively discouraging style overrides as they inevitably result is breakages and wasted developer time down the line, which in turn severely limits the ability for us to evolve the component.
For this reason, there have been conversations across multiple issues and PRs about certain aspects of Tabs going on for a while. In this issue, I intend to enumerate and centralize all these aspects with the following goals:
Reach decisions on these topics.
Remove all (ideally) style overrides.
Make any necessary updates to the Tabs component to reasonably cover its necessary UI needs.
I ask for the help from @WordPress/gutenberg-components and @WordPress/gutenberg-design to reach good compromises here and unblock this work. I intend to leave enough time for everyone to leave their thoughts and to test related changes as this effort evolves to reflect the latest decisions or explorations. That said, we need to get this wrapped up to unblock the rest of the work.
Feel free to chime in, and please use numbers to clearly refer to each of the discussions you intend to contribute to. Thank you!
Design aspects of Tabs being discussed
I'm adding a quick summary of each discussion as well as a "current status" or "resolution" summary to provide visibility. Keep in mind that I might have missed something or gotten something wrong - I'm only human. Just let me know and I'll correct it.
These summaries also have the purpose of clearly expressing the current direction to give everyone a fair chance to reply now, before they are considered resolved and closed, at least for the foreseeable future.
Sometimes there can be too many tabs and they don't fit in the container. In this discussion, several ideas are compared, including scroll and wrapping strategies.
Status: 🔴 open
Current state: we should explore scrolling in a PR.
There is currently a style override in sidebars that expands the size of the tab container and makes tabs expand as well in equal sizes ("fill" style). This PR removes that override. In this PR, there is also general discussion of "fill" vs "hug" styles, as well as (if "fill" is implemented natively) whether the labels should be centered or left-aligned.
Status: 🔴 open
Current state: consensus on the necessity of a "fill-with-centered-label" variant (necessary at least for icon labels). Still discussing whether sidebars should be "hug" or "fill", and whether a "fill-with-left-aligned-label" is necessary.
We're in the process of stabilizing the new
Tabs
component, see https://github.com/WordPress/gutenberg/issues/52997Since it's already been in the wild for some time, there's been enough time for it to be used in multiple places across Gutenberg, and this has surfaced many needs expressed in the form of style overrides. This is helpful as it's information that we can now use to improve the base component - however, we're actively discouraging style overrides as they inevitably result is breakages and wasted developer time down the line, which in turn severely limits the ability for us to evolve the component.
For this reason, there have been conversations across multiple issues and PRs about certain aspects of
Tabs
going on for a while. In this issue, I intend to enumerate and centralize all these aspects with the following goals:Tabs
component to reasonably cover its necessary UI needs.I ask for the help from @WordPress/gutenberg-components and @WordPress/gutenberg-design to reach good compromises here and unblock this work. I intend to leave enough time for everyone to leave their thoughts and to test related changes as this effort evolves to reflect the latest decisions or explorations. That said, we need to get this wrapped up to unblock the rest of the work.
Feel free to chime in, and please use numbers to clearly refer to each of the discussions you intend to contribute to. Thank you!
Design aspects of
Tabs
being discussedI'm adding a quick summary of each discussion as well as a "current status" or "resolution" summary to provide visibility. Keep in mind that I might have missed something or gotten something wrong - I'm only human. Just let me know and I'll correct it.
These summaries also have the purpose of clearly expressing the current direction to give everyone a fair chance to reply now, before they are considered resolved and closed, at least for the foreseeable future.
https://github.com/WordPress/gutenberg/issues/64093
Sometimes there can be too many tabs and they don't fit in the container. In this discussion, several ideas are compared, including scroll and wrapping strategies.
Status: 🔴 open
Current state: we should explore scrolling in a PR.
https://github.com/WordPress/gutenberg/pull/61974
There is currently a style override in sidebars that expands the size of the tab container and makes tabs expand as well in equal sizes ("fill" style). This PR removes that override. In this PR, there is also general discussion of "fill" vs "hug" styles, as well as (if "fill" is implemented natively) whether the labels should be centered or left-aligned.
Status: 🔴 open
Current state: consensus on the necessity of a "fill-with-centered-label" variant (necessary at least for icon labels). Still discussing whether sidebars should be "hug" or "fill", and whether a "fill-with-left-aligned-label" is necessary.
https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2218239017 (vertical indicator styles)
After the implementation of a vertical indicator in
Tabs
, we realized that there is disparity between multiple instances of this indicator's styles.Status: 🔴 open
Current state: agreement on using a light-blue indicator consistently.
Please let me know if I missed anything!