fix inherited values

Author: kaeizen

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

@@ -68,7 +68,7 @@ const COLOR_SETTINGS = [ {
 	property: 'accentColor',
 	disabledTooltip: {
 		hover: sprintf( __( 'Changing the %s is not allowed for %s state.', i18n ),
-			__( 'Text Color', i18n ), __( 'hover', i18n ) ),
+			__( 'Accent Color', i18n ), __( 'hover', i18n ) ),
 	},
 }, {
 	label: __( 'Button Color', i18n ),

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

@@ -359,10 +359,10 @@ public function get_css_custom_properties( $mode = '' ) {
 			return $properties_per_state;
 		}
 
-		public function get_inherited_value( $property, $current_state, $mode ) {
+		public function get_inherited_value( $property, $current_state, $inheritParentHover = true ) {
 			$value = $property[ $current_state ] ?? false;
 
-			if ( ! $value && $current_state == 'desktopHover' && $mode === 'container' ) {
+			if ( ! $value && $current_state == 'desktopHover' && $inheritParentHover ) {
 				$value = $property[ 'desktopParentHover' ] ?? false;
 			}
 
@@ -425,9 +425,17 @@ public function generate_css_rules( $scheme, $mode = '' ) {
 						$decls[ $state ][ $css_property ] = $scheme[ $property ][ $state ];
 					}
 
-					$inherited_value = $this->get_inherited_value( $scheme[ $property ], $state, $mode );
-					if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $mode === 'container' ) {
-						$decls[ $state ][ $css_property ] = $inherited_value;
+					$inherited_value = $this->get_inherited_value( $scheme[ $property ], $state );
+					$inherited_normal_value = $this->get_inherited_value( $scheme[ $property ], $state, false );
+
+					// Inherit the normal value on hover state
+					if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_normal_value) {
+						$decls[ 'desktop' ][ $css_property ] = $inherited_normal_value;
+					}
+
+					// Inherit the parent-hover value on hover state
+					if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_value) {
+						$decls[ 'desktopParentHover' ][ $css_property ] = $inherited_value;
 					}
 
 					// If button background color is gradient, plain style buuttons should use the button outline color.

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

@@ -41,11 +41,11 @@ const camelToKebab = property => {
 	return '--stk-' + result
 }
 
-const getInheritedValue = ( property, currentState, mode ) => {
+const getInheritedValue = ( property, currentState, inheritParentHover = true ) => {
 	let value = property?.[ currentState ]
 
 	// The block should inherit the desktopParentHover value on hover state if it is a container scheme
-	if ( ! value && currentState === 'desktopHover' && mode === 'container' ) {
+	if ( ! value && currentState === 'desktopHover' && inheritParentHover ) {
 		value = property?.desktopParentHover
 	}
 
@@ -93,13 +93,20 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
 				decls[ state ].push( `${ customProperty }${ suffix }: ${ scheme[ property ]?.[ state ] };` )
 			}
 
-			const inheritedValue = getInheritedValue( scheme[ property ], state, mode )
+			const inheritedValue = getInheritedValue( scheme[ property ], state )
+			const inheritedNormalValue = getInheritedValue( scheme[ property ], state, false )
 			if ( state === 'desktopParentHover' && currentHoverState !== 'normal' && property !== 'backgroundColor' && inheritedValue ) {
 				decls.desktopHover.push( `${ customProperty }-parent-hover: ${ inheritedValue };` )
 			}
 
-			if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedValue && mode === 'container' ) {
-				decls[ state ].push( `${ customProperty }${ suffix }: ${ inheritedValue };` )
+			// Inherit the normal value on hover state
+			if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedNormalValue ) {
+				decls.desktop.push( `${ customProperty }${ suffix }: ${ inheritedNormalValue };` )
+			}
+
+			// Inherit the parent-hover value on hover state
+			if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedValue ) {
+				decls.desktopParentHover.push( `${ customProperty }${ suffix }: ${ inheritedValue };` )
 			}
 
 			if ( currentHoverState !== 'normal' ) {

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

@@ -237,17 +237,6 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 		padding: cssvar(block-background-padding-parent-hover);
 	}
 }
-// Inherit parent-hover/normal state colors when hovering over a block.
-.stk-block-background {
-	#{ '--stk-button-background-color-hover' }: var(--stk-button-background-color);
-	#{ '--stk-button-text-color-hover' }: var(--stk-button-text-color);
-	#{ '--stk-button-outline-color-hover' }: var(--stk-button-outline-color);
-}
-// :where(.stk-hover-parent:hover) .stk-block-background {
-// 	#{ '--stk-button-background-color-hover' }: var(--stk-button-background-color);
-// 	#{ '--stk-button-text-color-hover' }: var(--stk-button-text-color);
-// 	#{ '--stk-button-outline-color-hover' }: var(--stk-button-outline-color);
-// }
 
 // Images
 .stk-img-wrapper {