Classic Editor: slug editing field is too large

[wildworks]

Following a redesign of the form elements, the height of the slug editing field has changed from 30px to 40px.

Since this is very large, I propose changing it to 32px. Additionally, the slug input field, OK button, and Cancel button should be properly aligned.

Trac ticket: https://core.trac.wordpress.org/ticket/65063

## Use of AI Tools

None

## Screenshots

Before	After

Note that this PR contains minimal changes for 7.0. Ideally, we should refactor using the flex layout. Appropriate spacing should also be added, for example, like this.

1200px width:

700px width:

360px width:

Consider changing the ​OK button from button-small to button-compact. It would have the same height as the input on smaller screens when combined with the buttons.css change in #11549.

Then the Cancel button might have a larger font size than 11px, too (by ​removing that rule).

Honestly I would decrease the height of that specific input rather than increasing the height of the button. I know it would be an exception for that specific area but with the provided screenshots, we can see that there is a hierarchy issue: the permalink/slug area should not be displayed with the same visual hierarchy we have for the post title. The text in this section is smaller for this reason.

Thanks for the feedback!

Consider changing the ​OK button from button-small to button-compact. It would have the same height as the input on smaller screens when combined with the buttons.css change in #11549.

The height of the OK button and the slug input field is 32px.

Honestly I would decrease the height of that specific input rather than increasing the height of the button.

The height of the OK button and the slug input field is 24px.

The 24px high input field feels too cramped. I'll try the former approach.

@t-hamano while testing the PR in the playground found focus issue

@Dhruvang2001 Thanks for the report. In fact, the issue has existed for a while, but it became more prominent with the design changes in version 7.0. This is a screenshot from 6.9.

I would appreciate it if you could report this issue in a new ticket.

@t-hamano while testing the PR in the playground found focus issue

I had previously commented from the wrong account and removed it. Sharing it again here from my correct account:

The button and input field are now set to a height of 32px ✅

Before	After

[tusharaddweb]

Tested and confirmed that the slug input field height is currently too large compared to surrounding elements.

Refer below images for confirm.

Before Patch:
​https://postimg.cc/PCcGHqfK

After Patch:
​https://postimg.cc/wyM0jXWs

[khushdoms]

before patch apply

[khushdoms]

after patch apply

[khushdoms]

Tested the patch and confirmed the issue is resolved.

Test Report

Tested patch : ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/11551.diff

Tested PR : ​https://github.com/WordPress/wordpress-develop/pull/11551

Description

This report validates whether the indicated patch works as expected.

Patch tested: (add patch link here)

Environment

• WordPress: 7.1-alpha-62161-src
• PHP: 8.3.30
• Server: nginx/1.29.7
• Database: mysqli (Server: 8.4.8 / Client: mysqlnd 8.3.30)
• Browser: Chrome 147.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None
• Plugins:
  • Disable Gutenberg 3.3.1
  • Test Reports 1.2.1

Steps to Reproduce

1. Open Add New Post screen
2. Edit the permalink (slug)
3. Observe input field height and alignment

Before Patch

• Slug input field height is larger than surrounding elements
• Buttons (OK/Cancel) are not properly aligned ❌

After Patch

• Input field height is consistent (32px)
• Buttons are properly aligned
• UI appears clean and consistent ✅

Actual Results

• Issue resolved successfully with the patch
• No regressions observed

Additional Notes

• Tested at standard zoom (100%)
• UI remains consistent during interaction

Conclusion:
Patch works as expected 👍

[audrasjb]

@wildworks thanks for updating the PR. @joedolson I think we're good to go now!

[peterwilsoncc]

In 62263:

Administration: Resize classic editor slug field for new theme.

Reduces the size and improves the alignment of the post slug field following the re-design of form elements as part of the new admin theme.

Props wildworks, sabernhardt, audrasjb, dhruvang21, shailu25, joedolson, khushdoms, tusharaddweb.
Fixes #65063.

[peterwilsoncc]

Reopening for merge to the 7.0 branch pending another committers sign off.

[wildworks]

Approving [62263] for 7.0 backport.

[peterwilsoncc]

In 62270:

Administration: Resize classic editor slug field for new theme.

Reduces the size and improves the alignment of the post slug field following the re-design of form elements as part of the new admin theme.

Reviewed by wildworks.
Merges r62263 to the 7.0 branch.

Props wildworks, sabernhardt, audrasjb, dhruvang21, shailu25, joedolson, khushdoms, tusharaddweb.
Fixes #65063.