Dropdown menus in Admin bar need more padding in WordPress 6.5 RC1

[bgnicolepaschen]

When using a non-block theme, the dropdown menus that appear in the admin bar on the front end of the site need more padding. When hovering on +New and the Site Title these dropdown menus appear.

Environment

• WordPress: 6.5-RC1-57778
• PHP: 7.4.33
• Server: Apache
• Database: mysqli (Server: 10.11.7-MariaDB-log / Client: mysqlnd 7.4.33)
• Browser: Chrome 122.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty 2.5
• MU-Plugins:
  • BoldGrid Demo 1.5.3
  • BoldGrid Demo Housekeeping 1.0.0
  • BoldGrid LogRocket 1.0.3
• Plugins:
  • WordPress Beta Tester 3.5.5

Steps to Reproduce

1. Use Twenty Twenty theme
2. Navigate to the front end of the site.
3. Hover on the Site Title or + New
4. The links that appear do not have enough padding between them.
5. 🐞 Bug occurs.

Expected Results

1. I should see the standard amount of padding that stable has.

Actual Results

1. ❌ The links are very close together

[sabernhardt]

restores pixel dimensions

[sabernhardt]

Thanks for the report!

It's not padding; it's the height. [57765] changed the height to the rem equivalent, which does not work on the front end with themes that reset the rem unit.

Twenty Fifteen and Twenty Twenty use html { font-size: 62.5%; }, and many of the themes in a ​directory search for a 62.5% font-size do the same. Twenty Nineteen is the opposite, with a larger base size of
html { font-size: 22px; }.

[huzaifaalmesbah]

Reproduction Report

Description

I was able to reproduce this issue.

Environment

• WordPress: 6.5-RC1
• PHP: 8.3.2
• Server: nginx/1.25.3
• Database: mysqli (Server: 11.2.2-MariaDB / Client: mysqlnd 8.3.2)
• Browser: Chrome 122.0.0.0
• OS: macOS
• Theme: Twenty Twenty 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

[ironprogrammer]

Thanks for the patch, @sabernhardt!

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/60707/60707.diff

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 14.3.1
• Browser: Safari 17.3.1, Google Chrome 122.0.6261.111
• Server: nginx/1.25.4
• PHP: 8.2.16
• MySQL: 8.0.27
• WordPress: 6.5-RC1-57778-src
• Theme: twentytwenty v2.5

Actual Results

• ✅ Spacing between menubar subitems is restored (same as when block theme is active).

Supplemental Artifacts

Figure 1: Before patch ❌.

Figure 2: After patch ✅.

[shailu25]

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/60707/60707.diff

Environment:
WordPress - 6.5-RC1
OS - Windows
Browser - Firefox
Theme: Twenty Twenty
PHP - 8.1.23
Active Plugin - Test Reports

Actual Results:

• Spacing issue between menubar subitems is Resolved With Patch .✅

[shailu25]

Before Patch

[shailu25]

After Patch

[audrasjb]

In 57792:

Toolbar: Fix dropdown admin menu styles on front-end.

This changeset switches back the admin menu items height property to px unit to prevent issues with themes using html { font-size: 62.5%; }.

Follow-up to [57765].

Props bgnicolepaschen, sabernhardt, huzaifaalmesbah, ironprogrammer, shailu25.
Fixes #60707.
See #43633.

[audrasjb]

Reopening for backport. A second committer review is needed before backporting this to the 6.5 branch.

[mohonchandra]

I uploaded an image & I was able to reproduce this issue.

[swissspidy]

@audrasjb LGTM for 6.5

[audrasjb]

Thanks for the second committer review @swissspidy.
Let's add back the fixed-major workflow keyword though ;)

[audrasjb]

In 57808:

Toolbar: Fix dropdown admin menu styles on front-end.

This changeset switches back the admin menu items height property to px unit to prevent issues with themes using html { font-size: 62.5%; }.

Follow-up to [57765].

Reviewed by swissspidy.
Merges [57792] to the to the 6.5 branch.

Props bgnicolepaschen, sabernhardt, huzaifaalmesbah, ironprogrammer, shailu25, mohonchandra.
Fixes #60707.
See #43633.