coderabbit's qa fixes

Author: kaeizen

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

@@ -126,6 +126,8 @@ export const renderGlobalColorSchemeStyles = (
 	setStyles( css )
 }
 
+let filterRegistered = false
+
 export const GlobalColorSchemeStyles = () => {
 	const {
 		allColorSchemes,
@@ -187,21 +189,31 @@ export const GlobalColorSchemeStyles = () => {
 
 					editor.classList.add( ...classNamesToAdd )
 					editor.classList.remove( ...classNamesToRemove )
-
-					addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-					// Remove any classNamesToRemove from classnames
-						const updatedClassnames = classnames.filter( name => ! classNamesToRemove.includes( name ) )
-						// Add classNamesToAdd if not already present
-						classNamesToAdd.forEach( name => {
-							if ( ! updatedClassnames.includes( name ) ) {
-								updatedClassnames.push( name )
-							}
-						} )
-						return updatedClassnames
-					} )
 				}
 			}
 
+			if ( ! filterRegistered ) {
+				addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
+				// 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
+			}
+
 			addClassNames( editorEl )
 
 			// At first load of the editor, the color scheme classnames removed, so we have to re-add it.

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

@@ -388,7 +388,7 @@ public function add_body_class_color_schemes( $classes, $color_scheme_css ) {
 					$classes[] = 'stk--has-background-scheme';
 				}
 
-				if ( strpos( $color_scheme_css, '.stk-container:where(:not(.stk--no-background))' ) ) {
+				if ( strpos( $color_scheme_css, '.stk-container:where(:not(.stk--no-background))' ) !== false ) {
 					$classes[] = 'stk--has-container-scheme';
 				}
 			}

src/styles/block-design-system-blocks.scss

@@ -422,19 +422,19 @@ 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: cssvar(container-background-color);
+	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, 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: cssvar(block-background-color);
+	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, cssvar(block-background-color));
+		background-image: var(--stk-block-background-color-hover, var(--stk-block-background-color, none));
 	}
 }
 

src/styles/editor-block-design-system.scss

@@ -186,11 +186,11 @@
 :where(.stk--has-container-scheme) .stk--is-hovered .stk-container:not(.stk--no-background),
 .stk--is-hovered .stk-container:not(.stk--no-background):where([class*="stk--container-scheme"]) {
 	background-color: var(--stk-container-background-color-hover, cssvar(container-background-color));
-	background-image: 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-container-scheme) [data-type^="stackable/"] .stk--is-hovered.stk-block-background,
 [data-type^="stackable/"] .stk--is-hovered.stk-block-background:where([class*="stk--background-scheme"]) {
-	background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
+	background-image: var(--stk-block-background-color-hover, var(--stk-block-background-color, none));
 	background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
 }