Skip to content

Commit 0eb87ef

Browse files
kaeizenkaeizen
authored
fix (Global Color Schemes): fix inherited values (#3469)
* fix inherited values * correctly display the color for the current hover state * fix: adjusted title names * adjusted text tooltip for parent hovered * fade out disabled color pickers * disable color schemes in select control, fade out undefined schemes * fix container background * icon list fix * button icon size, and icon size fix --------- Co-authored-by: [email protected] <>
1 parent da19cb2 commit 0eb87ef

File tree

14 files changed

+173
-90
lines changed

14 files changed

+173
-90
lines changed

‎src/block/icon-list-item/style.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,10 @@
4545
position: relative;
4646
.stk--svg-wrapper {
4747
.stk--inner-svg svg {
48-
height: var(--stk-icon-list-icon-size, 16px);
49-
width: var(--stk-icon-list-icon-size, 16px);
48+
// In Global Buttons and Icons, we renamed `--stk-icon-height` to `--stk-icon-list-icon-size`.
49+
// Keep the `--stk-icon-height` for backward compatibility.
50+
height: var(--stk-icon-height, var(--stk-icon-list-icon-size, 16px));
51+
width: var(--stk-icon-height, var(--stk-icon-list-icon-size, 16px));
5052
transform: rotate(var(--stk-icon-list-icon-rotation, 0deg));
5153
opacity: var(--stk-icon-list-icon-opacity, 1);
5254
fill: var(--stk-icon-list-marker-color);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const HOVER_OPTIONS = [
3535
icon: <SVGStateHover />,
3636
},
3737
{
38-
label: __( 'Parent Hovered State', i18n ),
38+
label: __( 'Parent Container Hovered State', i18n ),
3939
value: 'parent-hover',
4040
icon: <SVGStateParentHover />,
4141
},

‎src/components/color-palette-control/editor.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@
3939
.stk-control__reset-button {
4040
margin-top: 6px;
4141
}
42+
43+
&:has(.components-button[aria-disabled="true"]) {
44+
opacity: 0.4;
45+
}
4246
}
4347

4448
// Popover container.

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,20 @@
5252
outline: 1px solid #e0e0e0;
5353
}
5454
}
55+
56+
.stk-global-color-scheme__preview {
57+
position: relative;
58+
&::before {
59+
content: "\f543";
60+
font-family: dashicons;
61+
font-size: 16px;
62+
position: absolute;
63+
top: 50%;
64+
left: 50%;
65+
transform: translate(-50%, -50%);
66+
}
67+
}
68+
69+
.stk-scheme--is-disabled {
70+
opacity: 0.1;
71+
}

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

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button, BaseControl } from '@wordpress/components'
2-
2+
import classnames from 'classnames'
33
export const DEFAULT_COLOR_SCHEME_COLORS = {
44
backgroundColor: { desktop: '' },
55
headingColor: { desktop: '' },
@@ -14,43 +14,50 @@ export const DEFAULT_COLOR_SCHEME_COLORS = {
1414
const NOOP = () => {}
1515

1616
const ColorSchemePreview = ( {
17-
colors, withWrapper = false, onClick = NOOP,
17+
colors, withWrapper = false, onClick = NOOP, isDisabled = false,
1818
} ) => {
1919
const TagName = onClick === NOOP ? 'div' : Button
2020
const additionalProps = onClick === NOOP ? {} : { onClick }
21+
22+
const classNames = classnames( 'stk-global-color-scheme__preview__background', {
23+
'stk-scheme--is-disabled': isDisabled,
24+
} )
25+
2126
return (
22-
<TagName
23-
className="stk-global-color-scheme__preview__background"
24-
style={ withWrapper ? {} : { background: colors?.backgroundColor } }
25-
{ ...additionalProps }
26-
>
27-
<div className="stk-global-color-scheme__preview__typography">
28-
<span style={ { color: colors?.headingColor } }>A</span>
29-
<span style={ { color: colors?.textColor } }>a</span>
30-
</div>
31-
<div>
32-
<div
33-
className="stk-global-color-scheme__preview__button"
34-
style={ { background: `${ colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }` } }
35-
/>
36-
<div
37-
className="stk-global-color-scheme__preview__button"
38-
style={ {
39-
borderStyle: 'solid',
40-
borderWidth: '1px',
41-
borderColor: `${ colors?.buttonOutlineColor || colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }`,
42-
} }
43-
/>
44-
<div
45-
className="stk-global-color-scheme__preview__circle"
46-
style={ { backgroundColor: `${ colors?.linkColor || colors?.textColor || 'var(--stk-container-color)' }` } }
47-
/>
48-
<div
49-
className="stk-global-color-scheme__preview__circle"
50-
style={ { backgroundColor: `${ colors?.accentColor || 'var(--stk-icon-color)' }` } }
51-
/>
52-
</div>
53-
</TagName>
27+
<div className="stk-global-color-scheme__preview">
28+
<TagName
29+
className={ classNames }
30+
style={ withWrapper ? {} : { background: colors?.backgroundColor } }
31+
{ ...additionalProps }
32+
>
33+
<div className="stk-global-color-scheme__preview__typography">
34+
<span style={ { color: colors?.headingColor } }>A</span>
35+
<span style={ { color: colors?.textColor } }>a</span>
36+
</div>
37+
<div>
38+
<div
39+
className="stk-global-color-scheme__preview__button"
40+
style={ { background: `${ colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }` } }
41+
/>
42+
<div
43+
className="stk-global-color-scheme__preview__button"
44+
style={ {
45+
borderStyle: 'solid',
46+
borderWidth: '1px',
47+
borderColor: `${ colors?.buttonOutlineColor || colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }`,
48+
} }
49+
/>
50+
<div
51+
className="stk-global-color-scheme__preview__circle"
52+
style={ { backgroundColor: `${ colors?.linkColor || colors?.textColor || 'var(--stk-container-color)' }` } }
53+
/>
54+
<div
55+
className="stk-global-color-scheme__preview__circle"
56+
style={ { backgroundColor: `${ colors?.accentColor || 'var(--stk-icon-color)' }` } }
57+
/>
58+
</div>
59+
</TagName>
60+
</div>
5461
)
5562
}
5663

‎src/global-settings.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1024,6 +1024,14 @@ public static function generate_global_block_layouts( $option_name, $settings_na
10241024
}
10251025

10261026
$css[ $device ][ $custom_property ] = $style;
1027+
1028+
// This is for backward compatibility. Add a custom property for the icon size of custom icons.
1029+
// This is to ensure that for custom icons that don't have iconSize attribute,
1030+
// their icon size won't change after upgrading.
1031+
// The custom property allows us to also apply the global icon size setting to custom icons.
1032+
if ( $property === 'button-icon-size' || $property === 'icon-size' ) {
1033+
$css[ $device ][ '--stk-custom-' . $property ] = $style;
1034+
}
10271035
}
10281036
}
10291037

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@ import { useSelect } from '@wordpress/data'
55
import { applyFilters } from '@wordpress/hooks'
66
import { __ } from '@wordpress/i18n'
77

