minor fix for global colors

fix spacing, do not render components if panel is not open

Author: kaeizen

src/plugins/global-settings/colors/color-picker.js

@@ -125,16 +125,16 @@ const ColorPickers = props => {
 
 		updateColors( updatedColors )
 		setIsSorting( false )
-	  }
+	}
 
-	  const ItemPreview = ( { item } ) => {
+	const ItemPreview = ( { item } ) => {
 		return <ColorIndicator
 			className="stk-color-indicator block-editor-panel-color-gradient-settings__color-indicator"
 			colorValue={ item.color }
 		/>
-	  }
+	}
 
-	  const ItemPicker = ( { item, onChange } ) => {
+	const ItemPicker = ( { item, onChange } ) => {
 		return <div className="stk-color-palette-control__popover-content">
 			<ColorPicker
 				onChange={ value => onChange( {
@@ -145,7 +145,7 @@ const ColorPickers = props => {
 				enableAlpha={ true }
 			/>
 		</div>
-	  }
+	}
 
 	return (
 		<SortablePicker

src/plugins/global-settings/colors/index.js

@@ -17,7 +17,7 @@ import rgba from 'color-rgba'
  * WordPress dependencies
  */
 import { addFilter, applyFilters } from '@wordpress/hooks'
-import { Fragment } from '@wordpress/element'
+import { Fragment, useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { dispatch, useSelect } from '@wordpress/data'
 import { models } from '@wordpress/api'
@@ -75,6 +75,8 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 		hideSiteEditorColors,
 	} = useSelect( select => select( 'stackable/global-colors' ).getSettings() )
 
+	const [ isOpen, setIsOpen ] = useState( false )
+
 	const onChangeHideThemeColors = value => {
 		dispatch( 'stackable/global-colors' ).updateSettings( {
 			hideThemeColors: value,
@@ -109,35 +111,39 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 			{ output }
 			<PanelAdvancedSettings
 				title={ __( 'Global Color Palette', i18n ) }
+				onToggle={ isOpen => setIsOpen( isOpen ) }
 			>
-				<p className="components-base-control__help">
-					{ __( 'Change your color palette for all your blocks across your site.', i18n ) }
+				{ isOpen && <>
+					<p className="components-base-control__help">
+						{ __( 'Change your color palette for all your blocks across your site.', i18n ) }
 					&nbsp;
-					<a href="https://docs.wpstackable.com/article/362-how-to-use-global-colors?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
-						{ __( 'Learn more about Global Colors', i18n ) }
-					</a>
-				</p>
-				<ColorPicker label={ __( 'Global Colors', i18n ) } />
-				{ /* <ColorPicker
+						<a href="https://docs.wpstackable.com/article/362-how-to-use-global-colors?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
+							{ __( 'Learn more about Global Colors', i18n ) }
+						</a>
+					</p>
+					<ColorPicker label={ __( 'Global Colors', i18n ) } />
+					{ /* <ColorPicker
 					label={ __( 'Global Gradients', i18n ) }
 					onReset={ () => onChangeUseStackableColorsOnly( false ) }
 				/> */ }
-				{ ColorToggleControls }
-				<ToggleControl
-					label={ __( 'Show Theme Colors', i18n ) }
-					checked={ ! hideThemeColors }
-					onChange={ value => onChangeHideThemeColors( ! value ) }
-				/>
-				<ToggleControl
-					label={ __( 'Show Default Colors', i18n ) }
-					checked={ ! hideDefaultColors }
-					onChange={ value => onChangeHideDefaultColors( ! value ) }
-				/>
-				<ToggleControl
-					label={ __( 'Show Site Editor Custom Colors', i18n ) }
-					checked={ ! hideSiteEditorColors }
-					onChange={ value => onChangeHideSiteEditorColors( ! value ) }
-				/>
+					{ ColorToggleControls }
+					<ToggleControl
+						label={ __( 'Show Theme Colors', i18n ) }
+						checked={ ! hideThemeColors }
+						onChange={ value => onChangeHideThemeColors( ! value ) }
+					/>
+					<ToggleControl
+						label={ __( 'Show Default Colors', i18n ) }
+						checked={ ! hideDefaultColors }
+						onChange={ value => onChangeHideDefaultColors( ! value ) }
+					/>
+					<ToggleControl
+						label={ __( 'Show Site Editor Custom Colors', i18n ) }
+						checked={ ! hideSiteEditorColors }
+						onChange={ value => onChangeHideSiteEditorColors( ! value ) }
+					/>
+				</> }
+
 			</PanelAdvancedSettings>
 		</Fragment>
 	)