Classic Editor: set background, positioning and height for Skip to Editor link

[sabernhardt]

In 7.0, the 'Skip to Editor' link is larger and has a transparent background, which is inappropriate above the title field.

Between the 600- and 850-pixel breakpoints, the link's padding can cause the page to scroll horizontally. (This already happened in WordPress 6.9, but now the link is 12 pixels wider and the admin toolbar goes further off-screen.)

[sabernhardt]

Skip to Editor link, visible on focus, at 640 pixels wide

[sabernhardt]

Without focus, the skip link makes the page wider than the viewport

• Assigns the right positioning value regardless of whether the link has focus, to avoid horizontal scroll.
• Sets the background color to white.
• Reduces the line-height and min-height.
• Keeps the top value of 4 pixels for any screen width.

Trac 64727

Use of AI Tools: none

The 32-pixel height matches the plugin action buttons (since r61729).

[huzaifaalmesbah]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11053

Environment

• WordPress: 7.0-beta1-61709-src
• PHP: 8.2.29
• Server: nginx/1.29.5
• Database: mysqli (Server: 8.4.8 / Client: mysqlnd 8.2.29)
• Browser: Chrome 145.0.0.0
• OS: macOS
• Theme: Twenty Eleven 5.0
• MU Plugins: None activated
• Plugins:
  • Classic Editor 1.6.7
  • Test Reports 1.2.1

Steps taken

1. Opened Classic Editor (Posts → Add New).
2. Resized viewport to 600px–850px and 480px.
3. Observed horizontal scroll and overflow before patch.
4. Applied PR ​#11053 and retested.
5. ✅ Patch is solving the problem

Expected result

• No horizontal scroll.
• Proper positioning and 32px height.
• White background.
• Admin toolbar fully visible.

Result

Issue fixed at 600px+ and 480px. No overflow after patch.

Screenshots

Before Apply Patch	After Apply Patch ✅

[joedolson]

Also tested and confirmed. Marking for commit.

[joedolson]

In 61742:

Editor: (Classic) Fix "skip to editor" link CSS.

Fix the height, background, and positioning of the skip to editor link in the classic editor, to prevent overflow and override transparent background.

Props sabernhardt, huzaifaalmesbah, joedolson.
Fixes #64727.

Trunk, before patch	With patch
With focus, at 640px and 1000px<br><br>	With focus, at 640px and 1000px<br><br>
No focus, at 640px<br>	No focus, at 640px<br>

---

For comparison, 6.9.1 had a smaller link:

And the horizontal scroll was less noticeable:

Committed in r61742