Tweak: Theme settings page

elementor · Oct 19, 2023 · 46b3eb1 · 46b3eb1
1 parent d0a0d91
commit 46b3eb1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/assets/dev/js/admin/hello-admin.scss b/assets/dev/js/admin/hello-admin.scss
@@ -42,6 +42,20 @@
 			background: #ffffff;
 		}
 
+		.components-notice {
+			margin: 0;
+			margin-block-end: 20px;
+
+			.dashicon {
+				padding-inline-end: 10px;
+				color: #f0b849;
+			}
+
+			button {
+				display: none;
+			}
+		}
+
 		.code-example {
 			display: inline-block;
 			margin-block-end: 1.5rem;

diff --git a/assets/dev/js/admin/pages/panels/scripts-styles.js b/assets/dev/js/admin/pages/panels/scripts-styles.js
@@ -1,52 +1,58 @@
 import { __ } from '@wordpress/i18n';
 import { SETTINGS } from '../settings.js';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import { PanelBody, ToggleControl, Notice, Dashicon } from '@wordpress/components';
 
 export const PanelScriptsStyles = ( { settingsData, updateSettings } ) => {
 	return (
 		<PanelBody title={ __( 'Scripts & Styles', 'hello-elementor' ) } >
 
+			<Notice status="warning" isDismissible="false">
+				<Dashicon icon="flag" />
+				{ __( 'Be cautious, disabling some of the following options may break your website.', 'hello-elementor' ) } 
+			</Notice>
+
 			<ToggleControl
 				label={ __( 'Unregister Emoji scripts & styles', 'hello-elementor' ) }
-				help={ __( 'Scripts and styles required to display Emojis.', 'hello-elementor' ) }
+				help={ __( 'Disable emoji-related scripts and styles.', 'hello-elementor' ) }
 				checked={ !! settingsData[ SETTINGS.EMOJI ] || false }
 				onChange={ ( value ) => updateSettings( SETTINGS.EMOJI, value ) }
 			/>
 
 			<ToggleControl
-				label={ __( 'Unregister oEmbed script', 'hello-elementor' ) }
-				help={ __( 'oEmbed-specific JavaScript that loads embeded elements from external recources.', 'hello-elementor' ) }
+				label={ __( 'Unregister wp-embed script', 'hello-elementor' ) }
+				help={ __( 'Disable the script responsible for inline HTML embed of external resources.', 'hello-elementor' ) }
 				checked={ !! settingsData[ SETTINGS.OEMBED_SCRIPT ] || false }
 				onChange={ ( value ) => updateSettings( SETTINGS.OEMBED_SCRIPT, value ) }
 			/>
-			<code className="code-example"> &lt;script type=&quot;text/javascript&quot; src=&quot;https://{ window.location.hostname }/wp-includes/js/wp-embeds.min.js&quot; /&gt; </code>
+			<code className="code-example"> &lt;script type=&quot;text/javascript&quot; src=&quot;https://{ window.location.hostname }/wp-includes/js/wp-embed.min.js&quot; /&gt; </code>
 
 			<ToggleControl
 				label={ __( 'Unregister classic-theme styles', 'hello-elementor' ) }
-				help={ __( "Styles associated with the classic themes that don't use Gutenberg.", 'hello-elementor' ) }
+				help={ __( "Disable the styles associated with classic themes that don't use Gutenberg.", 'hello-elementor' ) }
 				checked={ !! settingsData[ SETTINGS.CLASSIC_THEME_STYLES ] || false }
 				onChange={ ( value ) => updateSettings( SETTINGS.CLASSIC_THEME_STYLES, value ) }
 			/>
 			<code className="code-example"> &lt;link rel=&quot;stylesheet&quot; href=&quot;https://{ window.location.hostname }/wp-includes/css/classic-themes.min.css&quot; /&gt; </code>
 
 			<ToggleControl
 				label={ __( 'Unregister Gutenberg styles', 'hello-elementor' ) }
-				help={ __( 'Gutenberg styles for a cleaner look and enhanced website performance.', 'hello-elementor' ) }
+				help={ __( 'Disable all Gutenberg-related CSS, both static and inline styles.', 'hello-elementor' ) }
 				checked={ !! settingsData[ SETTINGS.GUTENBERG ] || false }
 				onChange={ ( value ) => updateSettings( SETTINGS.GUTENBERG, value ) }
 			/>
+			<code className="code-example"> &lt;link rel=&quot;stylesheet&quot; href=&quot;http://dev.local/wp-includes/css/dist/block-library/style.css&quot; /&gt; </code>
 
 			<ToggleControl
 				label={ __( 'Unregister Hello style.css', 'hello-elementor' ) }
-				help={ __( "Hello theme's style.css file which contains CSS reset rules.", 'hello-elementor' ) }
+				help={ __( "Disable the Hello theme's style.css file which contains CSS reset rules for unified cross-browser view.", 'hello-elementor' ) }
 				checked={ !! settingsData[ SETTINGS.HELLO_STYLE ] || false }
 				onChange={ ( value ) => updateSettings( SETTINGS.HELLO_STYLE, value ) }
 			/>
 			<code className="code-example"> &lt;link rel=&quot;stylesheet&quot; href=&quot;http://{ window.location.hostname }/wp-content/themes/hello-theme/style.min.css&quot; /&gt; </code>
 
 			<ToggleControl
 				label={ __( 'Unregister Hello theme.css', 'hello-elementor' ) }
-				help={ __( "Hello theme's theme.css file which contains CSS rules that style WordPress elements.", 'hello-elementor' ) }
+				help={ __( "Disable the Hello theme's theme.css file which contains CSS rules that style WordPress elements.", 'hello-elementor' ) }
 				checked={ !! settingsData[ SETTINGS.HELLO_THEME ] || false }
 				onChange={ ( value ) => updateSettings( SETTINGS.HELLO_THEME, value ) }
 			/>