Skip to content

Commit 406ce2a

Browse files
kaeizenkaeizen
committed
init apply color scheme styles
1 parent 123abb0 commit 406ce2a

File tree

10 files changed

+229
-41
lines changed

10 files changed

+229
-41
lines changed

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,20 @@ export const Edit = memo( props => {
3838
} = props
3939

4040
const {
41-
COLOR_SCHEME_OPTIONS, getScheme, backgroundModeColorScheme,
42-
} = useBlockColorSchemes()
43-
44-
const backgroundColorScheme = useBlockAttributesContext( attributes => attributes.backgroundColorScheme )
45-
const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
41+
hasBackground,
42+
backgroundColorScheme,
43+
} = useBlockAttributesContext( attributes => ( {
44+
hasBackground: attributes.hasBackground,
45+
backgroundColorScheme: attributes.backgroundColorScheme,
46+
} ) )
4647
const setAttributes = useBlockSetAttributesContext()
4748
const { getPlaceholder } = useBlockLayoutDefaults()
4849

50+
const {
51+
COLOR_SCHEME_OPTIONS, backgroundModeColorScheme,
52+
getScheme, updateColorSchemesInUse,
53+
} = useBlockColorSchemes()
54+
4955
return (
5056
<>
5157
<InspectorBlockControls>
@@ -85,9 +91,14 @@ export const Edit = memo( props => {
8591
>
8692
<AdvancedSelectControl
8793
label={ __( 'Color Scheme', i18n ) }
88-
value={ getScheme( backgroundColorScheme, 'background' ) || backgroundModeColorScheme }
94+
value={ getScheme( backgroundColorScheme || backgroundModeColorScheme, { mode: 'background', returnFallback: false } ) }
8995
options={ COLOR_SCHEME_OPTIONS }
90-
onChange={ backgroundColorScheme => setAttributes( { backgroundColorScheme: backgroundColorScheme === backgroundModeColorScheme ? '' : backgroundColorScheme } ) }
96+
attribute="backgroundColorScheme"
97+
changeCallback={ ( newScheme, oldScheme ) => {
98+
const colorScheme = newScheme === backgroundModeColorScheme ? '' : newScheme
99+
updateColorSchemesInUse( colorScheme, oldScheme, 'background' )
100+
return colorScheme
101+
} }
91102
default={ backgroundModeColorScheme }
92103
/>
93104
<BackgroundControls

‎src/block-components/block-div/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export const BlockDiv = memo( props => {
5757
{
5858
[ uniqueBlockClass ]: withUniqueClass,
5959
'stk-block-background': attributes.hasBackground,
60+
[ `background-${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,
6061
// When the block has auto margins, we need to "add" those margins to
6162
// the main block div so we can simulate the effect inside the editor.
6263
// This works in conjunction with the styles in

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,20 @@ export const Edit = props => {
3636
} = props
3737

3838
const {
39-
COLOR_SCHEME_OPTIONS, getScheme, containerModeColorScheme,
40-
} = useBlockColorSchemes()
41-
42-
const hasContainer = useBlockAttributesContext( attributes => attributes.hasContainer )
43-
const containerColorScheme = useBlockAttributesContext( attributes => attributes.containerColorScheme )
39+
hasContainer,
40+
containerColorScheme,
41+
} = useBlockAttributesContext( attributes => ( {
42+
hasContainer: attributes.hasContainer,
43+
containerColorScheme: attributes.containerColorScheme,
44+
} ) )
4445
const setAttributes = useBlockSetAttributesContext()
4546
const { getPlaceholder } = useBlockLayoutDefaults()
4647

48+
const {
49+
COLOR_SCHEME_OPTIONS, containerModeColorScheme,
50+
getScheme, updateColorSchemesInUse,
51+
} = useBlockColorSchemes()
52+
4753
return (
4854
<>
4955
<InspectorBlockControls>
@@ -56,9 +62,14 @@ export const Edit = props => {
5662
>
5763
<AdvancedSelectControl
5864
label={ __( 'Color Scheme', i18n ) }
59-
value={ getScheme( containerColorScheme ) || containerModeColorScheme }
65+
value={ getScheme( containerColorScheme || containerModeColorScheme, { returnFallback: false } ) }
6066
options={ COLOR_SCHEME_OPTIONS }
61-
onChange={ containerColorScheme => setAttributes( { containerColorScheme: containerColorScheme === containerModeColorScheme ? '' : containerColorScheme } ) }
67+
attribute="containerColorScheme"
68+
changeCallback={ ( newScheme, oldScheme ) => {
69+
const colorScheme = newScheme === containerModeColorScheme ? '' : newScheme
70+
updateColorSchemesInUse( colorScheme, oldScheme )
71+
return colorScheme
72+
} }
6273
default={ containerModeColorScheme }
6374
/>
6475
<SizeControls.Layout

‎src/block-components/container-div/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const ContainerDiv = props => {
2323
containerBackgroundMediaExternalUrlTablet: attributes.containerBackgroundMediaExternalUrlTablet,
2424
containerBackgroundMediaExternalUrlMobile: attributes.containerBackgroundMediaExternalUrlMobile,
2525
containerBackgroundColorType: attributes.containerBackgroundColorType,
26+
containerColorScheme: attributes.containerColorScheme,
2627
}
2728
} )
2829
const instanceId = useQueryLoopInstanceId( attributes.uniqueId )
@@ -38,6 +39,7 @@ export const ContainerDiv = props => {
3839
'stk-hover-parent': attributes.hasContainer && attributes.triggerHoverState, // This is needed to trigger parent-hover hover styles.
3940
'stk--no-background': ! attributes.hasContainer,
4041
'stk--no-padding': ! attributes.hasContainer,
42+
[ `container-${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
4143
} )
4244

4345
return <Div

‎src/components/advanced-select-control/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import classnames from 'classnames'
1818
import { isEqual } from 'lodash'
1919

2020
const AdvancedSelectControl = memo( props => {
21-
const [ value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover )
21+
const [ value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback )
2222
const [ propsToPass, controlProps ] = extractControlProps( props )
2323
const {
2424
defaultValue: _defaultValue, // Don't pass this.

‎src/hooks/use-block-color-schemes.js‎

Lines changed: 73 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,91 @@
1-
import { useSelect } from '@wordpress/data'
1+
import { dispatch, useSelect } from '@wordpress/data'
22
import { applyFilters } from '@wordpress/hooks'
33

44
export const useBlockColorSchemes = () => {
55
const {
6-
colorSchemes,
7-
_baseColorScheme,
8-
_backgroundModeColorScheme,
9-
_containerModeColorScheme,
6+
getScheme,
7+
updateColorSchemesInUse,
8+
initializeColorSchemesInUse,
9+
allColorSchemes,
10+
colorSchemesInUse,
11+
COLOR_SCHEME_OPTIONS,
12+
baseColorScheme,
13+
backgroundModeColorScheme,
14+
containerModeColorScheme,
1015
} = useSelect( select => {
1116
const {
12-
colorSchemes, baseColorScheme: _baseColorScheme, backgroundModeColorScheme: _backgroundModeColorScheme, containerModeColorScheme: _containerModeColorScheme,
17+
colorSchemes,
18+
baseColorScheme: _baseColorScheme,
19+
backgroundModeColorScheme: _backgroundModeColorScheme,
20+
containerModeColorScheme: _containerModeColorScheme,
21+
colorSchemesInUse,
1322
} = select( 'stackable/global-color-schemes' ).getSettings()
1423

15-
return {
16-
colorSchemes,
17-
_baseColorScheme,
18-
_backgroundModeColorScheme,
19-
_containerModeColorScheme,
24+
const allColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', colorSchemes, true )
25+
const COLOR_SCHEME_OPTIONS = [ {
26+
label: 'Scheme unavailable',
27+
value: 'scheme-unavailable',
28+
hidden: true,
29+
disabled: true,
30+
}, ...allColorSchemes?.map( scheme => ( {
31+
label: scheme.name,
32+
value: scheme.key,
33+
} ) ) ]
34+
35+
const getScheme = ( key, { mode = '', returnFallback = true } = {} ) => {
36+
const fallback = mode === 'background' ? 'scheme-default-2' : 'scheme-default-1'
37+
38+
return COLOR_SCHEME_OPTIONS.find( scheme => scheme.value === key )?.value || ( returnFallback ? fallback : 'scheme-unavailable' )
2039
}
21-
} )
2240

23-
const allColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', colorSchemes, true )
41+
const updateColorSchemesInUse = ( newScheme, oldScheme, mode = 'container' ) => {
42+
const clientIds = select( 'core/block-editor' ).getSelectedBlockClientIds()
43+
clientIds.forEach( clientId => {
44+
dispatch( 'stackable/global-color-schemes' ).updateColorSchemesInUse( {
45+
newScheme, oldScheme, clientId, mode,
46+
} )
47+
} )
48+
}
2449

25-
const COLOR_SCHEME_OPTIONS = allColorSchemes?.map( scheme => ( {
26-
label: scheme.name,
27-
value: scheme.key,
28-
} ) )
50+
const initializeColorSchemesInUse = clientIds => {
51+
clientIds.forEach( clientId => {
52+
const attrs = select( 'core/block-editor' ).getBlockAttributes( clientId )
2953

30-
const getScheme = ( key, mode = 'base' ) => {
31-
const fallback = mode === 'background' ? 'scheme-default-2' : 'scheme-default-1'
54+
if ( attrs && attrs.backgroundColorScheme ) {
55+
dispatch( 'stackable/global-color-schemes' ).updateColorSchemesInUse( {
56+
newScheme: attrs.backgroundColorScheme, oldScheme: '', clientId, mode: 'background',
57+
} )
58+
}
59+
if ( attrs && attrs.containerColorScheme ) {
60+
dispatch( 'stackable/global-color-schemes' ).updateColorSchemesInUse( {
61+
newScheme: attrs.containerColorScheme, oldScheme: '', clientId,
62+
} )
63+
}
64+
} )
65+
}
3266

33-
return COLOR_SCHEME_OPTIONS.find( scheme => scheme.value === key )?.value || fallback
34-
}
67+
return {
68+
getScheme,
69+
updateColorSchemesInUse,
70+
initializeColorSchemesInUse,
71+
allColorSchemes,
72+
colorSchemesInUse,
73+
COLOR_SCHEME_OPTIONS,
74+
baseColorScheme: getScheme( _baseColorScheme ),
75+
backgroundModeColorScheme: getScheme( _backgroundModeColorScheme, 'background' ),
76+
containerModeColorScheme: getScheme( _containerModeColorScheme ),
77+
}
78+
}, [] )
3579

3680
return {
37-
COLOR_SCHEME_OPTIONS,
3881
getScheme,
39-
baseColorScheme: getScheme( _baseColorScheme ),
40-
backgroundModeColorScheme: getScheme( _backgroundModeColorScheme, 'background' ),
41-
containerModeColorScheme: getScheme( _containerModeColorScheme ),
82+
updateColorSchemesInUse,
83+
initializeColorSchemesInUse,
84+
allColorSchemes,
85+
colorSchemesInUse: Object.keys( colorSchemesInUse ),
86+
COLOR_SCHEME_OPTIONS,
87+
baseColorScheme,
88+
backgroundModeColorScheme,
89+
containerModeColorScheme,
4290
}
4391
}

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { select } from '@wordpress/data'
5+
import { useEffect, useState } from '@wordpress/element'
6+
7+
/**
8+
* External dependencies
9+
*/
10+
import { useBlockColorSchemes } from '~stackable/hooks'
11+
12+
const extractModeScheme = className => {
13+
const match = className.match( /^([a-zA-Z]+)-(.+)$/ )
14+
15+
return match ? { mode: match[ 1 ], key: match[ 2 ] } : false
16+
}
17+
18+
const convertToObj = colorSchemes => {
19+
const obj = {}
20+
21+
colorSchemes.forEach( scheme => {
22+
obj[ scheme.key ] = scheme.colorScheme
23+
} )
24+
25+
return obj
26+
}
27+
28+
const renderGlobalStyles = ( colorSchemesArray, colorSchemesInUse, setStyles ) => {
29+
let css = ''
30+
31+
const colorSchemes = convertToObj( colorSchemesArray )
32+
33+
colorSchemesInUse.forEach( className => {
34+
const { mode, key } = extractModeScheme( className )
35+
const scheme = colorSchemes[ key ]
36+
37+
if ( scheme?.backgroundColor ) {
38+
const varname = mode === 'background' ? 'block' : 'container'
39+
const decl = `--stk-${ varname }-background-color: ${ scheme.backgroundColor.desktop };`
40+
css += `.${ className } { ${ decl } }`
41+
}
42+
} )
43+
44+
setStyles( css )
45+
}
46+
47+
export const GlobalColorSchemeStyles = () => {
48+
const {
49+
allColorSchemes, colorSchemesInUse, initializeColorSchemesInUse,
50+
} = useBlockColorSchemes()
51+
const initClientIds = select( 'core/block-editor' ).getClientIdsWithDescendants()
52+
53+
const [ styles, setStyles ] = useState( '' )
54+
55+
useEffect( () => {
56+
if ( initClientIds && initClientIds.length > 0 ) {
57+
initializeColorSchemesInUse( initClientIds )
58+
}
59+
}, [ initClientIds ] )
60+
61+
useEffect( () => {
62+
if ( allColorSchemes && Array.isArray( allColorSchemes ) && allColorSchemes.length ) {
63+
renderGlobalStyles( allColorSchemes, colorSchemesInUse, setStyles )
64+
}
65+
}, [ allColorSchemes, colorSchemesInUse ] )
66+
67+
return styles
68+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { addFilter, applyFilters } from '@wordpress/hooks'
2020
import { Fragment, useState } from '@wordpress/element'
2121
import { __ } from '@wordpress/i18n'
2222

23+
export { GlobalColorSchemeStyles } from './editor-loader'
24+
2325
addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-schemes', output => {
2426
const [ itemInEdit, setItemInEdit ] = useState( null )
2527

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ import {
1010
register, createReduxStore, dispatch,
1111
} from '@wordpress/data'
1212
import domReady from '@wordpress/dom-ready'
13+
import { cloneDeep } from 'lodash'
1314

1415
// Include all the stored state.
1516
const DEFAULT_STATE = {
1617
colorSchemes: [],
1718
baseColorScheme: '',
1819
backgroundModeColorScheme: '',
1920
containerModeColorScheme: '',
21+
colorSchemesInUse: {},
2022
}
2123

2224
const STORE_ACTIONS = {
@@ -28,6 +30,10 @@ const STORE_ACTIONS = {
2830
type: 'UPDATE_DEFAULT_COLOR_SCHEME',
2931
colorSchemeObj,
3032
} ),
33+
updateColorSchemesInUse: props => ( {
34+
type: 'UPDATE_COLOR_SCHEMES_IN_USE',
35+
props,
36+
} ),
3137
}
3238

3339
const STORE_SELECTORS = {
@@ -53,6 +59,41 @@ const STORE_REDUCER = ( state = DEFAULT_STATE, action ) => {
5359
...action.colorSchemeObj,
5460
}
5561
}
62+
case 'UPDATE_COLOR_SCHEMES_IN_USE': {
63+
const {
64+
newScheme, oldScheme, clientId, mode = 'container',
65+
} = action.props
66+
67+
const schemes = cloneDeep( state.colorSchemesInUse )
68+
69+
const oldSchemeKey = oldScheme ? `${ mode }-${ oldScheme }` : ''
70+
const newSchemeKey = newScheme ? `${ mode }-${ newScheme }` : ''
71+
72+
if ( oldSchemeKey in schemes ) {
73+
const index = schemes[ oldSchemeKey ].indexOf( clientId )
74+
if ( index !== -1 ) {
75+
schemes[ oldSchemeKey ].splice( index, 1 )
76+
}
77+
78+
if ( schemes[ oldSchemeKey ].length === 0 ) {
79+
delete schemes[ oldSchemeKey ]
80+
}
81+
}
82+
83+
if ( newSchemeKey in schemes ) {
84+
const index = schemes[ newSchemeKey ].indexOf( clientId )
85+
if ( index === -1 ) {
86+
schemes[ newSchemeKey ].push( clientId )
87+
}
88+
} else if ( newSchemeKey !== '' ) {
89+
schemes[ newSchemeKey ] = [ clientId ]
90+
}
91+
92+
return {
93+
...state,
94+
colorSchemesInUse: schemes,
95+
}
96+
}
5697
default: {
5798
return state
5899
}

0 commit comments

Comments
 (0)