Tweak: Settings page (#334)

assets/dev/js/admin/hello-admin.js

@@ -1,9 +1,9 @@
 import './hello-admin.scss';
 import { render } from '@wordpress/element';
-import { MainPage } from './pages/main-page.js';
+import { SettingsPage } from './pages/settings-page.js';
 
 const App = () => {
-	return <MainPage />;
+	return <SettingsPage />;
 };
 
 document.addEventListener( 'DOMContentLoaded', () => {

assets/dev/js/admin/pages/main-page.js → assets/dev/js/admin/pages/settings-page.js

@@ -4,10 +4,7 @@ import { dispatch, useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import api from '@wordpress/api';
 import { Button, Panel, Placeholder, Spinner, SnackbarList } from '@wordpress/components';
-import { SETTINGS } from './settings.js';
-import { PanelThemeFeatures } from './panels/theme-features.js';
-import { PanelHeadCleanup } from './panels/head-cleanup.js';
-import { PanelScriptsStyles } from './panels/scripts-styles.js';
+import { SettingsPanel } from './../panels/settings-panel.js';
 
 const Notices = () => {
 	const notices = useSelect(
@@ -29,7 +26,15 @@ const Notices = () => {
 	);
 };
 
-export const MainPage = () => {
+const SETTINGS = {
+	DESCRIPTION_META_TAG: '_description_meta_tag',
+	SKIP_LINK: '_skip_link',
+	PAGE_TITLE: '_page_title',
+	HELLO_STYLE: '_hello_style',
+	HELLO_THEME: '_hello_theme',
+};
+
+export const SettingsPage = () => {
 	const [ hasLoaded, setHasLoaded ] = useState( false );
 	const [ settingsData, setSettingsData ] = useState( {} );
 
@@ -115,11 +120,7 @@ export const MainPage = () => {
 			<div className="hello_elementor__main">
 				<Panel>
 
-					<PanelThemeFeatures { ...{ settingsData, updateSettings } } />
-
-					<PanelHeadCleanup { ...{ settingsData, updateSettings } } />
-
-					<PanelScriptsStyles { ...{ settingsData, updateSettings } } />
+					<SettingsPanel { ...{ SETTINGS, settingsData, updateSettings } } />
 
 					<Button isPrimary onClick={ saveSettings }>
 						{ __( 'Save Settings', 'hello-elementor' ) }

assets/dev/js/admin/pages/panels/theme-features.js → assets/dev/js/admin/panels/settings-panel.js

@@ -1,14 +1,18 @@
 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 PanelThemeFeatures = ( { settingsData, updateSettings } ) => {
+export const SettingsPanel = ( { SETTINGS, settingsData, updateSettings } ) => {
 	const protocol = window.location.protocol || 'https:';
 	const hostname = window.location.hostname || 'example.com';
 	const prefix = protocol + '//' + hostname;
 
 	return (
-		<PanelBody title={ __( 'Hello Theme Features', 'hello-elementor' ) } >
+		<PanelBody title={ __( 'Hello Theme Settings', '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={ __( 'Disable description meta tag', 'hello-elementor' ) }
@@ -35,12 +39,20 @@ export const PanelThemeFeatures = ( { settingsData, updateSettings } ) => {
 			<code className="code-example"> &lt;header class=&quot;page-header&quot;&gt; &lt;h1 class=&quot;entry-title&quot;&gt; Post title &lt;/h1&gt; &lt;/header&gt; </code>
 
 			<ToggleControl
-				label={ __( 'Disable WordPress sitemap', 'hello-elementor' ) }
-				help={ __( 'Remove the WordPress sitemap that contains the site pages.', 'hello-elementor' ) }
-				checked={ !! settingsData[ SETTINGS.WP_SITEMAP ] || false }
-				onChange={ ( value ) => updateSettings( SETTINGS.WP_SITEMAP, value ) }
+				label={ __( 'Unregister Hello style.css', '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;{ prefix }/wp-content/themes/hello-elementor/style.min.css&quot; /&gt; </code>
+
+			<ToggleControl
+				label={ __( 'Unregister Hello theme.css', '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 ) }
 			/>
-			<code className="code-example"> &lt;link rel=&quot;sitemap&quot; href=&quot;{ prefix }/wp-sitemap.xml&quot; /&gt; </code>
+			<code className="code-example"> &lt;link rel=&quot;stylesheet&quot; href=&quot;{ prefix }/wp-content/themes/hello-elementor/theme.min.css&quot; /&gt; </code>
 
 		</PanelBody>
 	);