feat: Global Color Scheme

initial commit

Author: [email protected]

src/block/column/edit.js

@@ -11,6 +11,7 @@ import { i18n, version as VERSION } from 'stackable'
 import {
 	AdvancedToggleControl,
 	FourRangeControl,
+	GlobalColorSchemeControl,
 	InspectorLayoutControls,
 	InspectorTabs,
 	useBlockCssGenerator,
@@ -164,6 +165,7 @@ const Edit = props => {
 const InspectorControls = memo( props => {
 	return (
 		<>
+			<GlobalColorSchemeControl />
 			<InspectorTabs />
 
 			<InspectorLayoutControls>

src/block/columns/edit.js

@@ -11,6 +11,7 @@ import classnames from 'classnames'
 import {
 	ColumnInnerBlocks,
 	ControlSeparator,
+	GlobalColorSchemeControl,
 	GroupPlaceholder,
 	InspectorLayoutControls,
 	InspectorTabs,
@@ -168,6 +169,7 @@ if ( userAgent && userAgent.indexOf( 'Firefox' ) !== -1 ) {
 const InspectorControls = memo( () => {
 	return (
 		<>
+			<GlobalColorSchemeControl />
 			<InspectorTabs />
 
 			<Columns.InspectorControls />

src/components/global-color-scheme-control/editor.scss

@@ -0,0 +1,20 @@
+.stk-global-color-scheme-control {
+	padding: 8px 16px 24px !important;
+	margin: 0 !important;
+	> .components-base-control__field {
+		display: flex;
+		gap: 8px;
+	}
+	.stk-control-label {
+		flex: 1 0 auto;
+	}
+	.stk-control-content {
+		flex: 1 1 100%;
+	}
+	.stk-control-label,
+	.components-base-control,
+	.components-base-control__field,
+	.components-select-control {
+		margin: 0 !important;
+	}
+}

src/components/global-color-scheme-control/index.js

@@ -0,0 +1,24 @@
+import AdvancedSelectControl from '../advanced-select-control'
+import { i18n } from 'stackable'
+import { __ } from '@wordpress/i18n'
+import { InspectorControls } from '@wordpress/block-editor'
+
+// TODO: when `add-new` is picked, disregard the value and open the global setting for global color scheme
+const GlobalColorSchemeControl = () => {
+	return (
+		<InspectorControls>
+			<AdvancedSelectControl
+				label={ __( 'Color Scheme', 'ultimate-addons-for-gutenberg' ) }
+				className="stk-global-color-scheme-control"
+				options={ [
+					{ value: '', label: __( 'Default', i18n ) },
+					{ value: 'alt', label: __( 'Alternative', i18n ) },
+					{ value: 'add-new', label: __( 'Add new…', i18n ) },
+				] }
+				allowReset={ false }
+			/>
+		</InspectorControls>
+	)
+}
+
+export default GlobalColorSchemeControl

src/components/index.js

@@ -106,6 +106,7 @@ export { default as ColumnInnerBlocks } from './column-inner-blocks'
 export { default as VariationPicker } from './variation-picker'
 export { default as InspectorBottomTip } from './inspector-bottom-tip'
 export { default as BlockWrapper } from './block-wrapper'
+export { default as GlobalColorSchemeControl } from './global-color-scheme-control'
 // TODO: clean this
 export {
 	default as BlockCss, BlockCssCompiler, BlockStyleGenerator, useBlockCssGenerator,

src/styles/editor-skin.scss

@@ -25,6 +25,7 @@
 .ugb--has-panel-tabs .components-panel {
 
 	.block-editor-block-card,
+	.stk-global-color-scheme-control,
 	.ugb-panel-tabs .ugb-panel-tabs__wrapper,
 	.ugb-panel-tabs .ugb-panel-tabs__wrapper > button {
 		background-color: #f5f5f5 !important;