Feat (Color Schemes): Add help description to manage color schemes (#3478)

* add help

* update comments

* add space

* move space

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

* Update store.js

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

---------

Co-authored-by: Benjamin Intal <[email protected]>

Author: kaeizen

src/block-components/block-div/edit.js

@@ -16,6 +16,7 @@ import {
 	InspectorStyleControls,
 	PanelAdvancedSettings,
 	AdvancedSelectControl,
+	ColorSchemesHelp,
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
@@ -100,6 +101,7 @@ export const Edit = memo( props => {
 							return colorScheme
 						} }
 						default={ backgroundModeColorScheme }
+						help={ <ColorSchemesHelp /> }
 					/>
 					<BackgroundControls
 						attrNameTemplate="block%s"

src/block-components/container-div/edit.js

@@ -17,6 +17,7 @@ import {
 	AdvancedToggleControl,
 	InspectorBlockControls,
 	AdvancedSelectControl,
+	ColorSchemesHelp,
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
@@ -71,6 +72,7 @@ export const Edit = props => {
 							return colorScheme
 						} }
 						default={ containerModeColorScheme }
+						help={ <ColorSchemesHelp /> }
 					/>
 					<SizeControls.Layout
 						attrNameTemplate="container%s"

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

@@ -0,0 +1,39 @@
+import { i18n } from 'stackable'
+import { Link } from '~stackable/components'
+
+import { __ } from '@wordpress/i18n'
+import { dispatch } from '@wordpress/data'
+
+export const ColorSchemesHelp = () => {
+	const onClick = () => {
+		// 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 <>
+		<span>{ __( 'Change the color scheme.', i18n ) }</span>
+		&nbsp;
+		<Link onClick={ onClick }> { __( 'Manage your color schemes.', i18n ) } </Link>
+	</>
+}
+

src/components/index.js

@@ -124,3 +124,4 @@ export {
 	ColorSchemePresetPicker,
 	DEFAULT_COLOR_SCHEME_COLORS,
 } from './color-scheme-preview'
+export { ColorSchemesHelp } from './color-schemes-help'

src/plugins/global-settings/color-schemes/editor-loader.js

@@ -134,6 +134,7 @@ export const GlobalColorSchemeStyles = () => {
 		currentHoverState,
 	 ] )
 
+	// Adds a class to the editor body DOM to indicate that there are global styles for `color schemes`.
 	useEffect( () => {
 		if ( editorEl ) {
 			if ( styles !== '' && editorEl.classList.contains( 'stk-has-color-schemes' ) === false ) {
@@ -143,7 +144,7 @@ export const GlobalColorSchemeStyles = () => {
 				editorEl.classList.remove( 'stk-has-color-schemes' )
 			}
 
-			// At first load of the editor, the `stk-preview-device-*` and `stk--is-*-theme` are removed, so we have to re-add it.
+			// At first load of the editor, the `stk-has-color-schemes` is removed, so we have to re-add it.
 			const mo = onClassChange( editorEl, () => {
 				if ( styles !== '' && editorEl?.classList.contains( 'stk-has-color-schemes' ) === false ) {
 					editorEl?.classList.add( 'stk-has-color-schemes' )

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

@@ -37,6 +37,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-scheme
 			{ output }
 			<PanelAdvancedSettings
 				title={ __( 'Global Color Schemes', i18n ) }
+				className="ugb-global-color-schemes__panel"
 				onToggle={ isOpen => setIsOpen( isOpen ) }
 			>
 				{ isOpen && displayHoverNotice && <span className="stk-global-block-layouts-help-tooltip">

src/plugins/global-settings/utils/use-block-layout-editor-loader.js

@@ -157,6 +157,7 @@ export const useBlockLayoutEditorLoader = ( storeName, classSuffix ) => {
 		}
 	}, [ blockLayouts, currentHoverState, SelectedParentHoverBlock ] )
 
+	// Adds a class to the editor body DOM to indicate that there are global styles for `spacing and borders` or `buttons and icons`.
 	useEffect( () => {
 		if ( editorEl ) {
 			const className = `stk-has-design-system-${ classSuffix }`