Fix Skip 404 and Link Prefetch settings appearance"

newfold-labs · Jan 23, 2025 · 1374098 · 1374098
1 parent 907426d
commit 1374098
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 133 deletions.
diff --git a/components/linkPrefetch/index.js b/components/linkPrefetch/index.js
@@ -1,5 +1,5 @@
 import {
-	Toggle,
+	ToggleField,
 	TextField,
 	SelectField,
 	Container,
@@ -65,30 +65,17 @@ const LinkPrefetch = ( { methods, constants } ) => {
 				title={ constants.text.linkPrefetchTitle }
 				description={ constants.text.linkPrefetchDescription }
 			>
-				{ /* Desktop Settings */ }
-				<div className="nfd-toggle-field nfd-mb-6">
-					<div>
-						<label
-							className="nfd-label"
-							htmlFor="link-prefetch-active-desktop"
-						>
-							{
-								constants.text
-									.linkPrefetchActivateOnDesktopLabel
-							}
-						</label>
-						<div className="nfd-select-field__description">
-							{
-								constants.text
-									.linkPrefetchActivateOnDesktopDescription
-							}
-						</div>
-					</div>
-					<Toggle
+				<div className="nfd-flex nfd-flex-col nfd-gap-6">
+					{ /* Desktop Settings */ }
+					<ToggleField
 						id="link-prefetch-active-desktop"
-						screenReaderLabel={
+						label={
 							constants.text.linkPrefetchActivateOnDesktopLabel
 						}
+						description={
+							constants.text
+								.linkPrefetchActivateOnDesktopDescription
+						}
 						checked={ settings.activeOnDesktop }
 						onChange={ () =>
 							handleChangeOption(
@@ -97,68 +84,56 @@ const LinkPrefetch = ( { methods, constants } ) => {
 							)
 						}
 					/>
-				</div>
-				{ settings.activeOnDesktop && (
-					<SelectField
-						id="link-prefetch-behavior"
-						label={ constants.text.linkPrefetchBehaviorLabel }
-						value={ settings.behavior }
-						selectedLabel={
-							'mouseDown' === settings.behavior
-								? constants.text
-										.linkPrefetchBehaviorMouseDownLabel
-								: constants.text
-										.linkPrefetchBehaviorMouseHoverLabel
-						}
-						onChange={ ( v ) =>
-							handleChangeOption( 'behavior', v )
-						}
-						description={
-							'mouseDown' === settings.behavior
-								? constants.text
-										.linkPrefetchBehaviorMouseDownDescription
-								: constants.text
-										.linkPrefetchBehaviorMouseHoverDescription
-						}
-						className="nfd-mb-6"
-					>
-						<SelectField.Option
-							label={
-								constants.text
-									.linkPrefetchBehaviorMouseHoverLabel
+					{ settings.activeOnDesktop && (
+						<SelectField
+							id="link-prefetch-behavior"
+							label={ constants.text.linkPrefetchBehaviorLabel }
+							value={ settings.behavior }
+							selectedLabel={
+								'mouseDown' === settings.behavior
+									? constants.text
+											.linkPrefetchBehaviorMouseDownLabel
+									: constants.text
+											.linkPrefetchBehaviorMouseHoverLabel
 							}
-							value="mouseHover"
-						/>
-						<SelectField.Option
-							label={
-								constants.text
-									.linkPrefetchBehaviorMouseDownLabel
+							onChange={ ( v ) =>
+								handleChangeOption( 'behavior', v )
 							}
-							value="mouseDown"
-						/>
-					</SelectField>
-				) }
-				{ /* Mobile Settings */ }
-				<div className="nfd-toggle-field nfd-mb-6">
-					<div>
-						<label
-							className="nfd-label"
-							htmlFor="link-prefetch-active-mobile"
-						>
-							{ constants.text.linkPrefetchActivateOnMobileLabel }
-						</label>
-						<div className="nfd-select-field__description">
-							{
-								constants.text
-									.linkPrefetchActivateOnMobileDescription
+							description={
+								'mouseDown' === settings.behavior
+									? constants.text
+											.linkPrefetchBehaviorMouseDownDescription
+									: constants.text
+											.linkPrefetchBehaviorMouseHoverDescription
 							}
-						</div>
-					</div>
-					<Toggle
+							className="nfd-mb-6"
+						>
+							<SelectField.Option
+								label={
+									constants.text
+										.linkPrefetchBehaviorMouseHoverLabel
+								}
+								value="mouseHover"
+							/>
+							<SelectField.Option
+								label={
+									constants.text
+										.linkPrefetchBehaviorMouseDownLabel
+								}
+								value="mouseDown"
+							/>
+						</SelectField>
+					) }
+					{ /* Mobile Settings */ }
+					<ToggleField
 						id="link-prefetch-active-mobile"
-						screenReaderLabel={
+						label={
 							constants.text.linkPrefetchActivateOnMobileLabel
 						}
+						description={
+							constants.text
+								.linkPrefetchActivateOnMobileDescription
+						}
 						checked={ settings.activeOnMobile }
 						onChange={ () =>
 							handleChangeOption(
@@ -167,61 +142,67 @@ const LinkPrefetch = ( { methods, constants } ) => {
 							)
 						}
 					/>
-				</div>
-				{ settings.activeOnMobile && (
-					<SelectField
-						id="link-prefetch-behavior-mobile"
-						label={ constants.text.linkPrefetchBehaviorLabel }
-						value={ settings.mobileBehavior }
-						selectedLabel={
-							'touchstart' === settings.mobileBehavior
-								? constants.text
+					{ settings.activeOnMobile && (
+						<SelectField
+							id="link-prefetch-behavior-mobile"
+							label={ constants.text.linkPrefetchBehaviorLabel }
+							value={ settings.mobileBehavior }
+							selectedLabel={
+								'touchstart' === settings.mobileBehavior
+									? constants.text
+											.linkPrefetchBehaviorMobileTouchstartLabel
+									: constants.text
+											.linkPrefetchBehaviorMobileViewportLabel
+							}
+							onChange={ ( v ) =>
+								handleChangeOption( 'mobileBehavior', v )
+							}
+							description={
+								'touchstart' === settings.mobileBehavior
+									? constants.text
+											.linkPrefetchBehaviorMobileTouchstartDescription
+									: constants.text
+											.linkPrefetchBehaviorMobileViewportDescription
+							}
+							className="nfd-mb-6"
+						>
+							<SelectField.Option
+								label={
+									constants.text
 										.linkPrefetchBehaviorMobileTouchstartLabel
-								: constants.text
+								}
+								value="touchstart"
+							/>
+							<SelectField.Option
+								label={
+									constants.text
 										.linkPrefetchBehaviorMobileViewportLabel
-						}
-						onChange={ ( v ) =>
-							handleChangeOption( 'mobileBehavior', v )
-						}
-						description={
-							'touchstart' === settings.mobileBehavior
-								? constants.text
-										.linkPrefetchBehaviorMobileTouchstartDescription
-								: constants.text
-										.linkPrefetchBehaviorMobileViewportDescription
-						}
-						className="nfd-mb-6"
-					>
-						<SelectField.Option
+								}
+								value="viewport"
+							/>
+						</SelectField>
+					) }
+					{ /* Ignore Keywords */ }
+					{ ( settings.activeOnMobile ||
+						settings.activeOnDesktop ) && (
+						<TextField
+							id="link-prefetch-ignore-keywords"
 							label={
-								constants.text
-									.linkPrefetchBehaviorMobileTouchstartLabel
+								constants.text.linkPrefetchIgnoreKeywordsLabel
 							}
-							value="touchstart"
-						/>
-						<SelectField.Option
-							label={
+							description={
 								constants.text
-									.linkPrefetchBehaviorMobileViewportLabel
+									.linkPrefetchIgnoreKeywordsDescription
+							}
+							onChange={ ( e ) =>
+								handleChangeOptionIgnoreKeywords(
+									e.target.value
+								)
 							}
-							value="viewport"
+							value={ ignoreKeywords }
 						/>
-					</SelectField>
-				) }
-				{ /* Ignore Keywords */ }
-				{ ( settings.activeOnMobile || settings.activeOnDesktop ) && (
-					<TextField
-						id="link-prefetch-ignore-keywords"
-						label={ constants.text.linkPrefetchIgnoreKeywordsLabel }
-						description={
-							constants.text.linkPrefetchIgnoreKeywordsDescription
-						}
-						onChange={ ( e ) =>
-							handleChangeOptionIgnoreKeywords( e.target.value )
-						}
-						value={ ignoreKeywords }
-					/>
-				) }
+					) }
+				</div>
 			</Container.SettingsField>
 		</>
 	);

diff --git a/components/performance/defaultText.js b/components/performance/defaultText.js
@@ -80,7 +80,7 @@ const defaultText = {
 		'wp-module-performance'
 	),
 	skip404OptionLabel: __(
-		'Skip 404 Handling For Static Files',
+		'Enable Skip 404 Handling For Static Files',
 		'wp-module-performance'
 	),
 	skip404NoticeTitle: __( 'Skip 404 saved', 'wp-module-performance' ),

diff --git a/components/skip404/index.js b/components/skip404/index.js
@@ -2,7 +2,7 @@
 import apiFetch from '@wordpress/api-fetch';
 
 // Newfold
-import { Checkbox, Container } from '@newfold/ui-component-library';
+import { ToggleField, Container } from '@newfold/ui-component-library';
 import { NewfoldRuntime } from '@newfold/wp-module-runtime';
 
 const Skip404 = ( { methods, constants } ) => {
@@ -53,13 +53,11 @@ const Skip404 = ( { methods, constants } ) => {
 			title={ constants.text.skip404Title }
 			description={ constants.text.skip404Description }
 		>
-			<Checkbox
+			<ToggleField
 				id="skip-404"
-				name="skip-404"
-				onChange={ handleSkip404Change }
-				value={ skip404 }
-				checked={ skip404 }
 				label={ constants.text.skip404OptionLabel }
+				checked={ skip404 }
+				onChange={ () => handleSkip404Change( skip404, setSkip404 ) }
 			/>
 		</Container.SettingsField>
 	);