Tweak: hide set of Image Optimization options when the main one is di…

…sabled
newfold-labs · Feb 18, 2025 · 6a8dd75 · 6a8dd75
1 parent 0bd8062
commit 6a8dd75
Showing 1 changed file with 109 additions and 93 deletions.
diff --git a/components/imageOptimizationSettings/index.js b/components/imageOptimizationSettings/index.js
@@ -172,102 +172,118 @@ const ImageOptimizationSettings = ( { methods } ) => {
 					}
 				/>
 
-				<ToggleField
-					id="auto-optimize-images"
-					label={ defaultText.imageOptimizationAutoOptimizeLabel }
-					description={
-						defaultText.imageOptimizationAutoOptimizeDescription
-					}
-					checked={ autoOptimizeEnabled }
-					onChange={ () =>
-						handleToggleChange(
-							'autoOptimizeEnabled',
-							! autoOptimizeEnabled
-						)
-					}
-					disabled={ ! enabled }
-				/>
-
-				<ToggleField
-					id="bulk-optimize-images"
-					label={ defaultText.imageOptimizationBulkOptimizeLabel }
-					description={
-						<>
-							<p>
-								{
-									defaultText.imageOptimizationBulkOptimizeDescription
-								}
-							</p>
-							{ bulkOptimization && (
-								<a
-									href={ mediaLibraryLink() }
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									{
-										defaultText.imageOptimizationBulkOptimizeButtonLabel
-									}
-								</a>
-							) }
-						</>
-					}
-					checked={ bulkOptimization }
-					onChange={ () =>
-						handleToggleChange( 'bulkOptimize', ! bulkOptimization )
-					}
-					disabled={ ! enabled }
-				/>
+				{ enabled && (
+					<>
+						<ToggleField
+							id="auto-optimize-images"
+							label={
+								defaultText.imageOptimizationAutoOptimizeLabel
+							}
+							description={
+								defaultText.imageOptimizationAutoOptimizeDescription
+							}
+							checked={ autoOptimizeEnabled }
+							onChange={ () =>
+								handleToggleChange(
+									'autoOptimizeEnabled',
+									! autoOptimizeEnabled
+								)
+							}
+							disabled={ ! enabled }
+						/>
+						<ToggleField
+							id="bulk-optimize-images"
+							label={
+								defaultText.imageOptimizationBulkOptimizeLabel
+							}
+							description={
+								<>
+									<p>
+										{
+											defaultText.imageOptimizationBulkOptimizeDescription
+										}
+									</p>
+									{ bulkOptimization && (
+										<a
+											href={ mediaLibraryLink() }
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											{
+												defaultText.imageOptimizationBulkOptimizeButtonLabel
+											}
+										</a>
+									) }
+								</>
+							}
+							checked={ bulkOptimization }
+							onChange={ () =>
+								handleToggleChange(
+									'bulkOptimize',
+									! bulkOptimization
+								)
+							}
+							disabled={ ! enabled }
+						/>
 
-				<ToggleField
-					id="prefer-webp-when-exists"
-					label={ defaultText.imageOptimizationPreferWebPLabel }
-					description={
-						defaultText.imageOptimizationPreferWebPDescription
-					}
-					checked={ preferOptimizedImageWhenExists }
-					onChange={ () =>
-						handleToggleChange(
-							'preferOptimizedImageWhenExists',
-							! preferOptimizedImageWhenExists
-						)
-					}
-					disabled={ ! enabled }
-				/>
+						<ToggleField
+							id="prefer-webp-when-exists"
+							label={
+								defaultText.imageOptimizationPreferWebPLabel
+							}
+							description={
+								defaultText.imageOptimizationPreferWebPDescription
+							}
+							checked={ preferOptimizedImageWhenExists }
+							onChange={ () =>
+								handleToggleChange(
+									'preferOptimizedImageWhenExists',
+									! preferOptimizedImageWhenExists
+								)
+							}
+							disabled={ ! enabled }
+						/>
 
-				<ToggleField
-					id="auto-delete-original"
-					label={ defaultText.imageOptimizationAutoDeleteLabel }
-					description={
-						defaultText.imageOptimizationAutoDeleteDescription
-					}
-					checked={ autoDeleteOriginalImage }
-					onChange={ () =>
-						handleToggleChange(
-							'autoDeleteOriginalImage',
-							! autoDeleteOriginalImage
-						)
-					}
-					disabled={
-						! enabled ||
-						( ! autoOptimizeEnabled && ! bulkOptimization )
-					}
-				/>
+						<ToggleField
+							id="auto-delete-original"
+							label={
+								defaultText.imageOptimizationAutoDeleteLabel
+							}
+							description={
+								defaultText.imageOptimizationAutoDeleteDescription
+							}
+							checked={ autoDeleteOriginalImage }
+							onChange={ () =>
+								handleToggleChange(
+									'autoDeleteOriginalImage',
+									! autoDeleteOriginalImage
+								)
+							}
+							disabled={
+								! enabled ||
+								( ! autoOptimizeEnabled && ! bulkOptimization )
+							}
+						/>
 
-				<ToggleField
-					id="lazy-loading-enabled"
-					label={ defaultText.imageOptimizationLazyLoadingLabel }
-					description={
-						defaultText.imageOptimizationLazyLoadingDescription
-					}
-					checked={ lazyLoading.enabled }
-					onChange={ () =>
-						handleToggleChange(
-							'lazyLoading',
-							! lazyLoading.enabled
-						)
-					}
-					disabled={ ! enabled }
-				/>
+						<ToggleField
+							id="lazy-loading-enabled"
+							label={
+								defaultText.imageOptimizationLazyLoadingLabel
+							}
+							description={
+								defaultText.imageOptimizationLazyLoadingDescription
+							}
+							checked={ lazyLoading.enabled }
+							onChange={ () =>
+								handleToggleChange(
+									'lazyLoading',
+									! lazyLoading.enabled
+								)
+							}
+							disabled={ ! enabled }
+						/>
+					</>
+				) }
 			</div>
 		</Container.SettingsField>
 	);