Fix (color schemes): change selectors for color schemes (#3624)

kaeizen · web-flow · commit 66222a213f9b · 2025-10-10T15:08:37.000+08:00
* remove color scheme styles in editor if there are no color schemes

* update selectors for color schemes

* add compatibility for blocksy

* coderabbit's qa fixes

* fix generated css when there are no color schemes
diff --git a/src/block/countdown/style.scss b/src/block/countdown/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 .stk-block.stk-block-countdown {
 	text-align: center;
 	&.stk-block-countdown--aligned {
@@ -61,7 +63,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-countdown__digit {
 		color: var(--stk-accent-color);
 		&:where(:hover) {
diff --git a/src/block/divider/style.scss b/src/block/divider/style.scss
@@ -8,7 +8,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block.stk-block-divider {
 		hr.stk-block-divider__hr,
 		.stk-block-divider__dot {
diff --git a/src/block/icon-list/style.scss b/src/block/icon-list/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 // Important, we can't use flex since it causes issues with columns.
 .stk-block-icon-list {
 	.stk-block-icon-list--grid:is(ul, ol) {
@@ -92,7 +94,7 @@
 	}
 }
 
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-icon-list {
 		--stk-icon-list-marker-color: var(--stk-accent-color);
 		:where(.stk-block-icon-list-item) {
diff --git a/src/block/number-box/style.scss b/src/block/number-box/style.scss
@@ -21,7 +21,7 @@ div.stk-block-number-box__text {
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {
+:where(#{$stk-has-color-schemes-selector}) .stk-block-number-box.stk--has-shape {
 	.stk-block-number-box__container,
 	div.stk-block-number-box__text {
 		color: var(--stk-button-text-color, #fff);
diff --git a/src/block/price/style.scss b/src/block/price/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 .stk-block-price {
 	line-height: 1;
 	.stk-block-text {
@@ -12,6 +14,6 @@
 	line-height: 0.7;
 }
 
-:where(.stk-has-color-schemes .stk-block-price) .stk-block-text {
+:where(#{$stk-has-color-schemes-selector}) :where(.stk-block-price) .stk-block-text {
 	color: var(--stk-text-color);
 }
diff --git a/src/block/progress-bar/style.scss b/src/block/progress-bar/style.scss
@@ -47,7 +47,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-progress-bar {
 		--progress-color-1: var(--stk-accent-color);
 	}
diff --git a/src/block/progress-circle/style.scss b/src/block/progress-circle/style.scss
@@ -55,7 +55,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-progress-circle {
 		--progress-color-1: var(--stk-accent-color);
 	}
diff --git a/src/block/table-of-contents/style.scss b/src/block/table-of-contents/style.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 // Important, we can't use flex since it causes issues with columns.
 .stk-block-table-of-contents {
 	.stk-table-of-contents__table {
@@ -40,7 +42,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-table-of-contents {
 		// Add this so that it inherits the color from global color schemes.
 		::marker {
diff --git a/src/block/timeline/style.scss b/src/block/timeline/style.scss
@@ -21,7 +21,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-timeline {
 		--line-accent-bg-color: var(--stk-accent-color, #000);
 	}
diff --git a/src/compatibility/blocksy/style.scss b/src/compatibility/blocksy/style.scss
@@ -0,0 +1,6 @@
+// Use Blocksy theme colors as fallback defaults for container color schemes.
+// These defaults apply when the default container color scheme is unset, but background or custom schemes exist.
+:where(.stk--is-blocksy-theme.stk--has-container-scheme) {
+	--stk-default-heading-color: var(--theme-heading-color, var(--theme-heading-2-color, var(--theme-headings-color)));
+	--stk-default-link-color: var(--theme-link-initial-color);
+}
diff --git a/src/plugins/global-settings/color-schemes/color-scheme-picker.js b/src/plugins/global-settings/color-schemes/color-scheme-picker.js
@@ -137,11 +137,19 @@ const ColorSchemePicker = props => {
 	// Get the custom color schemes
 	const customColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', [] )
 
+	// Checks if there are any color schemes with set values
+	const hasNoColorSchemes = currentColorSchemes => {
+		return ! currentColorSchemes.some( item => schemeHasValue( item.colorScheme ) )
+	}
+
 	const saveColorSchemeSettings = updatedColorSchemes => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
 			const settings = new models.Settings( {
-				stackable_global_color_schemes: updatedColorSchemes, // eslint-disable-line camelcase
+				// Store an empty array if all color schemes have no values,
+				// which optimizes the frontend by skipping unnecessary color scheme calculations.
+				// Otherwise, save the provided updatedColorSchemes array.
+				stackable_global_color_schemes: hasNoColorSchemes( updatedColorSchemes ) ? [] : updatedColorSchemes, // eslint-disable-line camelcase
 				// Clear the cached CSS when the color scheme is updated
 				stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
 			} )
diff --git a/src/plugins/global-settings/color-schemes/editor-loader.js b/src/plugins/global-settings/color-schemes/editor-loader.js
@@ -69,6 +69,15 @@ export const renderGlobalColorSchemeStyles = (
 		css += bgcss
 	}
 
+	// 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
+	const addContainerSchemeDefaultColors = containerModeColorScheme in colorSchemes && ! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) &&
+		(
+			// Add default container scheme if background scheme has value
+			( backgroundModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ backgroundModeColorScheme ] ) ) ||
+			// Add default container scheme if there are color schemes other than the default scheme and background scheme
+			( colorSchemesArray.length > 2 )
+		)
+
 	if ( containerModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {
 		decls = getCSS( colorSchemes[ containerModeColorScheme ], currentHoverState, 'container' )
 		let containercss = ''
@@ -79,8 +88,7 @@ export const renderGlobalColorSchemeStyles = (
 			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`
 		}
 		css += containercss
-	// 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
-	} else if ( containerModeColorScheme in colorSchemes && ! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {
+	} else if ( addContainerSchemeDefaultColors	) {
 		const containercss = `.stk-container:where(:not(.stk--no-background)){ ${ getDefaultColors() } }\n`
 
 		css += applyFilters( 'stackable.global-settings.global-color-schemes.default-container-scheme', containercss )
@@ -118,6 +126,8 @@ export const renderGlobalColorSchemeStyles = (
 	setStyles( css )
 }
 
+let filterRegistered = false
+
 export const GlobalColorSchemeStyles = () => {
 	const {
 		allColorSchemes,
@@ -153,29 +163,62 @@ export const GlobalColorSchemeStyles = () => {
 	// Adds a class to the editor body DOM to indicate that there are global styles for `color schemes`.
 	useEffect( () => {
 		if ( editorEl ) {
-			if ( styles !== '' && editorEl.classList.contains( 'stk-has-color-schemes' ) === false ) {
-				editorEl.classList.add( 'stk-has-color-schemes' )
+			const addClassNames = editor => {
+				const classNamesToAdd = []
+				const classNamesToRemove = []
+				if ( styles === '' ) {
+					editor.classList.remove( 'stk--has-base-scheme', 'stk--has-background-scheme', 'stk--has-container-scheme' )
+				} else {
+					if ( ! styles.includes( ':root' ) ) {
+						classNamesToRemove.push( 'stk--has-base-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-base-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-base-scheme' )
+					}
+
+					if ( ! styles.includes( '.stk-block-background' ) ) {
+						classNamesToRemove.push( 'stk--has-background-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-background-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-background-scheme' )
+					}
+
+					if ( ! styles.includes( '.stk-container:where(:not(.stk--no-background))' ) ) {
+						classNamesToRemove.push( 'stk--has-container-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-container-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-container-scheme' )
+					}
+
+					editor.classList.add( ...classNamesToAdd )
+					editor.classList.remove( ...classNamesToRemove )
+				}
+			}
+
+			if ( ! filterRegistered ) {
 				addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-					classnames.push( 'stk-has-color-schemes' )
+				// Access current values via closure or alternative state management
+					const editor = editorEl
+					const hasBase = editor.classList.contains( 'stk--has-base-scheme' )
+					const hasBackground = editor.classList.contains( 'stk--has-background-scheme' )
+					const hasContainer = editor.classList.contains( 'stk--has-container-scheme' )
+
+					if ( hasBase && ! classnames.includes( 'stk--has-base-scheme' ) ) {
+						classnames.push( 'stk--has-base-scheme' )
+					}
+					if ( hasBackground && ! classnames.includes( 'stk--has-background-scheme' ) ) {
+						classnames.push( 'stk--has-background-scheme' )
+					}
+					if ( hasContainer && ! classnames.includes( 'stk--has-container-scheme' ) ) {
+						classnames.push( 'stk--has-container-scheme' )
+					}
 					return classnames
 				} )
+				filterRegistered = true
 			}
-			if ( styles === '' ) {
-				editorEl.classList.remove( 'stk-has-color-schemes' )
-			}
 
-			// At first load of the editor, the `stk-has-color-schemes` is removed, so we have to re-add it.
+			addClassNames( editorEl )
+
+			// At first load of the editor, the color scheme classnames removed, so we have to re-add it.
 			const mo = onClassChange( editorEl, () => {
-				if ( styles !== '' && editorEl?.classList.contains( 'stk-has-color-schemes' ) === false ) {
-					editorEl?.classList.add( 'stk-has-color-schemes' )
-					addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-						classnames.push( 'stk-has-color-schemes' )
-						return classnames
-					} )
-				}
-				if ( styles === '' ) {
-					editorEl?.classList.remove( 'stk-has-color-schemes' )
-				}
+				addClassNames( editorEl )
 			} )
 
 			return () => mo.disconnect()
diff --git a/src/plugins/global-settings/color-schemes/index.php b/src/plugins/global-settings/color-schemes/index.php
@@ -262,7 +262,9 @@ public function add_global_color_schemes_styles( $current_css ) {
 			// If there is cached CSS, use it
 			if ( $cached_color_scheme_css ) {
 				// Add a body class if there are any global color schemes styles.
-				add_filter( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
+				add_filter( 'body_class', function( $classes ) use ( $cached_color_scheme_css ) {
+					return $this->add_body_class_color_schemes( $classes, $cached_color_scheme_css );
+				} );
 				$current_css .= $cached_color_scheme_css;
 				return apply_filters( 'stackable_frontend_css' , $current_css );
 			}
@@ -339,8 +341,15 @@ public function add_global_color_schemes_styles( $current_css ) {
 			}
 
 			// 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
-			if ( isset( $this->color_schemes[ $container_default ] ) && $this::is_scheme_empty( $this->color_schemes[ $container_default ] ) ) {
-				$styles = $this->getDefaultContainerColors( $styles, $default_color_schemes[ 2 ] );
+			$add_default_container_colors = isset( $this->color_schemes[ $container_default ] ) && $this::is_scheme_empty( $this->color_schemes[ $container_default ] ) && (
+				// Add default container scheme if background scheme has value
+				( isset( $this->color_schemes[ $background_default ] ) && ! $this::is_scheme_empty( $this->color_schemes[ $background_default ] ) ) ||
+				// Add default container scheme if there are color schemes other than the default scheme and background scheme
+				count( $this->color_schemes ) > 2
+			);
+
+			if ( $add_default_container_colors ) {
+				$styles = $this->get_default_container_colors( $styles, $default_color_schemes[ 2 ] );
 			}
 
 			$color_scheme_css = '';
@@ -364,7 +373,9 @@ public function add_global_color_schemes_styles( $current_css ) {
 
 			// Add a body class if there are any global color schemes styles.
 			if ( $color_scheme_css !== '' ) {
-				add_filter( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
+				add_filter( 'body_class', function( $classes ) use ( $color_scheme_css ) {
+					return $this->add_body_class_color_schemes( $classes, $color_scheme_css );
+				}  );
 			}
 
 			// Add the generated CSS to the database
@@ -374,8 +385,20 @@ public function add_global_color_schemes_styles( $current_css ) {
 			return apply_filters( 'stackable_frontend_css' , $current_css );
 		}
 
-		public function add_body_class_color_schemes( $classes ) {
-			$classes[] = 'stk-has-color-schemes';
+		public function add_body_class_color_schemes( $classes, $color_scheme_css ) {
+			if ( $color_scheme_css ) {
+				if ( strpos( $color_scheme_css, ':root' ) !== false ) {
+					$classes[] = 'stk--has-base-scheme';
+				}
+
+				if ( strpos( $color_scheme_css, '.stk-block-background' ) !== false ) {
+					$classes[] = 'stk--has-background-scheme';
+				}
+
+				if ( strpos( $color_scheme_css, '.stk-container:where(:not(.stk--no-background))' ) !== false ) {
+					$classes[] = 'stk--has-container-scheme';
+				}
+			}
 			return $classes;
 		}
 
@@ -492,7 +515,7 @@ public function is_gradient( $scheme, $property, $state ) {
 		}
 
 		// These colors are used when there are color schemes but the default container scheme is empty
-		public function getDefaultContainerColors( $styles, $scheme ) {
+		public function get_default_container_colors( $styles, $scheme ) {
 			$selectors = $scheme[ 'selectors' ];
 
 			$default_styles = array();
@@ -514,8 +537,8 @@ public function getDefaultContainerColors( $styles, $scheme ) {
 
 			$default_styles = apply_filters( 'stackable.global-settings.global-color-schemes.default-container-scheme', $default_styles );
 
-			foreach ( $default_styles as $styles ) {
-				$styles[] = $default_styles;
+			foreach ( $default_styles as $default_style ) {
+				$styles[] = $default_style;
 			}
 
 
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
@@ -313,7 +313,7 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 }
 
 // These are the global styles for color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	:where(.stk-block) > :is(p, div) {
 		color: var(--stk-text-color);
 	}
@@ -384,22 +384,6 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 		}
 	}
 
-	.stk-container:not(.stk--no-background) {
-		background-image: cssvar(container-background-color);
-		&:hover {
-			background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
-			background-image: var(--stk-container-background-color-hover, cssvar(container-background-color));
-		}
-	}
-
-	.stk-block-background {
-		background-image: cssvar(block-background-color);
-		&:hover {
-			background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
-			background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
-		}
-	}
-
 	.stk--inner-svg {
 		border-color: var(--stk-default-icon-color, var(--stk-accent-color, cssvar(icon-color)));
 		svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon) {
@@ -436,8 +420,26 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 	}
 }
 
+:where(.stk--has-container-scheme) .stk-container:not(.stk--no-background),
+.stk-container:not(.stk--no-background):where([class*="stk--container-scheme"]) {
+	background-image: var(--stk-container-background-color, none);
+	&:hover {
+		background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
+		background-image: var(--stk-container-background-color-hover, var(--stk-container-background-color, none));
+	}
+}
+
+:where(.stk--has-background-scheme) .stk-block-background,
+.stk-block-background:where([class*="stk--background-scheme"]) {
+	background-image: var(--stk-block-background-color, none);
+	&:hover {
+		background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
+		background-image: var(--stk-block-background-color-hover, var(--stk-block-background-color, none));
+	}
+}
+
 // These are the global styles applied when theme block styles are inherited and when there are color schemes.
-:where(.stk-has-block-style-inheritance.stk-has-color-schemes) {
+:where(.stk-has-block-style-inheritance):where(#{$stk-has-color-schemes-selector}) {
 	.stk-block:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
 		&:not(.is-style-link) .stk-button {
 			color: var(--stk-button-text-color-hover, cssvar(button-text-color));
diff --git a/src/styles/cssvars.scss b/src/styles/cssvars.scss
diff --git a/src/styles/editor-block-design-system.scss b/src/styles/editor-block-design-system.scss

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`// These are styles added from the global color schemes.`
`11`		`-:where(.stk-has-color-schemes) {`
	`11`	`+:where(#{$stk-has-color-schemes-selector}) {`
`12`	`12`	`.stk-block.stk-block-divider {`
`13`	`13`	`hr.stk-block-divider__hr,`
`14`	`14`	`.stk-block-divider__dot {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@import "common";`
	`2`	`+`
`1`	`3`	`// Important, we can't use flex since it causes issues with columns.`
`2`	`4`	`.stk-block-icon-list {`
`3`	`5`	`.stk-block-icon-list--grid:is(ul, ol) {`
`@@ -92,7 +94,7 @@`
`92`	`94`	`}`
`93`	`95`	`}`
`94`	`96`
`95`		`-:where(.stk-has-color-schemes) {`
	`97`	`+:where(#{$stk-has-color-schemes-selector}) {`
`96`	`98`	`.stk-block-icon-list {`
`97`	`99`	`--stk-icon-list-marker-color: var(--stk-accent-color);`
`98`	`100`	`:where(.stk-block-icon-list-item) {`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ div.stk-block-number-box__text {`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`// These are styles added from the global color schemes.`
`24`		`-:where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {`
	`24`	`+:where(#{$stk-has-color-schemes-selector}) .stk-block-number-box.stk--has-shape {`
`25`	`25`	`.stk-block-number-box__container,`
`26`	`26`	`div.stk-block-number-box__text {`
`27`	`27`	`color: var(--stk-button-text-color, #fff);`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@import "common";`
	`2`	`+`
`1`	`3`	`.stk-block-price {`
`2`	`4`	`line-height: 1;`
`3`	`5`	`.stk-block-text {`
`@@ -12,6 +14,6 @@`
`12`	`14`	`line-height: 0.7;`
`13`	`15`	`}`
`14`	`16`
`15`		`-:where(.stk-has-color-schemes .stk-block-price) .stk-block-text {`
	`17`	`+:where(#{$stk-has-color-schemes-selector}) :where(.stk-block-price) .stk-block-text {`
`16`	`18`	`color: var(--stk-text-color);`
`17`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`// These are styles added from the global color schemes.`
`50`		`-:where(.stk-has-color-schemes) {`
	`50`	`+:where(#{$stk-has-color-schemes-selector}) {`
`51`	`51`	`.stk-block-progress-bar {`
`52`	`52`	`--progress-color-1: var(--stk-accent-color);`
`53`	`53`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`// These are styles added from the global color schemes.`
`58`		`-:where(.stk-has-color-schemes) {`
	`58`	`+:where(#{$stk-has-color-schemes-selector}) {`
`59`	`59`	`.stk-block-progress-circle {`
`60`	`60`	`--progress-color-1: var(--stk-accent-color);`
`61`	`61`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`// These are styles added from the global color schemes.`
`24`		`-:where(.stk-has-color-schemes) {`
	`24`	`+:where(#{$stk-has-color-schemes-selector}) {`
`25`	`25`	`.stk-block-timeline {`
`26`	`26`	`--line-accent-bg-color: var(--stk-accent-color, #000);`
`27`	`27`	`}`