fix hover state styles

Author: kaeizen

src/components/block-css/block-style-generator-class.js

@@ -213,6 +213,7 @@ export class BlockStyleGenerator {
 						instanceId: args.instanceId,
 						attributes,
 						editorMode: true,
+						generateForAllBlockStates: args.generateForAllBlockStates,
 					} )
 					if ( css ) {
 						generatedCss.push( css )
@@ -237,6 +238,7 @@ export class BlockStyleGenerator {
 				instanceId: args.instanceId,
 				attributes,
 				editorMode: true,
+				generateForAllBlockStates: args.generateForAllBlockStates,
 			} )
 
 			if ( css ) {

src/components/block-css/index.js

@@ -83,6 +83,8 @@ const BlockCss = props => {
 		clientId = '', // The block's clientId, only used if rendering for the editor.
 		instanceId = '', // Used by the Query Loop block, this is the instance of the template being displayed.
 		blockState = 'normal', // The block's hover state to render the styles for.
+
+		generateForAllBlockStates = false, // If true, it will generate styles for all block states
 	} = props
 
 	// const editorMode = ! compileCssTo
@@ -301,15 +303,20 @@ const BlockCss = props => {
 
 	// TODO: why do we have this condition for the collapsedSelector, but they just do the same prepending??
 	if ( hasCollapsed ) {
-		if ( blockState === 'collapsed' ) {
+		if ( generateForAllBlockStates ) {
+			collapsedSelector = prependClass( selector, '%h :where(.stk-block-accordion.stk--is-open) .%s' )
+		} else if ( blockState === 'collapsed' ) {
 			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' )
 		} else {
 			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' )
 		}
 	}
 
+	// Use %h as a placeholder to indicate that a hover state class should be prepended to the selector.
 	if ( hasParentHover ) {
-		if ( blockState === 'parent-hover' ) {
+		if ( generateForAllBlockStates ) {
+			parentHoverSelector = [ prependClass( selector, '%h.%s.stk--is-hovered' ), prependClass( selector, ':where(.stk-hover-parent:hover, .stk-hover-parent.stk--is-hovered) .%s' ) ]
+		} else if ( blockState === 'parent-hover' ) {
 			parentHoverSelector = prependClass( selector, '.%s.stk--is-hovered' )
 		} else {
 			parentHoverSelector = prependClass( selector, ':where(.stk-hover-parent:hover, .stk-hover-parent.stk--is-hovered) .%s' )
@@ -322,18 +329,24 @@ const BlockCss = props => {
 	// using the selector `[data-block="clientId"]`, for these scenarios the
 	// method will not work. Instead we just append `:hover` to the block
 	// selector directly.
+	// Use %h as a placeholder to indicate that a hover state class should be prepended to the selector.
 	if ( hasHover ) {
 		const selectorHasDataBlock = ( hoverSelector || selector ).includes( '[data-block=' ) && ( hoverSelector || selector ).endsWith( ']' )
 		if ( selectorHasDataBlock ) {
 		// If there is a [data-block] append the :hover or .stk-is-hovered directly to it.
-			if ( blockState === 'hover' ) {
+			if ( generateForAllBlockStates ) {
+				hoverSelector = [ appendClass( selector, '%h.stk--is-hovered' ), hoverSelector || appendClass( selector, ':hover' ) ]
+			} else if ( blockState === 'hover' ) {
 			// In editor, always use the `selector` instead of the hoverSelector.
 				hoverSelector = appendClass( selector, '.stk--is-hovered' )
 			} else {
 				hoverSelector = hoverSelector || appendClass( selector, ':hover' )
 			}
 		} else {
 		// Prepend .%s:hover to the selector.
+			if ( generateForAllBlockStates ) {
+				hoverSelector = [ prependClass( selector, '%h.%s.stk--is-hovered' ), hoverSelector || prependClass( selector, '.%s:hover' ) ]
+			}
 			if ( blockState === 'hover' ) { // eslint-disable-line no-lonely-if
 			// In editor, always use the `selector` instead of the hoverSelector.
 				hoverSelector = prependClass( selector, '.%s.stk--is-hovered' )
@@ -353,8 +366,8 @@ const BlockCss = props => {
 		if ( typeof selector === 'string' ) {
 		// Add instance id to classes. ( e.g. `stk-abc123` -> `stk-abc123-2`, where 2 is `instanceId`. )
 			selector = selector.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` )
-			hoverSelector = hoverSelector.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` )
-			parentHoverSelector = parentHoverSelector.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` )
+			hoverSelector = typeof hoverSelector === 'string' ? hoverSelector.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` ) : hoverSelector.map( s => s.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` ) )
+			parentHoverSelector = typeof parentHoverSelector === 'string' ? parentHoverSelector.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` ) : parentHoverSelector.map( s => s.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` ) )
 			collapsedSelector = collapsedSelector.replace( /[^^?](.%s)([^-])/g, `$1-${ instanceId }$2` )
 		}
 	}
@@ -372,16 +385,20 @@ const BlockCss = props => {
 	if ( Array.isArray( hoverSelector ) ) {
 		hoverSelector = hoverSelector.join( ', ' )
 	}
+	if ( Array.isArray( parentHoverSelector ) ) {
+		parentHoverSelector = parentHoverSelector.join( ', ' )
+	}
 
-	selector = prependCSSClass( selector, blockUniqueClassName, blockUniqueClassName, editorMode ? '.editor-styles-wrapper' : '' )
+	const wrapSelector = editorMode ? '.editor-styles-wrapper' : ''
+	selector = prependCSSClass( selector, blockUniqueClassName, blockUniqueClassName, wrapSelector )
 	if ( hasHover ) {
-		hoverSelector = prependCSSClass( hoverSelector, blockUniqueClassName, blockUniqueClassName, editorMode ? '.editor-styles-wrapper' : '' )
+		hoverSelector = prependCSSClass( hoverSelector, blockUniqueClassName, blockUniqueClassName, wrapSelector, generateForAllBlockStates ? '.stk-preview-state--hover' : '' )
 	}
 	if ( hasParentHover ) {
-		parentHoverSelector = prependCSSClass( parentHoverSelector, blockUniqueClassName, blockUniqueClassName, editorMode ? '.editor-styles-wrapper' : '' )
+		parentHoverSelector = prependCSSClass( parentHoverSelector, blockUniqueClassName, blockUniqueClassName, wrapSelector, generateForAllBlockStates ? '.stk-preview-state--parent-hover' : '' )
 	}
 	if ( hasCollapsed ) {
-		collapsedSelector = prependCSSClass( collapsedSelector, blockUniqueClassName, blockUniqueClassName, editorMode ? '.editor-styles-wrapper' : '' )
+		collapsedSelector = prependCSSClass( collapsedSelector, blockUniqueClassName, blockUniqueClassName, wrapSelector, generateForAllBlockStates ? '.stk-preview-state--collapsed' : '' )
 	}
 
 	let css = ''

src/components/block-css/use-block-style-generator.js

@@ -1,6 +1,6 @@
 import { useQueryLoopInstanceId } from '~stackable/util'
 import { useMemo, useRef } from '@wordpress/element'
-import { useBlockStyleContext, useRafEffect } from '~stackable/hooks'
+import { useRafEffect } from '~stackable/hooks'
 import CssSaveCompiler from './css-save-compiler'
 
 export const useBlockCssGenerator = props => {
@@ -25,8 +25,6 @@ export const useBlockCssGenerator = props => {
 	// Keep the generated CSS for editor and return it when only the text attribute has changed.
 	const oldCss = useRef( null )
 
-	const [ , editCssRef ] = useBlockStyleContext()
-
 	const editCss = useMemo( () => {
 		if ( oldText.current !== attributes.text ) {
 			oldText.current = attributes.text
@@ -48,7 +46,6 @@ export const useBlockCssGenerator = props => {
 			context, // This is used for dynamic content.
 		} )
 		oldCss.current = css
-		editCssRef.current = css
 		return css
 	}, [ attributes, version, blockState, clientId, attributes.uniqueId, instanceId, context ] )
 

src/hooks/use-block-style-context.js

@@ -13,7 +13,6 @@ export const useBlockStyleContext = () => {
 export const BlockStyleProvider = props => {
 	return <BlockStyleContext.Provider value={ [
 		props.blockStyles,
-		props.editCss,
 		{
 			blockState: props.blockState,
 			clientId: props.clientId,

src/util/index.js

@@ -251,10 +251,11 @@ const prependCSSClassCache = {}
  * @param {string} mainClassName The main class of the block to target.
  * @param {string} uniqueClassName The unique parent classname to wrap the selector.
  * @param {string} wrapSelector All selectors will be wrapped in this if provided.
+ * @param {string} hoverStateSelector selectors with %h in it will be wrapped in this if provided.
  *
  * @return {string} The modified CSS selector.
  */
-export const prependCSSClass = ( cssSelector, mainClassName = '', uniqueClassName = '', wrapSelector = '' ) => {
+export const prependCSSClass = ( cssSelector, mainClassName = '', uniqueClassName = '', wrapSelector = '', hoverStateSelector = '' ) => {
 	const key = `${ cssSelector }-${ mainClassName }-${ uniqueClassName }-${ wrapSelector }`
 	if ( prependCSSClassCache[ key ] ) {
 		return prependCSSClassCache[ key ]
@@ -268,6 +269,13 @@ export const prependCSSClass = ( cssSelector, mainClassName = '', uniqueClassNam
 		.split( ',' )
 		.map( s => {
 			let newSelector = ''
+			let hasHoverStateSelector = false
+
+			if ( s.includes( '%h' ) ) {
+				hasHoverStateSelector = true
+				s = s.replaceAll( '%h', '' ).trim()
+			}
+
 			if ( s.includes( '[data-block=' ) ||
 			     s === 'html' ||
 			     s === 'body'
@@ -286,6 +294,11 @@ export const prependCSSClass = ( cssSelector, mainClassName = '', uniqueClassNam
 					.replace( new RegExp( `(.${ uniqueClassName }) (.${ mainClassName }(#|:|\\[|\\.|\\s|$))`, 'g' ), '$1$2' )
 					.replace( /\s:(?!(is|where))/, ':' ) // If the selector given is just a pseudo selector ':before', it will produce ' :before', remove the extra space.
 			}
+
+			if ( hasHoverStateSelector && hoverStateSelector && wrapSelector ) {
+				return `${ hoverStateSelector }${ wrapSelector } ${ newSelector }`
+			}
+
 			return wrapSelector ? `${ wrapSelector } ${ newSelector }` : newSelector
 		} )
 		.join( ', ' )