Media: Prevent scaling up of images in the Image Editor.

Previously, when scaling an image larger than the source size in the image edit states the image would silently fail the scaling action. This patch provides an error when someone attempts to scale an image larger than the source size while also disabling the button to initiate the action. 

Props brookedot, joedolson, markoheijnen, mikeschroder, desrosj, Mista-Flo, costdev.
Fixes #26381.

Built from https://develop.svn.wordpress.org/trunk@55859


git-svn-id: http://core.svn.wordpress.org/trunk@55371 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/media-rtl.css

@@ -1155,8 +1155,11 @@ border color while dragging a file over the uploader drop area */
 }
 
 span.imgedit-scale-warn {
-	color: #d63638;
-	font-size: 20px;
+	display: flex;
+	align-items: center;
+	margin: 4px;
+	gap: 4px;
+	color: #b32d2e;
 	font-style: normal;
 	visibility: hidden;
 	vertical-align: middle;

wp-admin/css/media.css

@@ -1154,8 +1154,11 @@ border color while dragging a file over the uploader drop area */
 }
 
 span.imgedit-scale-warn {
-	color: #d63638;
-	font-size: 20px;
+	display: flex;
+	align-items: center;
+	margin: 4px;
+	gap: 4px;
+	color: #b32d2e;
 	font-style: normal;
 	visibility: hidden;
 	vertical-align: middle;

wp-admin/includes/image-edit.php

@@ -143,7 +143,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 			_e( 'scale width' );
 			?>
 		</label>
-		<input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
+		<input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" step="1" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
 		<span class="imgedit-separator" aria-hidden="true">&times;</span>
 		<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text">
 			<?php
@@ -151,10 +151,11 @@ function wp_image_editor( $post_id, $msg = false ) {
 			_e( 'scale height' );
 			?>
 		</label>
-		<input type="text" 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; ?>" />
-		<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
+		<input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['height'] ) ? $meta['height'] : ''; ?>" step="1" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onchange="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; ?>" />
 		<div class="imgedit-scale-button-wrapper"><input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /></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>
 
 		</div>
@@ -893,11 +894,17 @@ function wp_save_image( $post_id ) {
 	$target  = ! empty( $_REQUEST['target'] ) ? preg_replace( '/[^a-z0-9_-]+/i', '', $_REQUEST['target'] ) : '';
 	$scale   = ! empty( $_REQUEST['do'] ) && 'scale' === $_REQUEST['do'];
 
-	if ( $scale && $fwidth > 0 && $fheight > 0 ) {
+	if ( $scale ) {
 		$size = $img->get_size();
 		$sX   = $size['width'];
 		$sY   = $size['height'];
 
+		if ( $sX < $fwidth || $sY < $fheight ) {
+			$return->error = esc_js( __( 'Images cannot be scaled to a size larger than the original.' ) );
+			return $return;
+		}
+
+		if ( $fwidth > 0 && $fheight > 0 ) {
 			// Check if it has roughly the same w / h ratio.
 			$diff = round( $sX / $sY, 2 ) - round( $fwidth / $fheight, 2 );
 			if ( -0.1 < $diff && $diff < 0.1 ) {
@@ -911,6 +918,7 @@ function wp_save_image( $post_id ) {
 				$return->error = esc_js( __( 'Error while saving the scaled image. Please reload the page and try again.' ) );
 				return $return;
 			}
+		}
 	} elseif ( ! empty( $_REQUEST['history'] ) ) {
 		$changes = json_decode( wp_unslash( $_REQUEST['history'] ) );
 		if ( $changes ) {

wp-admin/js/image-edit.js

@@ -226,7 +226,8 @@
 	 */
 	scaleChanged : function( postid, x, el ) {
 		var w = $('#imgedit-scale-width-' + postid), h = $('#imgedit-scale-height-' + postid),
-		warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '';
+		warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '',
+		scaleBtn = $('#imgedit-scale-button');
 
 		if ( false === this.validateNumeric( el ) ) {
 			return;
@@ -242,8 +243,10 @@
 
 		if ( ( h1 && h1 > this.hold.oh ) || ( w1 && w1 > this.hold.ow ) ) {
 			warn.css('visibility', 'visible');
+			scaleBtn.prop('disabled', true);
 		} else {
 			warn.css('visibility', 'hidden');
+			scaleBtn.prop('disabled', false);
 		}
 	},
 

wp-includes/version.php

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