Changeset 58214

Timestamp:

05/27/2024 06:01:56 PM (6 weeks ago)

Author:

joedolson

Message:

Media: Improve scale/crop layout in image editor medium breakpoints.

Adjust the max-width of the image edit settings panel so that reflow handling at intermediary breakpoints is more consistent and less fragile.

Props deepakvijayan, huzaifaalmesbah, joedolson, khokansardar.
Fixes #58979.

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

@@ -902 +902 @@
 
 .imgedit-settings {
-    max-width: 400px; /* Prevent reflow when help info is expanded. */
+    max-width: 240px; /* Prevent reflow when help info is expanded. */
 }
 

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

@@ -160 +160 @@
                             <input type="number" step="1" min="0" max="<?php echo isset( $meta['height'] ) ? $meta['height'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
                             <button id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary"><?php esc_html_e( 'Scale' ); ?></button>
+                            </div>
                             <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
-                            </div>
                         </fieldset>
                         </div>