8+
// Check if the color scheme contains a value for any of the states
9+
const schemeHasValue = scheme => {
10+
const hasValue = Object.values( scheme ).some( states => {
11+
return Object.values( states ).some( value => value !== '' )
12+
} )
13+
14+
return hasValue
15+
}
16+
817
export const useBlockColorSchemes = () => {
918
const {
1019
getScheme,
@@ -32,6 +41,7 @@ export const useBlockColorSchemes = () => {
3241
}, ...allColorSchemes?.map( scheme => ( {
3342
label: scheme.name,
3443
value: scheme.key,
44+
disabled: ! schemeHasValue( scheme.colorScheme ),
3545
} ) ) ]
3646

3747
// Returns the color scheme slug if it exists, otherwise return a fallback value

‎src/plugins/editor-device-preview-class/index.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
/**
88
* External dependencies
99
*/
10-
import { useDeviceType } from '~stackable/hooks'
10+
import { useDeviceType, useBlockHoverState } from '~stackable/hooks'
1111

1212
/**
1313
* WordPress dependencies
@@ -18,6 +18,7 @@ import { registerPlugin } from '@wordpress/plugins'
1818

1919
const EditorPreviewClass = () => {
2020
const deviceType = useDeviceType()
21+
const [ currentHoverState ] = useBlockHoverState( { forceUpdateHoverState: true } )
2122
const editorEl = useSelect( select => {
2223
return select( 'stackable/editor-dom' ).getEditorDom()
2324
}, [] )
@@ -33,6 +34,13 @@ const EditorPreviewClass = () => {
3334
editorEl.classList.add( `stk-preview-device-${ deviceType.toLowerCase() }` )
3435
}
3536

37+
// Add hover state class
38+
// Dev note: This allows us to easily add CSS rules for each hover state in global styles.
39+
if ( editorEl && editorEl.classList.contains( `stk-preview-state--${ currentHoverState }` ) === false ) {
40+
editorEl.classList.remove( 'stk-preview-state--normal', 'stk-preview-state--hover', 'stk-preview-state--parent-hover', 'stk-preview-state--collapsed' )
41+
editorEl.classList.add( `stk-preview-state--${ currentHoverState }` )
42+
}
43+
3644
// Add theme class
3745
if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
3846
const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
@@ -45,6 +53,10 @@ const EditorPreviewClass = () => {
4553
editorEl.classList.remove( 'stk-preview-device-desktop', 'stk-preview-device-tablet', 'stk-preview-device-mobile' )
4654
editorEl.classList.add( `stk-preview-device-${ deviceType.toLowerCase() }` )
4755
}
56+
if ( editorEl?.classList.contains( `stk-preview-state--${ currentHoverState }` ) === false ) {
57+
editorEl.classList.remove( 'stk-preview-state--normal', 'stk-preview-state--hover', 'stk-preview-state--parent-hover', 'stk-preview-state--collapsed' )
58+
editorEl.classList.add( `stk-preview-state--${ currentHoverState }` )
59+
}
4860
if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
4961
const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
5062
editorEl.classList.add( theme )
@@ -53,7 +65,7 @@ const EditorPreviewClass = () => {
5365

5466
return () => mo.disconnect()
5567
}
56-
}, [ editorEl, deviceType ] )
68+
}, [ editorEl, deviceType, currentHoverState ] )
5769

5870
return null
5971
}

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* Internal dependencies
33
*/
44
import { hoverState } from '../utils'
5+
import { schemeHasValue } from './utils'
56
import PRESET_COLOR_SCHEMES from './preset-color-schemes.json'
67
/**
78
* External dependencies
@@ -68,7 +69,7 @@ const COLOR_SETTINGS = [ {
6869
property: 'accentColor',
6970
disabledTooltip: {
7071
hover: sprintf( __( 'Changing the %s is not allowed for %s state.', i18n ),
71-
__( 'Text Color', i18n ), __( 'hover', i18n ) ),
72+
__( 'Accent Color', i18n ), __( 'hover', i18n ) ),
7273
},
7374
}, {
7475
label: __( 'Button Color', i18n ),
@@ -314,7 +315,8 @@ const ColorSchemePicker = props => {
314315
buttonOutlineColor: getInheritedValue( item.colorScheme.buttonOutlineColor ) || defaults.buttonOutlineColor.desktop,
315316
}
316317

317-
const Preview = <ColorSchemePreview colors={ colors } withWrapper={ withWrapper } />
318+
const isDisabled = ! schemeHasValue( item.colorScheme ) || withWrapper
319+
const Preview = <ColorSchemePreview colors={ colors } withWrapper={ withWrapper } isDisabled={ isDisabled } />
318320

319321
return withWrapper ? <div
320322
className="stk-global-color-scheme__preview-wrapper"
@@ -398,7 +400,11 @@ const ColorSchemePicker = props => {
398400
showResetCallback={ item => showResetButton( item ) }
399401
/> : <>
400402
<InspectorSubHeader
401-
title={ __( 'Edit Color Scheme', i18n ) }
403+
title={ ! isPro && itemInEdit.key === 'scheme-default-1'
404+
? sprintf( __( 'Editing %s', i18n ), __( 'Default Scheme', i18n ) )
405+
: ! isPro && itemInEdit.key === 'scheme-default-2'
406+
? sprintf( __( 'Editing %s', i18n ), __( 'Background Scheme', i18n ) )
407+
: sprintf( __( 'Editing %s', i18n ), __( 'Color Scheme', i18n ) ) }
402408
onBack={ () => setItemInEdit( null ) }
403409
showTrash={ subHeaderControls.showTrash }
404410
showReset={ subHeaderControls.showReset }

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -359,10 +359,10 @@ public function get_css_custom_properties( $mode = '' ) {
359359
return $properties_per_state;
360360
}
361361

362-
public function get_inherited_value( $property, $current_state, $mode ) {
362+
public function get_inherited_value( $property, $current_state, $inheritParentHover = true ) {
363363
$value = $property[ $current_state ] ?? false;
364364

365-
if ( ! $value && $current_state == 'desktopHover' && $mode === 'container' ) {
365+
if ( ! $value && $current_state == 'desktopHover' && $inheritParentHover ) {
366366
$value = $property[ 'desktopParentHover' ] ?? false;
367367
}
368368

@@ -425,9 +425,17 @@ public function generate_css_rules( $scheme, $mode = '' ) {
425425
$decls[ $state ][ $css_property ] = $scheme[ $property ][ $state ];
426426
}
427427

428-
$inherited_value = $this->get_inherited_value( $scheme[ $property ], $state, $mode );
429-
if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) ) {
430-
$decls[ $state ][ $css_property ] = $inherited_value;
428+
$inherited_value = $this->get_inherited_value( $scheme[ $property ], $state );
429+
$inherited_normal_value = $this->get_inherited_value( $scheme[ $property ], $state, false );
430+
431+
// Inherit the normal value on hover state
432+
if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_normal_value) {
433+
$decls[ 'desktop' ][ $css_property ] = $inherited_normal_value;
434+
}
435+
436+
// Inherit the parent-hover value on hover state
437+
if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_value) {
438+
$decls[ 'desktopParentHover' ][ $css_property ] = $inherited_value;
431439
}
432440

433441
// If button background color is gradient, plain style buuttons should use the button outline color.

0 commit comments

Comments
 (0)