apply parent-hover styles on frontend, add theme compatibility

Author: kaeizen

src/plugins/editor-device-preview-class/index.js

@@ -24,16 +24,31 @@ const EditorPreviewClass = () => {
 
 	// Update the editor class when the preview size changes.
 	useEffect( () => {
-		if ( editorEl && editorEl.classList.contains( `stk-preview-device-${ deviceType.toLowerCase() }` ) === false ) {
-			editorEl.classList.remove( 'stk-preview-device-desktop', 'stk-preview-device-tablet', 'stk-preview-device-mobile' )
-			editorEl.classList.add( `stk-preview-device-${ deviceType.toLowerCase() }` )
+		const themeRegex = /stk--is-\w+-theme/gm
 
-			// At first load of the editor, the `stk-preview-device-*` is removed, so we have to re-add it.
+		if ( editorEl ) {
+			// Add device class
+			if ( editorEl && editorEl.classList.contains( `stk-preview-device-${ deviceType.toLowerCase() }` ) === false ) {
+				editorEl.classList.remove( 'stk-preview-device-desktop', 'stk-preview-device-tablet', 'stk-preview-device-mobile' )
+				editorEl.classList.add( `stk-preview-device-${ deviceType.toLowerCase() }` )
+			}
+
+			// Add theme class
+			if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
+				const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
+				editorEl.classList.add( theme )
+			}
+
+			// At first load of the editor, the `stk-preview-device-*` and `stk--is-*-theme` are removed, so we have to re-add it.
 			const mo = onClassChange( editorEl, () => {
 				if ( editorEl?.classList.contains( `stk-preview-device-${ deviceType.toLowerCase() }` ) === false ) {
 					editorEl.classList.remove( 'stk-preview-device-desktop', 'stk-preview-device-tablet', 'stk-preview-device-mobile' )
 					editorEl.classList.add( `stk-preview-device-${ deviceType.toLowerCase() }` )
 				}
+				if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
+					const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
+					editorEl.classList.add( theme )
+				}
 			} )
 
 			return () => mo.disconnect()

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-// import { hoverState } from '../utils'
+import { convertToObj, getCSS } from './utils'
 
 /**
  * WordPress dependencies
@@ -13,100 +13,6 @@ import { useEffect, useState } from '@wordpress/element'
  */
 import { useBlockColorSchemes, useBlockHoverState } from '~stackable/hooks'
 
-const convertToObj = colorSchemes => {
-	const obj = {}
-
-	colorSchemes.forEach( scheme => {
-		obj[ scheme.key ] = scheme.colorScheme
-	} )
-
-	return obj
-}
-
-const camelToKebab = property => {
-	const result = property.replace( /([a-z0-9])([A-Z])/g, '$1-$2' )
-
-	// Convert the result to lowercase and return with '--stk-' prefix
-	return '--stk-' + result.toLowerCase()
-}
-
-const getInheritedValue = ( property, currentState ) => {
-	let value = property?.[ currentState ]
-
-	if ( ! value && currentState === 'desktopHover' ) {
-		value = property?.desktopParentHover
-	}
-
-	if ( ! value && currentState !== 'desktop' ) {
-		value = property?.desktop
-	}
-
-	return value
-}
-
-const isGradient = value => value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
-
-const getCSS = ( scheme, mode = '' ) => {
-	const states = [ 'desktop', 'desktopHover', 'desktopParentHover' ]
-	const properties = [
-		'backgroundColor',
-		'headingColor',
-		'textColor',
-		'linkColor',
-		'accentColor',
-		'buttonBackgroundColor',
-		'buttonTextColor',
-		'buttonOutlineColor',
-	]
-
-	const decls = {
-		desktop: [],
-		desktopHover: [],
-		desktopParentHover: [],
-	}
-
-	states.forEach( state => {
-		const suffix = state === 'desktopHover' ? '-hover' : ''
-		properties.forEach( property => {
-			const varname = mode === 'background' ? 'block' : 'container'
-			const customProperty = property === 'backgroundColor'
-				? `--stk-${ varname }-background-color` : camelToKebab( property )
-			if ( property === 'backgroundColor' && ! mode ) {
-				return
-			}
-
-			if ( scheme[ property ]?.[ state ] ) {
-				decls[ state ].push( `${ customProperty }${ suffix }: ${ scheme[ property ]?.[ state ] };` )
-				return
-			}
-
-			const inheritedValue = getInheritedValue( scheme[ property ], state )
-			if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedValue ) {
-				decls[ state ].push( `${ customProperty }${ suffix }: ${ inheritedValue };` )
-			}
-
-			if ( property === 'buttonBackgroundColor' && isGradient( scheme[ property ]?.[ state ] ) ) {
-				decls[ state ].push( `:where(.is-style-plain){ --stk-button-plain-text-color${ suffix }: var(--stk-button-outline-color${ suffix }); }` )
-			}
-		} )
-	} )
-
-	if ( isGradient( scheme.buttonBackgroundColor?.desktop ) && ! scheme.buttonBackgroundColor?.desktopHover ) {
-		decls.desktopHover.push( `:where(.is-style-plain){ --stk-button-plain-text-color-hover: var(--stk-button-outline-color-hover); }` )
-	}
-
-	if ( isGradient( scheme.buttonBackgroundColor?.desktopParentHover ) && ! scheme.buttonBackgroundColor?.desktopHover ) {
-		decls.desktopParentHover.push( `:where(.is-style-plain){ --stk-button-plain-text-color-hover: var(--stk-button-outline-color-hover); }` )
-	}
-
-	if ( isGradient( scheme.buttonBackgroundColor?.desktop ) &&
-		scheme.buttonBackgroundColor?.desktopParentHover && ! isGradient( scheme.buttonBackgroundColor?.desktopParentHover ) ) {
-		decls.desktopParentHover.push( `:where(.is-style-plain){ --stk-button-plain-text-color: unset;--stk-button-plain-text-color-hover:unset; }` )
-	}
-
-	return decls
-}
-
 const renderGlobalStyles = (
 	setStyles,
 	colorSchemesArray,