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.
Built from https://develop.svn.wordpress.org/trunk@58214


git-svn-id: http://core.svn.wordpress.org/trunk@57677 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2024-05-27 18:03:13 +00:00
parent 68197542eb
commit f07a796aab
6 changed files with 6 additions and 6 deletions

View File

@ -902,7 +902,7 @@ border color while dragging a file over the uploader drop area */
} }
.imgedit-settings { .imgedit-settings {
max-width: 400px; /* Prevent reflow when help info is expanded. */ max-width: 240px; /* Prevent reflow when help info is expanded. */
} }
.imgedit-group-controls > * { .imgedit-group-controls > * {

File diff suppressed because one or more lines are too long

View File

@ -901,7 +901,7 @@ border color while dragging a file over the uploader drop area */
} }
.imgedit-settings { .imgedit-settings {
max-width: 400px; /* Prevent reflow when help info is expanded. */ max-width: 240px; /* Prevent reflow when help info is expanded. */
} }
.imgedit-group-controls > * { .imgedit-group-controls > * {

File diff suppressed because one or more lines are too long

View File

@ -159,8 +159,8 @@ function wp_image_editor( $post_id, $msg = false ) {
<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label> <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
<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; ?>" /> <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> <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>
<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> </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>
</fieldset> </fieldset>
</div> </div>
</div> </div>

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.6-alpha-58213'; $wp_version = '6.6-alpha-58214';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.