feat: integrate v2 settings to new settings

Author: Arukuen

src/components/admin-base-setting/index.js

@@ -5,7 +5,7 @@ let i = 1
 
 const AdminBaseSetting = props => {
 	const [ uid ] = useState( `ugb-admin-setting-${ i++ }` )
-	const isSearched = props.searchedSettings.includes( props.label )
+	const isSearched = props.searchedSettings ? props.searchedSettings.includes( props.label ) : true
 	const mainClasses = classnames( [
 		'ugb-admin-setting',
 		props.className,

src/deprecated/v2/admin.php

@@ -20,7 +20,7 @@ function __construct() {
 				add_action( 'stackable_settings_admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
 
 				// Add the optimization setting.
-				add_action( 'stackable_settings_page_mid', array( $this, 'add_optimization_settings' ), 11 );
+				// add_action( 'stackable_settings_page_mid', array( $this, 'add_block_settings' ), 11 );
 			}
 		}
 
@@ -33,7 +33,7 @@ public function admin_enqueue_scripts() {
 		 *
 		 * @return void
 		 */
-		public function add_optimization_settings() {
+		public function add_block_settings() {
 			?>
 			<article class="s-box" id="block-settings-v2">
 				<h2><?php _e( '🎛 Enable & Disable Blocks', STACKABLE_I18N ) ?> (V2)</h2>

src/deprecated/v2/optimization-settings.php

@@ -35,7 +35,7 @@ function __construct() {
 				}
 
 				// Add the optimization setting.
-				add_action( 'stackable_settings_page_mid', array( $this, 'add_optimization_settings' ) );
+				// add_action( 'stackable_settings_page_mid', array( $this, 'add_optimization_settings' ) );
 			}
 		}
 

src/deprecated/v2/welcome/admin.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import blockData from './blocks'
-
 /**
  * WordPress dependencies
  */
@@ -11,22 +6,19 @@ import {
 	Component, useEffect, useState, Fragment,
 } from '@wordpress/element'
 import { send as ajaxSend } from '@wordpress/ajax'
-import domReady from '@wordpress/dom-ready'
 import { Spinner } from '@wordpress/components'
 import { loadPromise, models } from '@wordpress/api'
 
 /**
  * External dependencies
  */
 import {
-	v2disabledBlocks as disabledBlocks,
 	i18n,
 	v2nonce as nonce,
 } from 'stackable'
 import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
-import { createRoot } from '~stackable/util/element'
 
-class BlockToggler extends Component {
+export class BlockToggler extends Component {
 	constructor() {
 		super( ...arguments )
 		this.toggleBlock = this.toggleBlock.bind( this )
@@ -81,7 +73,7 @@ class BlockToggler extends Component {
 	}
 
 	render() {
-		const { blocks: blockData } = this.props
+		const { blocks: blockData, searchedSettings: searchedSettings } = this.props
 
 		return (
 			<div>
@@ -105,6 +97,7 @@ class BlockToggler extends Component {
 							<AdminToggleSetting
 								key={ i }
 								label={ __( block.title, i18n ) } /* eslint-disable-line @wordpress/i18n-no-variables */
+								searchedSettings={ searchedSettings }
 								value={ ! isDisabled }
 								onChange={ () => this.toggleBlock( blockName ) }
 								size="small"
@@ -119,7 +112,7 @@ class BlockToggler extends Component {
 	}
 }
 
-const OptimizationSettings = () => {
+export const OptimizationSettings = ( { searchSettings } ) => {
 	const [ optimizeScriptLoad, setOptimizeScriptLoad ] = useState( false )
 
 	useEffect( () => {
@@ -140,25 +133,11 @@ const OptimizationSettings = () => {
 	return <Fragment>
 		<AdminToggleSetting
 			label={ __( 'Frontend JS & CSS Files', i18n ) }
+			searchSettings={ searchSettings }
 			value={ optimizeScriptLoad }
 			onChange={ updateOptimizeScriptLoad }
 			disabled={ __( 'Load across entire site', i18n ) }
 			enabled={ __( 'Load only in posts with Stackable blocks', i18n ) }
 		/>
 	</Fragment>
 }
-
-// Load all the options into the UI.
-domReady( () => {
-	if ( document.querySelector( '.s-settings-wrapper-v2' ) ) {
-		createRoot( document.querySelector( '.s-settings-wrapper-v2' ) ).render(
-			<BlockToggler blocks={ blockData } disabledBlocks={ disabledBlocks } />
-		)
-	}
-
-	if ( document.querySelector( '.s-optimization-settings' ) ) {
-		createRoot( document.querySelector( '.s-optimization-settings' ) ).render(
-			<OptimizationSettings />
-		)
-	}
-} )

src/welcome/admin.js

@@ -25,6 +25,7 @@ import {
 	i18n,
 	showProNoticesOption,
 	isPro,
+	v2disabledBlocks,
 } from 'stackable'
 import classnames from 'classnames'
 import { importBlocks } from '~stackable/util/admin'
@@ -35,6 +36,8 @@ import AdminTextSetting from '~stackable/components/admin-text-setting'
 import AdminToolbarSetting from '~stackable/components/admin-toolbar-setting'
 import { GettingStarted } from './getting-started'
 import { BLOCK_STATE } from '~stackable/util/blocks'
+import { BlockToggler, OptimizationSettings } from '~stackable/deprecated/v2/welcome/admin'
+import blockData from '~stackable/deprecated/v2/welcome/blocks'
 
 const FREE_BLOCKS = importBlocks( require.context( '../block', true, /block\.json$/ ) )
 
@@ -222,6 +225,22 @@ const SEARCH_TREE = [
 			},
 		],
 	},
+	{
+		id: 'v2-settings',
+		label: __( 'V2 Settings', i18n ),
+		groups: [
+			{
+				id: 'optimizations',
+				children: [
+					__( 'Frontend JS & CSS Files' ),
+				],
+			},
+			{
+				id: 'blocks',
+				children: Object.values( blockData ).map( block => block.title ),
+			},
+		],
+	},
 ]
 
 const BLOCK_DEPENDENCIES = {
@@ -402,6 +421,7 @@ const Sidenav = ( {
 	currentSearch,
 	filteredSearchTree,
 	isSaving,
+	hasV2Tab,
 } ) => {
 	const saveButtonClasses = classnames( [
 		's-save-changes',
@@ -424,6 +444,11 @@ const Sidenav = ( {
 							{ 's-sidenav-item-highlight': isSearched },
 							{ 's-active': currentTab === id },
 						] )
+
+						if ( id === 'v2-settings' && ! hasV2Tab ) {
+							return null
+						}
+
 						return ( <button
 							key={ id }
 							className={ tabClasses }
@@ -437,12 +462,14 @@ const Sidenav = ( {
 						)
 					} ) }
 					<div className="s-save-changes-wrapper">
-						<button
-							className={ saveButtonClasses }
-							onClick={ handleSettingsSave }
-						>
-							{ isSaving ? <Spinner /> : __( 'Save Changes', i18n ) }
-						</button>
+						{ currentTab !== 'v2-settings' &&
+							<button
+								className={ saveButtonClasses }
+								onClick={ handleSettingsSave }
+							>
+								{ isSaving ? <Spinner /> : __( 'Save Changes', i18n ) }
+							</button>
+						}
 					</div>
 				</div>
 			</nav>
@@ -474,6 +501,13 @@ const Settings = () => {
 	const [ currentTab, setCurrentTab ] = useState( 'editor-settings' )
 	const [ currentSearch, setCurrentSearch ] = useState( '' )
 	const [ isSaving, setIsSaving ] = useState( false )
+	const [ hasV2Tab, setHasV2Tab ] = useState( false )
+
+	const hasV2Compatibility = currentSettings => {
+		return currentSettings.stackable_v2_frontend_compatibility === '1' ||
+			currentSettings.stackable_v2_editor_compatibility === '1' ||
+			currentSettings.stackable_v2_editor_compatibility_usage === '1'
+	}
 
 	const handleSettingsChange = useCallback( newSettings => {
 		setSettings( prev => ( { ...prev, ...newSettings } ) )
@@ -500,10 +534,19 @@ const Settings = () => {
 			const settings = new models.Settings()
 			settings.fetch().then( response => {
 				setSettings( response )
+				// Should only be set initially since we have to reload after setting for it to work with the backend
+				setHasV2Tab( hasV2Compatibility( response ) )
 			} )
 		} )
 	}, [] )
 
+	// However, when disabling V2 blocks, update the settings page to disallow further configuration
+	useEffect( () => {
+		if ( ! hasV2Compatibility( settings ) ) {
+			setHasV2Tab( false )
+		}
+	}, [ settings ] )
+
 	const hasUnsavedChanges = useMemo( () => Object.keys( unsavedChanges ).length > 0, [ unsavedChanges ] )
 	const filteredSearchTree = useMemo( () => {
 		if ( ! currentSearch ) {
@@ -526,6 +569,7 @@ const Settings = () => {
 		settings,
 		handleSettingsChange,
 		filteredSearchTree,
+		currentTab,
 	}
 
 	return <>
@@ -537,6 +581,7 @@ const Settings = () => {
 			currentSearch={ currentSearch }
 			filteredSearchTree={ filteredSearchTree }
 			isSaving={ isSaving }
+			hasV2Tab={ hasV2Tab }
 		/>
 		<article className="s-box" id={ currentTab }>
 			<Searchbar currentSearch={ currentSearch } handleSearchChange={ setCurrentSearch } />
@@ -549,6 +594,8 @@ const Settings = () => {
 			{ currentTab === 'custom-fields-settings' && <CustomFields { ...props } /> }
 			{ currentTab === 'integrations' && <Integrations { ...props } /> }
 			{ currentTab === 'other-settings' && <AdditionalOptions { ...props } /> }
+			{ /* Render the V2 settings and show/hide via CSS */ }
+			<V2Settings { ...props } />
 		</article>
 	</>
 }
@@ -1262,6 +1309,7 @@ const AdditionalOptions = props => {
 			{ migrationSettings.children.length > 0 &&
 				<div className="s-setting-group">
 					<h3>{ __( 'Migration Settings', i18n ) }</h3>
+					<p>{ __( 'After enabling the version 2 blocks, please refresh the page to re-fetch the blocks from the server.', i18n ) }</p>
 					<p>
 						{ __( 'Migrating from version 2 to version 3?', i18n ) }
 						&nbsp;
@@ -1308,8 +1356,39 @@ const AdditionalOptions = props => {
 	)
 }
 
-AdditionalOptions.defaultProps = {
-	showProNoticesOption: false,
+const V2Settings = props => {
+	const groups = props.filteredSearchTree.find( tab => tab.id === 'v2-settings' ).groups
+	const optimizations = groups.find( group => group.id === 'optimizations' )
+	const blocks = groups.find( group => group.id === 'blocks' )
+
+	const classes = classnames( [
+		's-v2-settings',
+		{ 's-settings-hide': props.currentTab !== 'v2-settings' },
+	] )
+
+	return (
+		<div className={ classes }>
+			{ optimizations.children.length > 0 &&
+				<div className="s-setting-group">
+					<h2>{ __( '🏃‍♂️ Optimization Settings', i18n ) } (V2)</h2>
+					<p className="s-settings-subtitle">
+						{ __( 'Here are some settings that you can tweak to optimize Stackable.', i18n ) }
+						<a href="https://docs.wpstackable.com/article/460-how-to-use-optimization-settings?utm_source=wp-settings-global-settings&utm_campaign=learnmore&utm_medium=wp-dashboard" target="_docs">{ __( 'Learn more.', i18n ) } </a>
+						<br />
+						<strong>{ __( 'This only works for version 2 blocks.', i18n ) }</strong>
+					</p>
+					<OptimizationSettings searchedSettings={ optimizations.children } />
+				</div>
+			}
+			{ blocks.children.length > 0 &&
+				<div className="s-setting-group">
+					<h2>{ __( 'Enable & Disable Blocks', i18n ) } (V2)</h2>
+					<strong>{ __( 'This only works for version 2 blocks.', i18n ) }</strong>
+					<BlockToggler blocks={ blockData } disabledBlocks={ v2disabledBlocks } searchedSettings={ blocks.children } />
+				</div>
+			}
+		</div>
+	)
 }
 
 // Load all the options into the UI.

src/welcome/admin.scss

@@ -673,6 +673,12 @@ body.toplevel_page_stk-custom-fields {
 		}
 	}
 
+	.s-v2-settings {
+		&.s-settings-hide {
+			display: none;
+		}
+	}
+
 	.s-side {
 		h2,
 		h3 {

src/welcome/index.php

@@ -192,11 +192,6 @@ public function stackable_settings_content() {
 
 						<div class="s-content" id="settings-content"></div>
 						<?php do_action( 'stackable_settings_page_mid' ); ?>
-						<!-- We put all the other options here. -->
-						<article class="s-box s-box-hidden" id="other-settings">
-							<h2><?php _e( '🔩 Other Settings', STACKABLE_I18N ) ?></h2>
-							<aside class="s-other-options-wrapper"></aside>
-						</article>
 					</div>
 					<!-- <div class="s-side">
 						<?php if ( ! sugb_fs()->can_use_premium_code() ) : ?>