Administration: Spinners are misaligned

[wildworks]

Spinners may appear to the left of buttons during certain actions. Many of these spinners are aligned with the buttons by applying top margin. However, due to a change in button size to 40px in accordance with the new design system, the alignment between the buttons and spinners is no longer correct.

Upon investigating the entire UI, misalignment has been observed in at least the following locations:

• Classic Editor > Publish Sidebar > Update or Publish button
• Classic Widget Editor > Save button
• Posts > Tags > Add Tag button
• Menus > Add to Menu button
• Customize > Menus > Menu > Add Imtes > Custom Links > Add to Menu
• Media (List view) > Edit > Edit Image button
• Media (List view) > Edit > Update button
• Media (List view) > Attach > Search input field

It seems that the positions of these two locations have been misaligned for some time.

• Theme File Editor > Update File button
• Plugin File Editor > Update File button

You can also force the spinner to be displayed by adding the following CSS:

.spinner {
  visibility: visible;
}

[wildworks]

Compare the areas where issues are occurring between WP7.0 and 6.9

Vertically centers the 20px spinner relative to the 40px button height introduced by the new admin design system. Formula: (40 - 20) / 2 = 10px.

• Base .spinner: margin-top 4px → 10px
• #publishing-action .spinner: remove stale 5px margin-top override
• #addtag .spinner: vertical-align top → middle
• .quick-search-wrap .spinner: margin-top -3px → 10px
• .find-box-search .spinner: add explicit top: 10px for absolute position
• widgets.css: split shared rule, update .remove-inactive-widgets margin

Fixes: https://core.trac.wordpress.org/ticket/65131

Trac ticket:

## Use of AI Tools

Trac ticket: <!-- insert a link to the WordPress Trac ticket here -->

### How to Test

Register the following code as a browser bookmark. This will make it easier to test by visualizing the .spinner element.

javascript:(()=>{document.querySelectorAll('.spinner').forEach(e=>e.style.visibility='visible')})();

### Screenshots

Classic Editor > Publish Sidebar > Update or Publish button

---

Classic Widget Editor > Save button

---

Posts > Tags > Add Tag button

---

Menus > Add to Menu button

---

Customize > Menus > Menu > Add Items > Custom Links > Add to Menu

---

Media (List view) > Edit > Edit Image button

---

Media (List view) > Edit > Update button

---

Media (List view) > Attach > Search input field

---

Theme File Editor > Update File button

---

Plugin File Editor > Update File button

## Use of AI Tools

[gaurangsondagar]

Patch Testing Report

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

Environment:

• PHP: 8.2.29
• WordPress: 7.0-RC2-62242
• Web server: Apache
• Database: MySQL
• Browser: Chrome
• OS: Ubuntu 22.04.5 LTS

Active Plugins:

• AI
• AI Provider for Google
• AI Provider for OpenAI

Steps performed:

• Before applying the patch, I tested the admin screens and found that the button spinners were misaligned. After applying the patch, I retested and confirmed that the button spinners are now correctly aligned in the required areas.

Result:
The patch is working as expected and has resolved the issue of misaligned button spinners.

Screenshots for reference:

Before Applying the patch:
​https://snipboard.io/a49jmM.jpg
​https://snipboard.io/IThVWq.jpg
​https://snipboard.io/jBEYCX.jpg
​https://snipboard.io/wj2kgB.jpg
​https://snipboard.io/qPXpmz.jpg

After Applying the patch:
​https://snipboard.io/Z1BVeO.jpg
​https://snipboard.io/0FYWLx.jpg
​https://snipboard.io/YXE8Gn.jpg

Spinners Alignment Issue is Resolved ✅

Classic Editor Add / Edit Post:

Before	After

Classic Widget Editor: Save Button:

Before	After

Add Tag Button:

Before	After

Add Menu Item:

Before	After

Customizer: Add Custom Link Menu Item:

Before	After

Media: Edit Image button

Before	After

Media: Update button

Before	After

Theme File Editor - Update File button

Before	After

Plugin File Editor - Update File button

Before	After

[jadavsanjay]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Patch tested: https://core.trac.wordpress.org/ticket/65131

Environment

• WordPress: 7.1-alpha-20260427.042324
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 147.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Classic Editor and Classic Widgets 1.5.1
  • Test Reports 1.2.1

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Button spinners are now correctly aligned in the required areas after applying the patch.

Supplemental Artifacts

​https://i.postimg.cc/2SmBK20j/1.png
​https://i.postimg.cc/htg75p2h/2.png
​https://i.postimg.cc/P5h8R2SC/3.png
​https://i.postimg.cc/W1nJLgy1/4.png

[SergeyBiryukov]

In 62291:

Admin Reskin: Correct alignment for spinners across the admin.

Follow-up to [61646].

Props wildworks, anupkankale, shailu25, gaurangsondagar, jadavsanjay, SergeyBiryukov.
Fixes #65131.

Thanks for the PR! Merged in r62291.

[SergeyBiryukov]

Reopening for 7.0 consideration.

[peterwilsoncc]

r62291 approved for merge to the 7.0 brnahc.

[peterwilsoncc]

In 62303:

Admin Reskin: Correct alignment for spinners across the admin.

Follow-up to [61646].

Reviewed by peterwilsoncc.
Merges r62291 to the 7.0 branch.

Props wildworks, anupkankale, shailu25, gaurangsondagar, jadavsanjay, SergeyBiryukov.
Fixes #65131.