Skip to content

Commit 5c8895e

Browse files
kaeizenkaeizen
authored
Fix (color schemes): Add default colors for container color scheme fallback (#3534)
* add colors to default container scheme * add deprecation, fix subtitle and icon colors --------- Co-authored-by: bfintal@gmail.com <>
1 parent b44a94e commit 5c8895e

14 files changed

Lines changed: 283 additions & 24 deletions

File tree

‎plugin.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ function is_frontend() {
235235
require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );
236236
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
237237
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );
238+
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/deprecated/index.php' ); // We need to add this so the filter for deprecation gets applied.
238239
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/index.php' );
239240
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/preset-controls/index.php' );
240241
require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
@@ -289,6 +290,7 @@ function is_frontend() {
289290
require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/native-global-colors.php' );
290291
require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/navigation-panel-pre-enabled.php' );
291292
require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/font-awesome-version.php' );
293+
require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/global-color-schemes.php' );
292294

293295
/**
294296
* V2 Deprecated

‎src/deprecated/global-color-schemes.php‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
/**
3+
* Global Color Schemes has a bug in v3.16.0-v3.16.2
4+
* We added an option that allows users to use the v3.16.0 color scheme inheritance (broken)
5+
*/
6+
7+
// Exit if accessed directly.
8+
if ( ! defined( 'ABSPATH' ) ) {
9+
exit;
10+
}
11+
12+
if ( ! function_exists( 'stackable_global_color_schemes_set_color_scheme_inheritance' ) ) {
13+
14+
/**
15+
* When upgrading to v3.16.3 and above, check if the default container scheme is empty.
16+
* If so, update the option to true -- keep the borken color scheme inheritance.
17+
* Otherwise, it will use the fixed color scheme inheritance.
18+
*/
19+
function stackable_global_color_schemes_set_color_scheme_inheritance( $old_version, $new_version ) {
20+
if ( ! empty( $old_version ) && version_compare( $old_version, "3.16.3", "<" ) ) {
21+
$color_schemes = Stackable_Global_Color_Schemes::get_color_schemes_array();
22+
23+
// If there are no color schemes, do nothing
24+
if ( ! $color_schemes ) {
25+
return;
26+
}
27+
28+
$container_default = isset( $color_schemes[ get_option( 'stackable_global_container_mode_color_scheme' ) ] ) ? get_option( 'stackable_global_container_mode_color_scheme' ) : 'scheme-default-1';
29+
30+
if ( Stackable_Global_Color_Schemes::is_scheme_empty( $color_schemes[ $container_default ] ) ) {
31+
update_option( 'stackable_use_v3_16_0_color_scheme_inheritance', true, 'no' );
32+
}
33+
}
34+
}
35+
add_action( 'stackable_early_version_upgraded', 'stackable_global_color_schemes_set_color_scheme_inheritance', 10, 2 );
36+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { select } from '@wordpress/data'
5+
import { addFilter } from '@wordpress/hooks'
6+
7+
// This makes the color scheme inheritance broken
8+
addFilter( 'stackable.global-settings.global-color-schemes.default-container-scheme', 'stackable.global-settings.global-color-schemes.use-v3_16_0-color-scheme-inheritance', styles => {
9+
const {
10+
useV3_16_0_ColorSchemeInheritance,
11+
} = select( 'stackable/global-color-schemes' ).getSettings()
12+
13+
if ( useV3_16_0_ColorSchemeInheritance ) {
14+
return ''
15+
}
16+
17+
return styles
18+
} )
19+

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<?php
2+
/**
3+
* This makes the color scheme inheritance broken.
4+
*/
5+
6+
// Exit if accessed directly.
7+
if ( ! defined( 'ABSPATH' ) ) {
8+
exit;
9+
}
10+
11+
if ( ! function_exists( 'stackable_global_color_schemes_container_color_scheme_inheritance_deprecation' ) ) {
12+
13+
function stackable_global_color_schemes_container_color_scheme_inheritance_deprecation( $styles ) {
14+
if ( get_option( 'stackable_use_v3_16_0_color_scheme_inheritance' ) ) {
15+
return [];
16+
}
17+
18+
return $styles;
19+
}
20+
21+
add_filter( 'stackable.global-settings.global-color-schemes.default-container-scheme', 'stackable_global_color_schemes_container_color_scheme_inheritance_deprecation' );
22+
}

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
/**
22
* Internal dependencies
33
*/
4+
import './deprecated'
45
import {
5-
convertToObj, getCSS, schemeHasValue,
6+
convertToObj, getCSS, schemeHasValue, getDefaultColors,
7+
unsetDefaultColors,
68
} from './utils'
79

810
import { onClassChange } from '../utils'
@@ -17,6 +19,8 @@ import { useBlockColorSchemes, useBlockHoverState } from '~stackable/hooks'
1719
*/
1820
import { useEffect, useState } from '@wordpress/element'
1921
import { useSelect } from '@wordpress/data'
22+
import { applyFilters } from '@wordpress/hooks'
23+
2024
const renderGlobalStyles = (
2125
setStyles,
2226
colorSchemesArray,
@@ -43,6 +47,8 @@ const renderGlobalStyles = (
4347
* 5. Container color schemes (used by blocks that opt to use non-default container schemes)
4448
*/
4549

50+
const unsetDefaults = unsetDefaultColors()
51+
4652
if ( baseColorScheme in colorSchemes && schemeHasValue( colorSchemes[ baseColorScheme ] ) ) {
4753
decls = getCSS( colorSchemes[ baseColorScheme ], currentHoverState )
4854
if ( decls.desktop.length || decls.desktopHover.length ) {
@@ -54,10 +60,10 @@ const renderGlobalStyles = (
5460
decls = getCSS( colorSchemes[ backgroundModeColorScheme ], currentHoverState, 'background' )
5561
let bgcss = ''
5662
if ( decls.desktop.length || decls.desktopHover.length ) {
57-
bgcss += `.stk-block-background{ ${ [ ...decls.desktop, ...decls.desktopHover ].join( '' ) } }\n`
63+
bgcss += `.stk-block-background{ ${ [ ...decls.desktop, ...decls.desktopHover, unsetDefaults ].join( '' ) } }\n`
5864
}
5965
if ( decls.desktopParentHover.length ) {
60-
bgcss += `:where(.stk-hover-parent:hover) .stk-block-background{ ${ decls.desktopParentHover.join( '' ) } }\n`
66+
bgcss += `:where(.stk-hover-parent:hover) .stk-block-background{ ${ [ ...decls.desktopParentHover, unsetDefaults ].join( '' ) } }\n`
6167
}
6268
css += bgcss
6369
}
@@ -72,6 +78,11 @@ const renderGlobalStyles = (
7278
containercss += `.stk-container:where(:not(.stk--no-background):hover), :where(.stk-hover-parent:hover) .stk-container:where(:not(.stk--no-background)){ ${ decls.desktopParentHover.join( '' ) } }\n`
7379
}
7480
css += containercss
81+
// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
82+
} else if ( containerModeColorScheme in colorSchemes && ! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {
83+
const containercss = `.stk-container:where(:not(.stk--no-background)){ ${ getDefaultColors() } }\n`
84+
85+
css += applyFilters( 'stackable.global-settings.global-color-schemes.default-container-scheme', containercss )
7586
}
7687

7788
Object.entries( colorSchemes ).forEach( ( [ key, scheme ] ) => {
@@ -81,10 +92,10 @@ const renderGlobalStyles = (
8192

8293
decls = getCSS( scheme, currentHoverState, 'background' )
8394
if ( decls.desktop.length || decls.desktopHover.length ) {
84-
rules.background.push( `.stk--background-scheme--${ key }{ ${ [ ...decls.desktop, ...decls.desktopHover ].join( '' ) } }` )
95+
rules.background.push( `.stk--background-scheme--${ key }{ ${ [ ...decls.desktop, ...decls.desktopHover, unsetDefaults ].join( '' ) } }` )
8596
}
8697
if ( decls.desktopParentHover.length ) {
87-
rules.background.push( `:where(.stk-hover-parent:hover) .stk--background-scheme--${ key }{ ${ decls.desktopParentHover.join( '' ) } }` )
98+
rules.background.push( `:where(.stk-hover-parent:hover) .stk--background-scheme--${ key }{ ${ [ ...decls.desktopParentHover, unsetDefaults ].join( '' ) } }` )
8899
}
89100

90101
decls = getCSS( scheme, currentHoverState, 'container' )

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

Lines changed: 83 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,18 @@ public function register_color_schemes() {
132132
'default' => '',
133133
)
134134
);
135+
136+
register_setting(
137+
'stackable_global_settings',
138+
'stackable_use_v3_16_0_color_scheme_inheritance',
139+
array(
140+
'type' => 'boolean',
141+
'description' => __( 'Stackable Global Color Scheme v3.16.0 Color Scheme Inheritance', STACKABLE_I18N ),
142+
'sanitize_callback' => 'sanitize_text_field',
143+
'show_in_rest' => true,
144+
'default' => false,
145+
)
146+
);
135147
}
136148

137149
// Make this function static so it can be used when
@@ -182,6 +194,20 @@ public static function get_color_scheme_properties( $values = null ) {
182194
/**-----------------------------------------------------------------------------
183195
* Global Color Scheme functions
184196
*-----------------------------------------------------------------------------*/
197+
198+
public static function get_color_schemes_array() {
199+
$schemes_array = is_array( get_option( 'stackable_global_color_schemes' ) ) ? get_option( 'stackable_global_color_schemes' ) : [];
200+
201+
// Get all color schemes, including custom color schemes if any
202+
$all_color_schemes = apply_filters( 'stackable_global_color_schemes/get_color_schemes', $schemes_array );
203+
204+
if ( ! is_array( $all_color_schemes ) ) {
205+
return false;
206+
}
207+
208+
return self::convert_to_assoc_array( $all_color_schemes );
209+
}
210+
185211
/**
186212
* Add the default global color schemes in the frontend (Base, Default Background, Default Container).
187213
* Other color schemes used by blocks will be added on `render_block` filter.
@@ -201,16 +227,13 @@ public function add_global_color_schemes_styles( $current_css ) {
201227
}
202228

203229
// Generate the CSS for the color schemes if there is no cached CSS
204-
$schemes_array = is_array( get_option( 'stackable_global_color_schemes' ) ) ? get_option( 'stackable_global_color_schemes' ) : [];
205-
206-
// Get all color schemes, including custom color schemes if any
207-
$all_color_schemes = apply_filters( 'stackable_global_color_schemes/get_color_schemes', $schemes_array );
230+
$all_color_schemes = $this::get_color_schemes_array();
208231

209-
if ( ! is_array( $all_color_schemes ) ) {
232+
if ( ! $all_color_schemes ) {
210233
return $current_css;
211234
}
212235

213-
$this->color_schemes = $this->convert_to_assoc_array( $all_color_schemes );
236+
$this->color_schemes = $all_color_schemes;
214237

215238
$base_default = isset( $this->color_schemes[ get_option( 'stackable_global_base_color_scheme' ) ] ) ? get_option( 'stackable_global_base_color_scheme' ) : 'scheme-default-1';
216239
$background_default = isset( $this->color_schemes[ get_option( 'stackable_global_background_mode_color_scheme' ) ] ) ? get_option( 'stackable_global_background_mode_color_scheme' ) : 'scheme-default-2';
@@ -274,6 +297,11 @@ public function add_global_color_schemes_styles( $current_css ) {
274297
$styles = $this->generate_color_scheme_styles( $styles, $scheme );
275298
}
276299

300+
// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
301+
if ( isset( $this->color_schemes[ $container_default ] ) && $this::is_scheme_empty( $this->color_schemes[ $container_default ] ) ) {
302+
$styles = $this->getDefaultContainerColors( $styles, $default_color_schemes[ 2 ] );
303+
}
304+
277305
$color_scheme_css = '';
278306
$generated_css = wp_style_engine_get_stylesheet_from_css_rules( $styles );
279307
if ( $generated_css != '' ) {
@@ -320,7 +348,7 @@ public function add_body_class_color_schemes( $classes ) {
320348
* @param Array $schemes_array
321349
* @return Array
322350
*/
323-
public function convert_to_assoc_array( $schemes_array ) {
351+
public static function convert_to_assoc_array( $schemes_array ) {
324352
return array_column( $schemes_array, 'colorScheme', 'key' );
325353
}
326354

@@ -402,6 +430,18 @@ public function has_value( $scheme, $property, $state ) {
402430
return true;
403431
}
404432

433+
public static function is_scheme_empty( $scheme ) {
434+
foreach( $scheme as $property => $values ) {
435+
if ( is_array( $values ) ) {
436+
foreach( $values as $device_state => $value ) {
437+
if ( $value ) return false;
438+
}
439+
}
440+
}
441+
442+
return true;
443+
}
444+
405445
public function is_gradient( $scheme, $property, $state ) {
406446
if ( ! $this->has_value( $scheme, $property, $state ) ) {
407447
return false;
@@ -410,6 +450,37 @@ public function is_gradient( $scheme, $property, $state ) {
410450
return strpos( $value, 'linear-' ) !== false || strpos( $value, 'radial-' ) !== false;
411451
}
412452

453+
// These colors are used when there are color schemes but the default container scheme is empty
454+
public function getDefaultContainerColors( $styles, $scheme ) {
455+
$selectors = $scheme[ 'selectors' ];
456+
457+
$default_styles = array();
458+
$default_styles[] = array(
459+
'selector' => $selectors[ 'desktop' ],
460+
'declarations' => array(
461+
'--stk-background-color' => 'var(--stk-default-container-background-color, #fff)',
462+
'--stk-heading-color' => 'var(--stk-default-heading-color, initial)',
463+
'--stk-text-color' => 'var(--stk-container-color, initial)',
464+
'--stk-link-color' => 'var(--stk-default-link-color, var(--stk-text-color, initial))',
465+
'--stk-accent-color' => '#ddd',
466+
'--stk-subtitle-color' => '#39414d',
467+
'--stk-default-icon-color' => 'var(--stk-icon-color)',
468+
'--stk-button-background-color' => 'var(--stk-default-button-background-color, #008de4)',
469+
'--stk-button-text-color' => 'var(--stk-default-button-text-color, #fff)',
470+
'--stk-button-outline-color' => 'var(--stk-default-button-background-color, #008de4)'
471+
)
472+
);
473+
474+
$default_styles = apply_filters( 'stackable.global-settings.global-color-schemes.default-container-scheme', $default_styles );
475+
476+
foreach ( $default_styles as $styles ) {
477+
$styles[] = $default_styles;
478+
}
479+
480+
481+
return $styles;
482+
}
483+
413484
/**
414485
* This returns the CSS declarations for the CSS rules.
415486
*
@@ -436,6 +507,11 @@ public function generate_css_rules( $scheme, $mode = '' ) {
436507
foreach ( $properties as $property => $css_property ) {
437508
if ( $this->has_value( $scheme, $property, $state ) ) {
438509
$decls[ $state ][ $css_property ] = $scheme[ $property ][ $state ];
510+
511+
if ( $property === 'accentColor' ) {
512+
$suffix = $state === 'desktopHover' ? '-hover' : '';
513+
$decls[ $state ][ "--stk-subtitle-color$suffix" ] = $scheme[ $property ][ $state ];
514+
}
439515
}
440516

441517
/**

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const DEFAULT_STATE = {
2020
baseColorScheme: '',
2121
backgroundModeColorScheme: '',
2222
containerModeColorScheme: '',
23+
useV3_16_0_ColorSchemeInheritance: '',
2324
}
2425

2526
const STORE_ACTIONS = {
@@ -77,6 +78,7 @@ domReady( () => {
7778
stackable_global_base_color_scheme: baseColorScheme,
7879
stackable_global_background_mode_color_scheme: backgroundModeColorScheme,
7980
stackable_global_container_mode_color_scheme: containerModeColorScheme,
81+
stackable_use_v3_16_0_color_scheme_inheritance: useV3_16_0_ColorSchemeInheritance,
8082
} = response
8183

8284
const colorSchemes = Array.isArray( _colorSchemes ) && _colorSchemes.length > 0 ? _colorSchemes : [ {
@@ -115,6 +117,7 @@ domReady( () => {
115117
baseColorScheme,
116118
backgroundModeColorScheme,
117119
containerModeColorScheme,
120+
useV3_16_0_ColorSchemeInheritance,
118121
}
119122

120123
dispatch( 'stackable/global-color-schemes' ).updateSettings( settings )

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,20 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
9191

9292
if ( scheme[ property ]?.[ state ] ) {
9393
decls[ state ].push( `${ customProperty }${ suffix }: ${ scheme[ property ]?.[ state ] };` )
94+
95+
if ( property === 'accentColor' ) {
96+
decls[ state ].push( `${ camelToKebab( 'subtitleColor' ) }${ suffix }: ${ scheme[ property ]?.[ state ] };` )
97+
}
9498
}
9599

96100
const inheritedValue = getInheritedValue( scheme[ property ], state )
97101
// const inheritedNormalValue = getInheritedValue( scheme[ property ], state, false )
98102
if ( state === 'desktopParentHover' && currentHoverState !== 'normal' && property !== 'backgroundColor' && inheritedValue ) {
99103
decls.desktopHover.push( `${ customProperty }-parent-hover: ${ inheritedValue };` )
104+
105+
if ( property === 'accentColor' ) {
106+
decls[ state ].push( `${ camelToKebab( 'subtitleColor' ) }-parent-hover: ${ inheritedValue };` )
107+
}
100108
}
101109

102110
/**
@@ -153,6 +161,32 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
153161
return addThemeCompatibility( decls, scheme, mode )
154162
}
155163

164+
// These colors are used when there are color schemes but the default container scheme is empty
165+
export const getDefaultColors = () => {
166+
let decls = ''
167+
168+
decls += '--stk-background-color: var(--stk-default-container-background-color, #fff);'
169+
decls += '--stk-heading-color: var(--stk-default-heading-color, initial);'
170+
decls += '--stk-text-color: var(--stk-container-color, initial);'
171+
decls += '--stk-link-color: var(--stk-default-link-color, var(--stk-text-color, initial));'
172+
decls += '--stk-accent-color: #ddd;'
173+
decls += '--stk-subtitle-color: #39414d;'
174+
decls += '--stk-default-icon-color: var(--stk-icon-color);'
175+
decls += '--stk-button-background-color: var(--stk-default-button-background-color, #008de4);'
176+
decls += '--stk-button-text-color: var(--stk-default-button-text-color, #fff);'
177+
decls += '--stk-button-outline-color: var(--stk-default-button-background-color, #008de4);'
178+
179+
return decls
180+
}
181+
182+
export const unsetDefaultColors = () => {
183+
let decls = ''
184+
185+
decls += '--stk-default-icon-color: unset;'
186+
187+
return decls
188+
}
189+
156190
const addThemeCompatibility = ( decls, scheme, mode ) => {
157191
const themeRegex = /stk--is-\w+-theme/gm
158192
const theme = document.querySelector( 'body' ).className.match( themeRegex )?.[ 0 ]

0 commit comments

Comments
 (0)