Changeset 60640

Timestamp:

08/15/2025 06:14:17 PM (8 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/media.css (modified) (1 diff)
• includes/image-edit.php (modified) (1 diff)

trunk/src/wp-admin/css/media.css

@@ -981 +981 @@
 }
 
-.image-editor .imgedit-menu .button {
-    display: inline-block;
-    width: auto;
-    min-height: 28px;
-    font-size: 13px;
-    line-height: 2;
-    padding: 0 10px;
-}
-
 .imgedit-menu .button:after,
 .imgedit-menu .button:before {

trunk/src/wp-admin/includes/image-edit.php

@@ -268 +268 @@
                 </fieldset>
                 <div class="imgedit-crop-apply imgedit-menu container">
-                    <button class="button-primary" type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button> <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-clear button" disabled="disabled"><?php esc_html_e( 'Clear Crop' ); ?></button>
+                    <button class="button button-primary" type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button> <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-clear button" disabled="disabled"><?php esc_html_e( 'Clear Crop' ); ?></button>
                 </div>
             </div>