Tweak: Theme settings page [ED-11811] (#331)

* Tweak: Theme settings page * JS lint * update * update * update
elementor · Oct 19, 2023 · 804b285 · 804b285
1 parent d0a0d91
commit 804b285
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 15 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' ) }
-				checked={ !! settingsData[ SETTINGS.OEMBED_SCRIPT ] || false }
-				onChange={ ( value ) => updateSettings( SETTINGS.OEMBED_SCRIPT, value ) }
+				label={ __( 'Unregister wp-embed script', 'hello-elementor' ) }
+				help={ __( 'Disable the script which is responsible for embedding external resources.', 'hello-elementor' ) }
+				checked={ !! settingsData[ SETTINGS.WP_EMBED_SCRIPT ] || false }
+				onChange={ ( value ) => updateSettings( SETTINGS.WP_EMBED_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 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 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 ) }
 			/>

diff --git a/assets/dev/js/admin/pages/settings.js b/assets/dev/js/admin/pages/settings.js
@@ -16,7 +16,7 @@ export const SETTINGS = {
 	POST_COMMENTS_RSS: '_post_comments_rss',
 	/* Scripts & Styles */
 	EMOJI: '_emoji',
-	OEMBED_SCRIPT: '_oembed_script',
+	WP_EMBED_SCRIPT: '_wp_embed_script',
 	CLASSIC_THEME_STYLES: '_classic_theme_styles',
 	GUTENBERG: '_gutenberg',
 	HELLO_STYLE: '_hello_style',

diff --git a/includes/settings-functions.php b/includes/settings-functions.php
@@ -95,7 +95,7 @@ function hello_elementor_tweak_settings() {
 		'POST_COMMENTS_RSS' => '_post_comments_rss',
 		/* Scripts & Styles */
 		'EMOJI' => '_emoji',
-		'OEMBED_SCRIPT' => '_oembed_script',
+		'WP_EMBED_SCRIPT' => '_wp_embed_script',
 		'CLASSIC_THEME_STYLES' => '_classic_theme_styles',
 		'GUTENBERG' => '_gutenberg',
 		'HELLO_STYLE' => '_hello_style',
@@ -207,7 +207,7 @@ function hello_elementor_render_tweaks( $settings_group, $settings ) {
 		remove_action( 'wp_print_styles', 'wp_enqueue_emoji_styles' ); // WP 6.4 and above
 	} );
 
-	hello_elementor_do_tweak( $settings_group . $settings['OEMBED_SCRIPT'], function() {
+	hello_elementor_do_tweak( $settings_group . $settings['WP_EMBED_SCRIPT'], function() {
 		remove_action( 'wp_head', 'wp_oembed_add_host_js' );
 		add_action( 'wp_enqueue_scripts', function() {
 			wp_deregister_script( 'wp-embed' );

diff --git a/readme.txt b/readme.txt
@@ -52,7 +52,7 @@ Source: https://stocksnap.io/photo/4B83RD7BV9
 * New: Option to remove site comments RSS feed.
 * New: Option to remove post comments RSS feed.
 * New: Option to unregister Emoji scripts & styles.
-* New: Option to unregister oEmbed script.
+* New: Option to unregister wp-embed script.
 * New: Option to unregister classic-theme styles.
 * New: Option to unregister Gutenberg styles.
 * New: Option to unregister Hello style.css.