add presets, proControl, filters for premium

Author: kaeizen

src/components/color-palette-control/index.js

@@ -169,7 +169,7 @@ const ColorPaletteControl = memo( props => {
 
 	const toggleSettings = {
 		colorValue: value,
-		label: colorLabel,
+		label: props.colorLabel || colorLabel,
 	}
 
 	const colorPalette = (
@@ -218,6 +218,7 @@ ColorPaletteControl.defaultProps = {
 	attribute: '',
 
 	value: undefined,
+	colorLabel: undefined,
 	onChange: undefined,
 	preOnChange: PASSTHRUOP,
 	isExpanded: false,

src/components/color-scheme-preview/editor.scss

@@ -0,0 +1,7 @@
+.stk-preset-color-schemes__preset-wrapper {
+	border: 1px solid #e0e0e0;
+	display: grid;
+	gap: 4px;
+	grid-template-columns: repeat(2, 1fr);
+	margin-bottom: 16px;
+}

src/components/color-scheme-preview/index.js

@@ -0,0 +1,52 @@
+import { Button } from '@wordpress/components'
+
+export const DEFAULT_COLOR_SCHEME_COLORS = {
+	backgroundColor: { desktop: 'var(--stk-container-background-color, #fff)' },
+	headingColor: { desktop: '' },
+	textColor: { desktop: '' },
+	linkColor: { desktop: '' },
+	accentColor: { desktop: 'var(--stk-accent-color, #008de4)' },
+	buttonColor: { desktop: 'var(--stk-button-background-color, #008de4)' },
+	buttonTextColor: { desktop: 'var(--stk-button-text-color, #fff)' },
+	buttonOutlineColor: { desktop: 'var(--stk-button-background-color, #008de4)' },
+}
+
+export const DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS = {
+	...DEFAULT_COLOR_SCHEME_COLORS,
+	backgroundColor: { desktop: 'var(--stk-block-background-color, #fff)' },
+}
+
+const NOOP = () => {}
+
+const ColorSchemePreview = ( { colors, onClick = NOOP } ) => {
+	const TagName = onClick === NOOP ? 'div' : Button
+	const additionalProps = onClick === NOOP ? {} : { onClick }
+	return (
+		<TagName
+			className="stk-global-color-scheme__preview__background"
+			style={ { backgroundColor: colors?.backgroundColor } }
+			{ ...additionalProps }
+		>
+			<div className="stk-global-color-scheme__preview__typography">
+				<span style={ { color: colors?.headingColor } }>A</span>
+				<span style={ { color: colors?.textColor } }>a</span>
+			</div>
+			<div>
+				<div
+					className="stk-global-color-scheme__preview__button"
+					style={ { backgroundColor: colors?.buttonColor } }
+				/>
+				<div
+					className="stk-global-color-scheme__preview__button"
+					style={ {
+						borderStyle: 'solid',
+						borderWidth: '1px',
+						borderColor: colors?.buttonOutlineColor,
+					} }
+				/>
+			</div>
+		</TagName>
+	)
+}
+
+export default ColorSchemePreview

src/components/index.js

@@ -118,3 +118,9 @@ export { default as RichText } from './rich-text'
 export { default as SortablePicker } from './sortable-picker'
 export { default as InspectorSubHeader } from './inspector-sub-header'
 export { default as FontPairPicker } from './font-pair-picker'
+export { SectionSettings } from './section-settings'
+export {
+	default as ColorSchemePreview,
+	DEFAULT_COLOR_SCHEME_COLORS,
+	DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS,
+} from './color-scheme-preview'

src/components/pro-control/index.js

@@ -124,6 +124,13 @@ const LABELS = {
 			<li>{ __( 'Manage your custom Font Pairs', i18n ) }</li>
 		</ul>,
 	},
+	'color-schemes': {
+		title: __( 'Add Your Own Color Schemes', i18n ),
+		description: <ul>
+			<li>{ __( 'Add your own custom Color Schemes', i18n ) }</li>
+			<li>{ __( 'Manage your Block\'s Default Color Schemes', i18n ) }</li>
+		</ul>,
+	},
 }
 
 const ProControl = props => {

src/components/section-settings/index.js

@@ -0,0 +1,9 @@
+export const SectionSettings = props => {
+	return <>
+		<div className="ugb-global-settings__section-settings">
+			<p className="ugb-global-settings__section-title">{ props.title }</p>
+			{ props.description && <p>{ props.description }</p> }
+			{ props.children }
+		</div>
+	</>
+}

src/components/sortable-picker/index.js

@@ -110,7 +110,7 @@ const SortablePicker = props => {
 							sortable={ false }
 							editableName={ editableName }
 							className={ props.buttonClassName }
-							buttonOnClick={ props.buttonOnClick }
+							onItemClick={ props.onItemClick }
 						/> )
 					 ) }
 					{ items?.map( ( item, i ) => (
@@ -125,7 +125,7 @@ const SortablePicker = props => {
 							updateOnBlur={ props.updateOnBlur }
 							editableName={ editableName }
 							className={ props.buttonClassName }
-							buttonOnClick={ props.buttonOnClick }
+							onItemClick={ props.onItemClick }
 						/> ) ) }
 				</SortableContainer>
 			</div>
@@ -192,8 +192,8 @@ const LabeledItemIndicator = props => {
 						<Button
 							className={ buttonClassNames }
 							onClick={ () => {
-								if ( props.buttonOnClick ) {
-									props.buttonOnClick( item )
+								if ( props.onItemClick ) {
+									props.onItemClick( item )
 									return
 								}
 

src/plugins/global-settings/buttons-and-icons/index.js

@@ -14,11 +14,11 @@ import {
 	ShadowControl,
 	Button,
 	HelpTooltip,
+	SectionSettings,
 } from '~stackable/components'
 import {
 	useBlockLayoutEditorLoader,
 	useBlockLayoutInspectorUtils,
-	SectionSettings,
 	STATES,
 } from '../utils'
 import { BORDER_CONTROLS } from '~stackable/block-components'