make text inline, use plain js to open/close panels

Author: kaeizen

src/components/color-schemes-help/index.js

@@ -1,20 +1,38 @@
 import { i18n } from 'stackable'
+import { Link } from '~stackable/components'
 
 import { __ } from '@wordpress/i18n'
-import { Button } from '@wordpress/components'
 import { dispatch } from '@wordpress/data'
 
 export const ColorSchemesHelp = () => {
 	const onClick = () => {
-		// Open the global settings sidebar and the color schemes panel.
-		dispatch( 'core/edit-post' ).openGeneralSidebar( 'stackable-global-settings/sidebar' )
-		dispatch( 'stackable/global-color-schemes' ).setIsOpen( true )
+		// Open the global settings sidebar.
+		dispatch( 'core/edit-post' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' ) // For Block Editor
+		dispatch( 'core/edit-site' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' ) // For Site Editor
+
+		// Add a small delay to ensure DOM elements are fully rendered and accessible after the sidebar opens
+		setTimeout( () => {
+			// Closes all panels except the color scheme panel
+			const panels = document.querySelectorAll( '.ugb-global-settings__inspector > .ugb-toggle-panel-body.is-opened' )
+			panels?.forEach( panel => {
+				if ( panel.classList.contains( 'ugb-global-color-schemes__panel' ) ) {
+					return
+				}
+				const toggle = panel.querySelector( '.components-panel__body-title > .components-panel__body-toggle' )
+				toggle?.click()
+			} )
+
+			const colorSchemeToggle = document.querySelector( '.ugb-global-color-schemes__panel .components-panel__body-title > .components-panel__body-toggle' )
+			// Opens the color scheme panel
+			if ( colorSchemeToggle.getAttribute( 'aria-expanded' ) === 'false' ) {
+				colorSchemeToggle?.click()
+			}
+		}, 10 )
 	}
 
-	return <p>
-		{ __( 'Change the color scheme. ', i18n ) }
-		<Button variant="link" onClick={ onClick }> { __( 'Manage', i18n ) } </Button>
-		{ __( ' your color schemes.', i18n ) }
-	</p>
+	return <>
+		<span>{ __( 'Change the color scheme. ', i18n ) }</span>
+		<Link onClick={ onClick }> { __( 'Manage your color schemes.', i18n ) } </Link>
+	</>
 }
 

src/plugins/global-settings/color-schemes/index.js

@@ -29,17 +29,16 @@ export { GlobalColorSchemeStyles } from './editor-loader'
 
 addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-schemes', output => {
 	const [ itemInEdit, setItemInEdit ] = useState( null )
+	const [ isOpen, setIsOpen ] = useState( false )
 	const [ displayHoverNotice, setDisplayHoverNotice ] = useState( false )
-	const isOpen = useSelect( select => select( 'stackable/global-color-schemes' ).getIsOpen() )
 
 	return (
 		<Fragment>
 			{ output }
 			<PanelAdvancedSettings
 				title={ __( 'Global Color Schemes', i18n ) }
 				className="ugb-global-color-schemes__panel"
-				onToggle={ isOpen => dispatch( 'stackable/global-color-schemes' ).setIsOpen( isOpen ) }
-				isOpen={ isOpen }
+				onToggle={ isOpen => setIsOpen( isOpen ) }
 			>
 				{ isOpen && displayHoverNotice && <span className="stk-global-block-layouts-help-tooltip">
 					<HelpTooltip

src/plugins/global-settings/color-schemes/store.js

@@ -32,10 +32,6 @@ const STORE_ACTIONS = {
 		type: 'UPDATE_SETTINGS',
 		settings,
 	} ),
-	setIsOpen: isOpen => ( {
-		type: 'SET_IS_OPEN',
-		isOpen,
-	} ),
 }
 
 const STORE_SELECTORS = {
@@ -45,7 +41,6 @@ const STORE_SELECTORS = {
 		backgroundModeColorScheme: state.backgroundModeColorScheme || 'scheme-default-2',
 		containerModeColorScheme: state.containerModeColorScheme || 'scheme-default-1',
 	} ),
-	getIsOpen: state => state.isOpen,
 }
 
 const STORE_REDUCER = ( state = DEFAULT_STATE, action ) => {
@@ -62,12 +57,6 @@ const STORE_REDUCER = ( state = DEFAULT_STATE, action ) => {
 				...action.settings,
 			}
 		}
-		case 'SET_IS_OPEN': {
-			return {
-				...state,
-				isOpen: action.isOpen,
-			}
-		}
 		default: {
 			return state
 		}