Buttons on Edit Media screen have smaller height than other buttons

[hbhalodia]

• On Edit media screen, we have some buttons which are used to update the media, may be crop, rotate etc, for which the buttons sizes are not consistent are less than other buttons across the admin site.
• Button such as, Crop, Scale, rotation have 28px height, while the button across site have 30px, which looks odd.
• When we try to add the crop, we see 2 buttons in line, Apply Crop and Clear Crop, which actually identifies this issue, as both buttons are not aligned and Clear crop button is actually a 2px small, which should not be.
• CSS which adds this is actually added here, ​https://github.com/WordPress/wordpress-develop/blob/eeb8fbf81bfc3fe83efd9bc327ac5015211b76b7/src/wp-admin/css/media.css#L974-L980, On changing to 30px, actually resolves the issue.

[hbhalodia]

Button with 28px height

[hbhalodia]

Button with 30px height

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

• After Fix:

[sabernhardt]

[46326] resized the image editing buttons to show text with the icons, but then [46866] apparently missed standardizing their height.

Hi @sabernhardt, I have updated the PR to use the 28px line height.

[sandeepdahiya]

Bug Reproduction and Test Report

✅ This report validates that the indicated patch addresses the issue.
Patch tested: ​Patch-8963.diff

Environment

• OS: Windows 11 Home
• Web Server: Nginx 1.27.5
• PHP: 8.2.28
• WordPress: 6.9-alpha-60093-src
• Browser: Mozilla Firefox 139.0.1 (Latest)
• Theme: Twenty Fourteen
• Active Plugins:
  • Code Snippets 3.6.8
  • WordPress Beta Tester 3.6.3

Actual Results

• 🐞 Bug reproduction - On the Media → Edit Image screen, several buttons had inconsistent heights. The "Apply Crop" button was 30px, while other action buttons — "Clear Crop", "Crop", "Scale", and "Rotate" — were only 28px high, resulting in visual misalignment.

​Clear crop button 28px
​Crop, Scale, Image Rotation - Button 28px
​Apply crop button 30px

• ✅ Issue resolved with patch – It standardizes all related buttons to 30px height, resolving the inconsistency.

​Apply Crop, Clear Crop button - 30px
​Crop, Scale, Image Rotation - Button 30px

Additional Notes

• The above patch works smoothly on smaller screen sizes as well.

[mikinc860]

The solution appears to be working, but it's also affecting other buttons on the same screen. Please ensure that everything remains properly aligned.

[hbhalodia]

Hi @mikinc860, Can you please share how it's affecting other buttons, or what other buttons are being affected? It would help in updating the solution.

Thank You,

The changes looks good to me.

[mukesh27]

Mark ready for commit.

[joedolson]

Added some additional comments on the PR; but to summarize, I don't think this selector is needed anymore, and we can just get rid of all the rules applying to it.

I question whether any of the styles in this selector are actually needed. All of them except width: auto are just duplicating the styles already applied by .wp-core-ui .button; and I don't see that is making any difference.

I think it would be a better change to eliminate this whole selector; I suspect that the only reason it's here is because these _used_ to be icon buttons, and needed different styles to support that.

Yes, I checked that by removing it and seems that it uses .wp-core-ui .button styles, and we can remove that selector. I am updating the PR with the changes.

Thank You,

[hbhalodia]

Hi @joedolson, Have updated the PR to eliminate the selector and used default .wp-core-ui button styles for the same.

Commit - ​https://github.com/WordPress/wordpress-develop/pull/8963/commits/f5b19d1f91adf28e417574c0bf55703bf818bfa6

Thank You,

Removing the ruleset makes a big difference on mobile. All the buttons in .imgedit-panel-tools plus 'Clear Crop' would have a larger size and larger text.

​Apply Crop would still need the .button class to be consistent with 'Clear Crop' and other buttons.
<button class="button button-primary"

English, before and after, at 750 pixels wide (Edit Media, list view)

French, before and after, at 750 pixels wide (Edit Media, list view)

[joedolson]

In my opinion, that's a good change on mobile; but would appreciate second opinions on that.

And yes, I agree that this doesn't work unless the Apply Crop button gets .button

​Apply Crop would still need the .button class to be consistent with 'Clear Crop' and other buttons.
<button class="button button-primary"

I agree on this, button class should be added on Apply crop button.

For the other changes, I think we should take other opinions as well, but IMO, on mobile button size is same as other buttons on across the admin area. I have checked posts, comments, plugins have same size as we are seeing after change in media.

[joedolson]

I gave some thought to exploring the original intent in having these buttons not match the sizing on mobile that other buttons do. Looking at the code history, I think it was just overlooked when the controls were changed from div elements to button elements in 2015; the previous styles were simply copied over to the new button elements without applying global styling for buttons.

As such, in my opinion the larger buttons on mobile is more in keeping with the intentions of the mobile viewport for WordPress and this should be committed with this change.

[joedolson]

Sorry, that was 2016. But it was in January.... ​https://github.com/WordPress/wordpress-develop/commit/05934ebd872b6b5169bf0908318f173286dfb227

[joedolson]

In 60640:

Media: Fix button sizing on Edit Media screen.

On the Edit Media screen, buttons were not all of consistent size. This was caused by custom sizing applied to CSS in the Edit Media panel that was not consistent with other button sizes.

Remove custom sizing and adds class so all Edit Media buttons will match styling of other admin buttons in desktop and mobile viewports.

Props hbhalodia, sabernhardt, sandeepdahiya, mikinc860, mukesh27, joedolson.
Fixes #63559.