fix (color schemes): colors for different heading in container (#3625)

Author: kaeizen

src/compatibility/blocksy/style.scss

@@ -1,6 +1,14 @@
 // 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)));
+:where(.stk--is-blocksy-theme.stk--has-default-container-scheme) {
 	--stk-default-link-color: var(--theme-link-initial-color);
+	--stk-default-heading-color: var(--theme-heading-color, var(--theme-headings-color));
+
+	:where(.stk-block-heading) {
+		@for $i from 1 through 6 {
+			:where(h#{ $i }) {
+				--stk-heading-color: var(--theme-heading-color, var(--theme-heading-#{ $i }-color, var(--theme-headings-color)));
+			}
+		}
+	}
 }

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

@@ -187,6 +187,12 @@ export const GlobalColorSchemeStyles = () => {
 						classNamesToAdd.push( 'stk--has-container-scheme' )
 					}
 
+					if ( ! styles.includes( '--stk-default-container-background-color' ) ) {
+						classNamesToRemove.push( 'stk--has-default-container-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-container-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-default-container-scheme' )
+					}
+
 					editor.classList.add( ...classNamesToAdd )
 					editor.classList.remove( ...classNamesToRemove )
 				}
@@ -199,6 +205,7 @@ export const GlobalColorSchemeStyles = () => {
 					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' )
+					const hasDefaultContainer = editor.classList.contains( 'stk--has-default-container-scheme' )
 
 					if ( hasBase && ! classnames.includes( 'stk--has-base-scheme' ) ) {
 						classnames.push( 'stk--has-base-scheme' )
@@ -209,6 +216,9 @@ export const GlobalColorSchemeStyles = () => {
 					if ( hasContainer && ! classnames.includes( 'stk--has-container-scheme' ) ) {
 						classnames.push( 'stk--has-container-scheme' )
 					}
+					if ( hasDefaultContainer && ! classnames.includes( 'stk--has-default-container-scheme' ) ) {
+						classnames.push( 'stk--has-default-container-scheme' )
+					}
 					return classnames
 				} )
 				filterRegistered = true

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

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