Skip to content

Commit af1460e

Browse files
kaeizenkaeizen
committed
add more presets, move theme compatibility code
1 parent a2d8ab6 commit af1460e

File tree

10 files changed

+243
-227
lines changed

10 files changed

+243
-227
lines changed

‎src/compatibility/blocksy/index.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { addFilter } from '@wordpress/hooks'
2+
3+
/**
4+
* This filter has the following parameters:
5+
* 1. decls - The current css declarations.
6+
* 2. scheme - The current color scheme.
7+
* 3. mode - The current mode.
8+
* 4. theme - The current theme.
9+
*/
10+
addFilter( 'stackable.global-settings.global-color-schemes.add-theme-compatibility', 'stackable/global-color-schemes.theme-compatibility.blocksy', decls => {
11+
/**
12+
* This is WIP. Blocksy is not supported yet.
13+
*/
14+
15+
/*
16+
if ( theme === 'stk--is-blocksy-theme' ) {
17+
let buttonSelector = ''
18+
const backgroundProperty = camelToKebab( 'buttonBackgroundColor' )
19+
const textProperty = camelToKebab( 'buttonTextColor' )
20+
21+
switch ( mode ) {
22+
case 'background':
23+
buttonSelector = [
24+
' > :where(.stk-button-group) > :where(div) > :where(div) > div:where([data-type="stackable/button"])',
25+
' > :where(.stk-inner-blocks) > :where(div) > :where(div) > :where([data-type="stackable/button-group"]) > :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > :where(div) > :where(div) > div:where([data-type="stackable/button"])',
26+
].join( ',' )
27+
break
28+
case 'container':
29+
buttonSelector = ' > :where(div) > :where(div) > :where([data-type="stackable/button-group"]) > :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > :where(div) > :where(div) > div:where([data-type="stackable/button"])'
30+
break
31+
default:
32+
buttonSelector = ' :where([data-type="stackable/button-group"]) > :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > :where(div) > :where(div) > div:where([data-type="stackable/button"])'
33+
}
34+
35+
const _decls = {
36+
desktop: [],
37+
desktopParentHover: [],
38+
}
39+
40+
Object.keys( _decls ).forEach( state => {
41+
const bgValue = getInheritedValue( scheme.buttonBackgroundColor, state, mode )
42+
decls[ state ].push( `${ buttonSelector }{${ backgroundProperty }: ${ bgValue };}` )
43+
44+
const textValue = getInheritedValue( scheme.buttonTextColor, state, mode )
45+
decls[ state ].push( `${ buttonSelector }{${ textProperty }: ${ textValue };}` )
46+
} )
47+
}
48+
*/
49+
50+
return decls
51+
} )
52+

‎src/compatibility/blocksy/index.php‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<?php
2+
/**
3+
* Global Color Schemes
4+
*/
5+
6+
// Exit if accessed directly.
7+
if ( ! defined( 'ABSPATH' ) ) {
8+
exit;
9+
}
10+
11+
if ( ! function_exists( 'stackable_blocksy_global_color_schemes_compatibility' ) ) {
12+
function stackable_blocksy_global_color_schemes_compatibility( $styles, $scheme, $selectors, $mode, $classes ) {
13+
/**
14+
* This is WIP. Blocksy is not supported yet.
15+
*/
16+
17+
/*
18+
if ( in_array( 'stk--is-blocksy-theme', $classes ) ) {
19+
$bg_property = '--stk-button-background-color';
20+
$text_property = '--stk-button-text-color';
21+
22+
$states = array(
23+
'desktop' => [],
24+
'desktopParentHover' => []
25+
);
26+
27+
foreach( $states as $state => $_ ) {
28+
if ( $GLOBAL_COLOR_SCHEMES_CLASS->has_value( $scheme, 'buttonBackgroundColor', $state ) ) {
29+
$states[ $state ][ $bg_property ] = $scheme[ 'buttonBackgroundColor' ][ $state ];
30+
}
31+
32+
if ( $GLOBAL_COLOR_SCHEMES_CLASS->has_value( $scheme, 'buttonTextColor', $state ) ) {
33+
$states[ $state ][ $text_property ] = $scheme[ 'buttonTextColor' ][ $state ];
34+
}
35+
}
36+
37+
// Add a new selector with higher specificity
38+
$desktop_button_selector = '';
39+
$parent_hover_button_selector = '';
40+
$parent_hover_selector = array();
41+
42+
if ( isset( $selectors[ 'desktopParentHover' ] ) ) {
43+
$parent_hover_selector = is_array( $selectors[ 'desktopParentHover' ] ) ? $selectors[ 'desktopParentHover' ] : array( $selectors[ 'desktopParentHover' ] );
44+
}
45+
46+
switch ( $mode ) {
47+
case 'background':
48+
$desktop_button_selector = implode(", ", array(
49+
$selectors[ 'desktop' ] . ' > :where(.stk-button-group) > .stk-block-button',
50+
$selectors[ 'desktop' ] . ' > :where(.stk-container) > :where(.stk-inner-blocks) > :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > .stk-block-button',
51+
) );
52+
53+
if (isset( $selectors[ 'desktopParentHover' ] )) {
54+
$parent_hover_button_selector = implode(", ", array_map( function ( $s ){ return "$s > :where(.stk-button-group) > .stk-block-button, $s > :where(.stk-container) > :where(.stk-inner-blocks) > :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > .stk-block-button"; }, $parent_hover_selector ) );
55+
}
56+
break;
57+
case 'container':
58+
$desktop_button_selector = $selectors[ 'desktop' ] . ' > :where(.stk-inner-blocks) > :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > .stk-block-button';
59+
60+
if (isset( $selectors[ 'desktopParentHover' ] )) {
61+
$parent_hover_button_selector = implode(", ", array_map( function ( $s ){ return "$s > :where(.stk-inner-blocks) > :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > .stk-block-button"; }, $parent_hover_selector ) );
62+
}
63+
break;
64+
default:
65+
$desktop_button_selector = $selectors[ 'desktop' ] . ' :where(.stk-block:not(.stk-block-background)) > :where(.stk-button-group) > .stk-block-button';
66+
}
67+
68+
if ( count( $states[ 'desktop' ] ) ) {
69+
$styles[] = array(
70+
'selector' => $desktop_button_selector,
71+
'declarations' => $states[ 'desktop' ]
72+
);
73+
}
74+
75+
if ( count( $states[ 'desktopParentHover' ] ) && isset( $selectors[ 'desktopParentHover' ] ) ) {
76+
$parent_hover_selector = is_array( $selectors[ 'desktopParentHover' ] ) ? $selectors[ 'desktopParentHover' ] : array( $selectors[ 'desktopParentHover' ] );
77+
78+
$styles[] = array(
79+
'selector' => $parent_hover_button_selector,
80+
'declarations' => $states[ 'desktopParentHover' ]
81+
);
82+
}
83+
}
84+
*/
85+
86+
return $styles;
87+
}
88+
89+
add_filter( 'stackable.global-settings.global-color-schemes.add-theme-compatibility', 'stackable_blocksy_global_color_schemes_compatibility', 10, 6 );
90+
}

