Skip to content

Commit 765dadc

Browse files
kaeizenkaeizen
committed
extend color scheme
1 parent 5ea6b88 commit 765dadc

File tree

6 files changed

+128
-18
lines changed

6 files changed

+128
-18
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,17 @@ export const DEFAULT_COLOR_SCHEME_COLORS = {
2727
buttonOutlineColor: { desktop: '' },
2828
}
2929

30+
export const ALTERNATE_COLOR_SCHEME_COLORS = {
31+
backgroundColor: { desktop: '#0f0e17' },
32+
headingColor: { desktop: '#fffffe' },
33+
textColor: { desktop: '#fffffe' },
34+
linkColor: { desktop: '#fffffe' },
35+
accentColor: { desktop: '#f00069' },
36+
buttonBackgroundColor: { desktop: '#f00069' },
37+
buttonTextColor: { desktop: '#fffffe' },
38+
buttonOutlineColor: { desktop: '#fffffe' },
39+
}
40+
3041
const NOOP = () => {}
3142

3243
const ColorSchemePreview = ( {

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export {
125125
default as ColorSchemePreview,
126126
ColorSchemePresetPicker,
127127
DEFAULT_COLOR_SCHEME_COLORS,
128+
ALTERNATE_COLOR_SCHEME_COLORS,
128129
COLOR_SCHEME_PROPERTY_LABELS,
129130
} from './color-scheme-preview'
130131
export { ColorSchemesHelp } from './color-schemes-help'

‎src/components/sortable-picker/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ const SortablePicker = props => {
113113
className={ props.buttonClassName }
114114
onItemClick={ props.onItemClick }
115115
showReset={ props.showResetCallback ? props.showResetCallback( item ) : true }
116+
showDelete={ props.showDeleteCallback ? props.showDeleteCallback( item ) : false }
116117
/> )
117118
) }
118119
{ items?.map( ( item, i ) => (
@@ -166,6 +167,7 @@ const LabeledItemIndicator = props => {
166167
sortable = true,
167168
editableName = true,
168169
showReset = true,
170+
showDelete = true,
169171
} = props
170172

171173
const [ isFocused, setIsFocused ] = useState( false )
@@ -262,7 +264,7 @@ const LabeledItemIndicator = props => {
262264
return <> { ItemPicker && <ItemPicker item={ item } onChange={ onChange } onClose={ onClose } /> } </>
263265
} }
264266
/>
265-
{ sortable &&
267+
{ showDelete &&
266268
<Button
267269
aria-label="Delete"
268270
className="stk-global-settings-color-picker__delete-button"
@@ -272,7 +274,7 @@ const LabeledItemIndicator = props => {
272274
onClick={ onDelete }
273275
/>
274276
}
275-
{ ! sortable && <ResetButton
277+
{ ! showDelete && <ResetButton
276278
showReset={ showReset }
277279
onChange={ onDelete }
278280
/>

‎src/plugins/global-settings/color-schemes/color-scheme-picker.js‎

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
ColorSchemePreview,
1919
ColorSchemePresetPicker,
2020
DEFAULT_COLOR_SCHEME_COLORS,
21+
ALTERNATE_COLOR_SCHEME_COLORS,
2122
AdvancedToggleControl,
2223
ProControlButton,
2324
ControlSeparator,
@@ -116,13 +117,17 @@ const ColorSchemePicker = props => {
116117
return ! isEqual( item.colorScheme, DEFAULT_COLOR_SCHEME_COLORS )
117118
}
118119

120+
const showDeleteButton = item => {
121+
return item.key === 'scheme-default-3'
122+
}
123+
119124
useEffect( () => {
120125
if ( ! itemInEdit ) {
121126
setSubHeaderControls( { showTrash: false, showReset: false } )
122127
return
123128
}
124129
const controls = {
125-
showTrash: ! itemInEdit.key.startsWith( 'scheme-default' ),
130+
showTrash: itemInEdit.key === 'scheme-default-3' || ! itemInEdit.key.startsWith( 'scheme-default' ),
126131
showReset: showResetButton( itemInEdit ),
127132
}
128133

@@ -132,8 +137,38 @@ const ColorSchemePicker = props => {
132137
// Get the custom color schemes
133138
const customColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', [] )
134139

140+
const saveColorSchemeSettings = updatedColorSchemes => {
141+
saveTimeout = setTimeout( () => {
142+
const settings = new models.Settings( {
143+
stackable_global_color_schemes: updatedColorSchemes, // eslint-disable-line camelcase
144+
// Clear the cached CSS when the color scheme is updated
145+
stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
146+
} )
147+
settings.save()
148+
}, 300 )
149+
150+
// Update our store.
151+
dispatch( 'stackable/global-color-schemes' ).updateColorSchemes( updatedColorSchemes )
152+
}
153+
135154
// Add a custom color scheme
136155
const handleAddItem = ( event, scheme = null ) => {
156+
if ( ! colorSchemes.some( scheme => scheme.key === 'scheme-default-3' ) ) {
157+
const alternateColorScheme = {
158+
name: __( 'Alternate Scheme', i18n ),
159+
key: 'scheme-default-3',
160+
colorScheme: ALTERNATE_COLOR_SCHEME_COLORS,
161+
}
162+
163+
const updatedColorSchemes = [
164+
...colorSchemes,
165+
alternateColorScheme,
166+
]
167+
168+
saveColorSchemeSettings( updatedColorSchemes )
169+
return
170+
}
171+
137172
doAction( 'stackable.global-settings.global-color-schemes.custom-color-schemes.add-color-scheme', scheme, setItemInEdit, saveTimeout )
138173
}
139174

@@ -154,17 +189,8 @@ const ColorSchemePicker = props => {
154189
const currentIndex = colorSchemes.findIndex( c => c.key === currentItem.key )
155190
updatedColorSchemes[ currentIndex ] = currentItem
156191

157-
saveTimeout = setTimeout( () => {
158-
const settings = new models.Settings( {
159-
stackable_global_color_schemes: updatedColorSchemes, // eslint-disable-line camelcase
160-
// Clear the cached CSS when the color scheme is updated
161-
stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
162-
} )
163-
settings.save()
164-
}, 300 )
165-
166-
// Update our store.
167-
dispatch( 'stackable/global-color-schemes' ).updateColorSchemes( updatedColorSchemes )
192+
clearTimeout( saveTimeout )
193+
saveColorSchemeSettings( updatedColorSchemes )
168194
}
169195
}
170196

@@ -285,6 +311,24 @@ const ColorSchemePicker = props => {
285311
}
286312

287313
const onDeleteItem = item => {
314+
if ( item.key === 'scheme-default-3' ) {
315+
// eslint-disable-next-line no-alert
316+
const confirmDelete = window.confirm( __( 'Deleting this color scheme would remove all colors linked to it. Any blocks that use this color scheme will revert to the default scheme. Delete this color scheme?', i18n ) )
317+
318+
if ( ! confirmDelete ) {
319+
return
320+
}
321+
322+
const selectedIndex = colorSchemes.findIndex( c => c.key === item.key )
323+
const updatedColorSchemes = cloneDeep( colorSchemes )
324+
updatedColorSchemes.splice( selectedIndex, 1 )
325+
326+
clearTimeout( saveTimeout )
327+
saveColorSchemeSettings( updatedColorSchemes )
328+
setItemInEdit( null )
329+
return
330+
}
331+
288332
// If the color scheme to be deleted is a custom color scheme, customDelete will return true
289333
const customDelete = applyFilters( 'stackable.global-settings.global-color-schemes.delete-color-scheme', false, item, setItemInEdit, saveTimeout )
290334

@@ -419,9 +463,10 @@ const ColorSchemePicker = props => {
419463
ItemPreview={ ItemPreview }
420464
ItemPicker={ null }
421465
buttonClassName="stk-global-color-scheme__color-scheme-item"
422-
enableAddItem={ isPro }
466+
enableAddItem={ isPro || ! colorSchemes.some( scheme => scheme.key === 'scheme-default-3' ) }
423467
onItemClick={ item => setItemInEdit( item ) }
424468
showResetCallback={ item => showResetButton( item ) }
469+
showDeleteCallback={ item => showDeleteButton( item ) }
425470
/> : <>
426471
<InspectorSubHeader
427472
title={ ! isPro && itemInEdit.key === 'scheme-default-1'

‎src/plugins/global-settings/color-schemes/index.php‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ class Stackable_Global_Color_Schemes {
2828
function __construct() {
2929
// Register our settings.
3030
add_action( 'register_stackable_global_settings', array( $this, 'register_color_schemes' ) );
31+
32+
add_action( 'stackable_early_version_upgraded', array( $this, 'extend_color_scheme' ), 10, 2 );
33+
3134
if ( is_frontend() ) {
3235

3336
/**
@@ -191,6 +194,35 @@ public static function get_color_scheme_properties( $values = null ) {
191194
return $_properties;
192195
}
193196

197+
public function extend_color_scheme( $old_version, $new_version ) {
198+
if ( empty( $old_version ) || version_compare( $old_version, "3.19.0", "<" ) ) {
199+
$color_schemes = self::get_color_schemes_array();
200+
201+
if ( ! $color_schemes ) {
202+
$scheme = array(
203+
array(
204+
'name' => 'Alternate Scheme',
205+
'key' => 'scheme-default-3',
206+
'colorScheme' => array(
207+
'backgroundColor' => array( 'desktop' => '#0f0e17' ),
208+
'headingColor' => array( 'desktop' => '#fffffe' ),
209+
'textColor' => array( 'desktop' => '#fffffe' ),
210+
'linkColor' => array( 'desktop' => '#f00069' ),
211+
'accentColor' => array( 'desktop' => '#f00069' ),
212+
'buttonBackgroundColor' => array( 'desktop' => '#f00069' ),
213+
'buttonTextColor' => array( 'desktop' => '#fffffe' ),
214+
'buttonOutlineColor' => array( 'desktop' => '#fffffe' ),
215+
),
216+
'hideInPicker' => false
217+
)
218+
);
219+
220+
update_option( 'stackable_global_color_schemes', $scheme );
221+
}
222+
223+
}
224+
}
225+
194226
/**-----------------------------------------------------------------------------
195227
* Global Color Scheme functions
196228
*-----------------------------------------------------------------------------*/

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@ domReady( () => {
8181
stackable_use_v3_16_0_color_scheme_inheritance: useV3_16_0_ColorSchemeInheritance,
8282
} = response
8383

84-
const colorSchemes = Array.isArray( _colorSchemes ) && _colorSchemes.length > 0 ? _colorSchemes : [ {
84+
const colorSchemesRaw = Array.isArray( _colorSchemes ) && _colorSchemes.length > 0 ? [ ..._colorSchemes ] : []
85+
86+
const defaultScheme = {
8587
name: __( 'Default Scheme', i18n ),
8688
key: 'scheme-default-1',
8789
colorScheme: {
@@ -95,7 +97,9 @@ domReady( () => {
9597
buttonOutlineColor: { desktop: '' },
9698
},
9799
hideInPicker: false,
98-
}, {
100+
}
101+
102+
const backgroundScheme = {
99103
name: __( 'Background Scheme', i18n ),
100104
key: 'scheme-default-2',
101105
colorScheme: {
@@ -109,7 +113,22 @@ domReady( () => {
109113
buttonOutlineColor: { desktop: '' },
110114
},
111115
hideInPicker: false,
112-
} ]
116+
}
117+
118+
const hasDefaultScheme = colorSchemesRaw.some( scheme => scheme.key === 'scheme-default-1' )
119+
const hasBackgroundScheme = colorSchemesRaw.some( scheme => scheme.key === 'scheme-default-2' )
120+
121+
if ( ! hasDefaultScheme ) {
122+
colorSchemesRaw.push( defaultScheme )
123+
}
124+
if ( ! hasBackgroundScheme ) {
125+
colorSchemesRaw.push( backgroundScheme )
126+
}
127+
128+
// Ensure there are a max of three color schemes
129+
const colorSchemes = [ ...colorSchemesRaw ].sort( ( a, b ) => {
130+
return a.key < b.key ? -1 : ( a.key > b.key ? 1 : 0 )
131+
} ).slice( 0, 3 )
113132

114133
const settings = {
115134
colorSchemes,

0 commit comments

Comments
 (0)