Fix #1516

assets/src/dashboard/parts/connected/settings/Compression.js

@@ -23,6 +23,8 @@ import {
 
 import { useSelect } from '@wordpress/data';
 
+import { useRef } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
@@ -38,6 +40,31 @@ const Compression = ({
 	isSampleLoading,
 	setIsSampleLoading
 }) => {
+	const getQuality = value => {
+		if ( 'number' === typeof value ) {
+			return value;
+		}
+
+		if ( 'auto' === value ) {
+			return 80;
+		}
+
+		if ( 'high_c' === value ) {
+			return 90;
+		}
+
+		if ( 'medium_c' === value ) {
+			return 75;
+		}
+
+		if ( 'low_c' === value ) {
+			return 55;
+		}
+
+		return 80;
+	};
+
+	const manualQualityRef = useRef( getQuality( settings.quality ) );
 	const {
 		sampleImages,
 		isLoading
@@ -61,13 +88,36 @@ const Compression = ({
 	const isBestFormatEnabled = 'disabled' !== settings[ 'best_format' ];
 	const compressionMode = settings[ 'compression_mode' ];
 	const isRetinaEnabled = 'disabled' !== settings[ 'retina_images' ];
+
+	useEffect( () => {
+		if ( isAutoQualityEnabled ) {
+			return;
+		}
+
+		manualQualityRef.current = getQuality( settings.quality );
+	}, [ isAutoQualityEnabled, settings.quality ]);
 	const updateOption = ( option, value ) => {
 		setCanSave( true );
 		const data = { ...settings };
 		data[ option ] = value ? 'enabled' : 'disabled';
 		setSettings( data );
 	};
 
+	const handleAutoQualityToggle = value => {
+		setCanSave( true );
+		const data = { ...settings };
+		data.autoquality = value ? 'enabled' : 'disabled';
+		if ( value ) {
+			manualQualityRef.current = getQuality( settings.quality );
+			data.quality = 'mauto';
+		} else {
+			const manualQuality = manualQualityRef.current ?? getQuality( settings.quality );
+			manualQualityRef.current = manualQuality;
+			data.quality = manualQuality;
+		}
+		setSettings( data );
+	};
+
 	const loadSample = () => {
 		setIsSampleLoading( true );
 
@@ -80,34 +130,11 @@ const Compression = ({
 		);
 	};
 
-	const getQuality = value => {
-		if ( 'number' === typeof value ) {
-			return value;
-		}
-
-		if ( 'auto' === value ) {
-			return 90;
-		}
-
-		if ( 'high_c' === value ) {
-			return 90;
-		}
-
-		if ( 'medium_c' === value ) {
-			return 75;
-		}
-
-		if ( 'low_c' === value ) {
-			return 55;
-		}
-
-		return 90;
-	};
-
 	const updateQuality = value => {
 		setCanSave( true );
 		const data = { ...settings };
 		data.quality = value;
+		manualQualityRef.current = value;
 		setSettings( data );
 	};
 
@@ -316,7 +343,7 @@ const Compression = ({
 									'is-disabled': isLoading
 								}
 							) }
-							onChange={ value => updateOption( 'autoquality', value ) }
+							onChange={ handleAutoQualityToggle }
 						/>
 					</BaseControl>
 

inc/settings.php

@@ -280,7 +280,7 @@ public function parse_settings( $new_settings ) {
 					$sanitized_value = $this->to_bound_integer( $value, 100, 5000 );
 					break;
 				case 'quality':
-					$sanitized_value = $this->to_bound_integer( $value, 1, 100 );
+					$sanitized_value = $this->to_bound_integer( $value, 50, 100 );
 					break;
 				case 'wm_id':
 					$sanitized_value = intval( $value );