[WP 6.7] Tabs: Unify tab height to 48px/40px

[t-hamano]

Fix the issue discovered in this comment

What?

This PR standardizes the tab height to 48px/40px in the Tabs component.

Why?

This issue is caused by a fluid height being applied to the tabs to prevent overlapping focus styles. In #62027, the vertical padding of the tabs was changed from 3px to space( 4 ) = 16px. This may cause the tab height to exceed 40px or 48px depending on the tab content.

How?

All of these issues have been resolved in the trunk branch. However, since the trunk branch contains various improvements and changes, it is not possible to backport directly from the trunk branch to the wp/6.7 branch.

As I understand it, the Tabs component expected in WP 6.7 is as follows.

• Horizontal tab (icon):
  • The height is basically 48px.
  • When the tab content is long, the tab height changes fluidly.
  • Focus outlines do not overlap.
• Vertical tab:
  • the height should be 40px (See #63446)

To achieve these, I will submit the minimum changes to the wp/6.7 branch.

Testing Instructions

• Horizontal Tab:
  • Open the site editor.
  • Open the editor sidebar.
  • Tabs (Template, Block) height should still be 48px.
  • Select a block that has Settings and Styles tabs.
  • The settings and style tabs height should now be 48px.
• Horizontal Tab (fluid height):
  • Change the site language to Japanese.
  • Enable "Show button text labels" setting.
  • Open the site editor and select a navigation block.
  • Focus a tab in the block sidebar.
  • The focus outline should not overlap any text.
• Vertical Tab:
  • Select the Patterns tab from the main inserter.
  • The pattern category button height should still be 40px.
  • Open the settings modal.
  • The tab panel height should now be 40px.

Screenshots

Horizontal tab (icon)

Before	After

Horizontal tab (fluid height)

Before	After

Vertical tab

Before	After

[github-actions]

Flaky tests detected in aa452d7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11452376965
📝 Reported issues:

• [Flaky Test] Should insert content using the global inserter #57525 in /test/e2e/specs/widgets/editing-widgets.spec.js

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

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

[ciampo]

🚀

Thank you!