‎src/components/base-control2/hover-state-toggle.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const HoverStateToggle = props => {
8282
const stateOptions = _stateOptions.map( state => {
8383
if ( state.value === 'parent-hover' ) {
8484
return {
85-
disabled: props.forceUpdateHoverState ? props.disabledHoverOptions.includes( state.value ) : ! hasParentHoverState,
85+
disabled: props.forceUpdateHoverState ? false : ! hasParentHoverState,
8686
tooltip: displayTooltip
8787
? <span className="stk-tooltip__text">
8888
{ sprintf( '%s - %s', __( 'Parent Hovered', i18n ), __( 'Add a Container Background to a parent block to enable this state.', i18n ) ) }
@@ -126,7 +126,6 @@ HoverStateToggle.defaultProps = {
126126
hasResponsive: false, // Wether the attribute has responsive attributes (where we have hover states per device type)
127127
forceUpdateHoverState: false,
128128
hasHoverStateValue: undefined,
129-
disabledHoverOptions: [],
130129
}
131130

132131
export default memo( HoverStateToggle )

‎src/components/base-control2/index.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ export const BaseControl = props => {
8989
hasResponsive={ hasResponsive }
9090
forceUpdateHoverState={ props.forceUpdateHoverState }
9191
hasHoverStateValue={ props.hasHoverStateValue }
92-
disabledHoverOptions={ props.disabledHoverOptions }
9392
/>
9493
) }
9594
</div>
@@ -148,9 +147,6 @@ BaseControl.defaultProps = {
148147
// { hover: boolean, 'parent-hover': boolean }
149148
// If 'hover' or 'parent-hover' is true, then the hover toggle will be highlighted to show that the hover state value has been set
150149
hasHoverStateValue: undefined,
151-
152-
disabledHoverOptions: [],
153-
154150
}
155151

156152
const AdvancedControl = props => {
@@ -210,8 +206,6 @@ AdvancedControl.defaultProps = {
210206
// { hover: boolean, 'parent-hover': boolean }
211207
// If 'hover' or 'parent-hover' is true, then the hover toggle will be highlighted to show that the hover state value has been set
212208
hasHoverStateValue: undefined,
213-
214-
disabledHoverOptions: [],
215209
}
216210

217211
export default AdvancedControl

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

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -35,35 +35,18 @@
3535

3636
.stk-preset-color-schemes__control {
3737
margin: -16px -16px 16px;
38-
border-bottom: 1px solid #e0e0e0;
39-
.components-base-control__field {
40-
margin-bottom: 0px;
41-
position: relative;
42-
overflow-y: scroll;
43-
height: 235px;
44-
45-
&::after {
46-
display: block;
47-
position: sticky;
48-
bottom: 0px;
49-
height: 16px;
50-
content: "";
51-
background: #fff;
52-
}
53-
}
5438
.components-base-control__label {
5539
margin-bottom: 0px;
5640
padding: 16px 16px 12px;
57-
background: #fff;
58-
position: sticky;
59-
top: 0;
6041
}
6142
}
6243
.stk-preset-color-schemes__preset-wrapper {
6344
padding: 1px 16px;
6445
display: grid;
6546
gap: 8px;
6647
grid-template-columns: repeat(2, 1fr);
48+
overflow-y: scroll;
49+
height: 235px;
6750

6851
.stk-global-color-scheme__preview__background {
6952
outline: 1px solid #e0e0e0;

‎src/components/pro-control/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,8 @@ const LABELS = {
127127
'color-schemes': {
128128
title: __( 'Unlock Unlimited Color Schemes', i18n ),
129129
description: <ul>
130-
<li>{ __( 'Add and reuse custom color schemes', i18n ) }</li>
130+
<li>{ __( 'Access to 50+ curated color scheme presets', i18n ) }</li>
131+
<li>{ __( 'Create your own color schemes', i18n ) }</li>
131132
<li>{ __( 'Set default color schemes for blocks and sections', i18n ) }</li>
132133
<li>{ __( 'Streamline your design workflow', i18n ) }</li>
133134
</ul>,

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

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import PRESET_COLOR_SCHEMES from './preset-color-schemes.json'
66
/**
77
* External dependencies
88
*/
9-
import { i18n, isPro } from 'stackable'
9+
import {
10+
i18n, isPro, showProNotice,
11+
} from 'stackable'
1012
import {
1113
SortablePicker,
1214
InspectorSubHeader,
@@ -16,6 +18,8 @@ import {
1618
ColorSchemePresetPicker,
1719
DEFAULT_COLOR_SCHEME_COLORS,
1820
AdvancedToggleControl,
21+
ProControlButton,
22+
ControlSeparator,
1923
} from '~stackable/components'
2024
import { useBlockHoverState } from '~stackable/hooks'
2125
import { extractColor } from '~stackable/util'
@@ -92,9 +96,10 @@ const ColorSchemePicker = props => {
9296
}
9397
} )
9498

99+
const presets = applyFilters( 'stackable.global-settings.global-color-schemes.presets', PRESETS )
100+
95101
const [ subHeaderControls, setSubHeaderControls ] = useState( { showTrash: false, showReset: false } )
96-
const [ currentHoverState, _, hasParentHoverState ] = useBlockHoverState( { forceUpdateHoverState: true } )
97-
const clientIds = useSelect( select => select( 'core/block-editor' ).getSelectedBlockClientIds() )
102+
const [ currentHoverState ] = useBlockHoverState( { forceUpdateHoverState: true } )
98103

99104
const currentState = `desktop${ hoverState[ currentHoverState ] }`
100105

@@ -115,12 +120,6 @@ const ColorSchemePicker = props => {
115120
setSubHeaderControls( controls )
116121
}, [ itemInEdit ] )
117122

118-
useEffect( () => {
119-
if ( clientIds.length > 0 && ! hasParentHoverState && currentHoverState === 'parent-hover' ) {
120-
dispatch( 'stackable/hover-state' ).updateHoverState( 'normal' )
121-
}
122-
}, [ hasParentHoverState ] )
123-
124123
// Get the custom color schemes
125124
const customColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', [] )
126125

@@ -348,14 +347,6 @@ const ColorSchemePicker = props => {
348347
return [ 'normal', 'hover', 'parent-hover' ]
349348
}
350349

351-
const getDisabledHoverOptions = () => {
352-
if ( clientIds.length > 0 && ! hasParentHoverState ) {
353-
return [ 'parent-hover' ]
354-
}
355-
356-
return []
357-
}
358-
359350
const getToggleProps = settings => {
360351
const disabled = isDisabled( settings.property )
361352
const gradient = isGradient( itemInEdit?.colorScheme[ settings.property ]?.desktop )
@@ -418,9 +409,12 @@ const ColorSchemePicker = props => {
418409

419410
<ColorSchemePresetPicker
420411
label={ __( 'Color Scheme Presets', i18n ) }
421-
presets={ PRESETS }
412+
presets={ presets }
422413
onPresetClick={ onPresetClick }
423414
/>
415+
{ showProNotice && <ProControlButton type="color-schemes" /> }
416+
<ControlSeparator />
417+
424418
<AdvancedToggleControl
425419
label={ __( 'Show Scheme Colors in Color Pickers', i18n ) }
426420
checked={ ! itemInEdit?.hideInPicker }
@@ -442,7 +436,6 @@ const ColorSchemePicker = props => {
442436
enableGradient={ currentHoverState === 'normal' || settings.property === 'buttonBackgroundColor' }
443437
additionalToggleProps={ getToggleProps( settings ) }
444438
allowReset={ ! isDisabled( settings.property ) }
445-
disabledHoverOptions={ getDisabledHoverOptions() }
446439
/>
447440
) ) }
448441
</>

0 commit comments

Comments
 (0)