From 8d4376c831a6edbacf698fdc921695ad1ba1ee33 Mon Sep 17 00:00:00 2001 From: Ionut Neagu Date: Wed, 1 Oct 2025 13:50:16 +0200 Subject: [PATCH 1/5] Improve quality setting handling in Compression settings Refactored the Compression.js component to better handle toggling between auto and manual quality settings, preserving the user's manual quality value when switching modes. Updated the minimum allowed quality value in settings.php from 1 to 50 for better image quality control. --- .../parts/connected/settings/Compression.js | 99 ++++++++++++------- inc/settings.php | 2 +- 2 files changed, 64 insertions(+), 37 deletions(-) diff --git a/assets/src/dashboard/parts/connected/settings/Compression.js b/assets/src/dashboard/parts/connected/settings/Compression.js index 7ed554c8..190d4882 100644 --- a/assets/src/dashboard/parts/connected/settings/Compression.js +++ b/assets/src/dashboard/parts/connected/settings/Compression.js @@ -24,6 +24,8 @@ import { import { useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; + /** * Internal dependencies. */ @@ -39,6 +41,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 @@ -60,6 +87,14 @@ 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 }; @@ -67,6 +102,21 @@ const Compression = ({ 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 ); @@ -79,34 +129,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 ); }; @@ -296,18 +323,18 @@ const Compression = ({ -

} - checked={ isAutoQualityEnabled } - disabled={ isLoading } - className={ classnames( - { - 'is-disabled': isLoading - } - ) } - onChange={ value => updateOption( 'autoquality', value ) } - /> +

} + checked={ isAutoQualityEnabled } + disabled={ isLoading } + className={ classnames( + { + 'is-disabled': isLoading + } + ) } + onChange={ handleAutoQualityToggle } + /> { ! isAutoQualityEnabled && ( diff --git a/inc/settings.php b/inc/settings.php index 2c837641..d525799b 100644 --- a/inc/settings.php +++ b/inc/settings.php @@ -278,7 +278,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 ); From be3acff904291533604f7939b20a6a30da63ae51 Mon Sep 17 00:00:00 2001 From: Ionut Neagu Date: Wed, 1 Oct 2025 14:21:25 +0200 Subject: [PATCH 2/5] fixed linting --- .../parts/connected/settings/Compression.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/assets/src/dashboard/parts/connected/settings/Compression.js b/assets/src/dashboard/parts/connected/settings/Compression.js index 190d4882..bdeac129 100644 --- a/assets/src/dashboard/parts/connected/settings/Compression.js +++ b/assets/src/dashboard/parts/connected/settings/Compression.js @@ -24,7 +24,7 @@ import { import { useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import { useEffect, useRef } from '@wordpress/element'; +import { useRef } from '@wordpress/element'; /** * Internal dependencies. @@ -94,7 +94,7 @@ const Compression = ({ } manualQualityRef.current = getQuality( settings.quality ); - }, [ isAutoQualityEnabled, settings.quality ] ); + }, [ isAutoQualityEnabled, settings.quality ]); const updateOption = ( option, value ) => { setCanSave( true ); const data = { ...settings }; @@ -323,18 +323,18 @@ const Compression = ({ -

} - checked={ isAutoQualityEnabled } - disabled={ isLoading } - className={ classnames( - { - 'is-disabled': isLoading - } - ) } - onChange={ handleAutoQualityToggle } - /> +

} + checked={ isAutoQualityEnabled } + disabled={ isLoading } + className={ classnames( + { + 'is-disabled': isLoading + } + ) } + onChange={ handleAutoQualityToggle } + /> { ! isAutoQualityEnabled && ( From b0c209909a51426e4561ed0fb4011f0df987156c Mon Sep 17 00:00:00 2001 From: Ionut Neagu Date: Fri, 3 Oct 2025 10:15:47 +0200 Subject: [PATCH 3/5] Update settings.php --- inc/settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inc/settings.php b/inc/settings.php index d525799b..9fec4ad0 100644 --- a/inc/settings.php +++ b/inc/settings.php @@ -75,7 +75,7 @@ class Optml_Settings { 'compression_mode' => 'custom', 'cloud_sites' => [ 'all' => 'true' ], 'watchers' => '', - 'quality' => 'auto', + 'quality' => 80, 'wm_id' => - 1, 'wm_opacity' => 1, 'wm_position' => Position::SOUTH_EAST, From 1fe91eded714f0c5295fb90fe51edc9699a2e18a Mon Sep 17 00:00:00 2001 From: Soare Robert-Daniel Date: Wed, 8 Oct 2025 17:41:35 +0300 Subject: [PATCH 4/5] fix: handle `mauto` for quality value on saving --- .../parts/connected/settings/Compression.js | 30 ++----------------- inc/settings.php | 4 ++- 2 files changed, 5 insertions(+), 29 deletions(-) diff --git a/assets/src/dashboard/parts/connected/settings/Compression.js b/assets/src/dashboard/parts/connected/settings/Compression.js index bdeac129..9c432ee7 100644 --- a/assets/src/dashboard/parts/connected/settings/Compression.js +++ b/assets/src/dashboard/parts/connected/settings/Compression.js @@ -24,8 +24,6 @@ import { import { useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import { useRef } from '@wordpress/element'; - /** * Internal dependencies. */ @@ -46,7 +44,7 @@ const Compression = ({ return value; } - if ( 'auto' === value ) { + if ( 'auto' === value || 'mauto' === value ) { return 80; } @@ -65,7 +63,6 @@ const Compression = ({ return 80; }; - const manualQualityRef = useRef( getQuality( settings.quality ) ); const { sampleImages, isLoading @@ -88,13 +85,6 @@ const Compression = ({ 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 }; @@ -102,21 +92,6 @@ const Compression = ({ 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 ); @@ -133,7 +108,6 @@ const Compression = ({ setCanSave( true ); const data = { ...settings }; data.quality = value; - manualQualityRef.current = value; setSettings( data ); }; @@ -333,7 +307,7 @@ const Compression = ({ 'is-disabled': isLoading } ) } - onChange={ handleAutoQualityToggle } + onChange={ value => updateOption( 'autoquality', value ) } /> diff --git a/inc/settings.php b/inc/settings.php index 9fec4ad0..16121d92 100644 --- a/inc/settings.php +++ b/inc/settings.php @@ -278,7 +278,9 @@ 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, 50, 100 ); + if ( 'mauto' !== $value ) { + $sanitized_value = $this->to_bound_integer( $value, 50, 100 ); + } break; case 'wm_id': $sanitized_value = intval( $value ); From 124434d2fcb9ee881b969f57dd27e5f225d29ee1 Mon Sep 17 00:00:00 2001 From: Soare Robert-Daniel Date: Wed, 8 Oct 2025 17:51:43 +0300 Subject: [PATCH 5/5] chore: phpstan --- inc/settings.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/inc/settings.php b/inc/settings.php index 16121d92..c88e87be 100644 --- a/inc/settings.php +++ b/inc/settings.php @@ -237,7 +237,9 @@ public function auto_connect() { * @return array */ public function parse_settings( $new_settings ) { - $sanitized = []; + $sanitized = []; + $sanitized_value = ''; + foreach ( $new_settings as $key => $value ) { switch ( $key ) { case 'admin_bar_item':