hover state

Author: kaeizen

src/plugins/global-settings/block-layouts/editor-loader.js

@@ -19,46 +19,64 @@ const renderGlobalStyles = ( blockLayouts, setStyles, breakDesktop = 1024, break
 	let css = ''
 
 	const desktopCss = []
-	const tabletMobileCss = []
 	const tabletCss = []
 	const mobileCss = []
 
-	const getDeclaration = ( property, value ) => {
-		if ( typeof value === 'object' ) {
-			return `${ property }: ${ value.top }px ${ value.right }px ${ value.left }px ${ value.bottom }px;`
-		}
-
-		return `${ property }: ${ value };`
+	const getUnit = ( property, state ) => {
+		return blockLayouts[ property ][ `${ state }Unit` ] ?? 'px'
 	}
 
-	Object.keys( blockLayouts ).forEach( property => {
-		const desktop = blockLayouts[ property ].desktop
-		const tablet = blockLayouts[ property ].tablet
-		const mobile = blockLayouts[ property ].mobile
+	const getValue = ( _property, state, value, unit ) => {
+		let property = _property
 
-		if ( desktop ) {
-			desktopCss.push( getDeclaration( property, desktop ) )
+		if ( state.indexOf( 'ParentHover' ) !== -1 ) {
+			property += '-parent-hover'
+		} else if ( state.indexOf( 'Hover' ) !== -1 ) {
+			property += '-hover'
 		}
 
-		if ( tablet && mobile ) {
-			tabletCss.push( getDeclaration( property, tablet ) )
-		} else if ( tablet && ! mobile ) {
-			tabletMobileCss.push( getDeclaration( property, tablet ) )
+		if ( property.indexOf( 'shadow' ) !== -1 ) {
+			return `${ property }: ${ value };`
 		}
 
-		if ( mobile ) {
-			mobileCss.push( getDeclaration( property, mobile ) )
+		if ( typeof value === 'object' ) {
+			return `${ property }: ${ value.top }${ unit } ${ value.right }${ unit } ${ value.left }${ unit } ${ value.bottom }${ unit };`
 		}
+
+		return `${ property }: ${ value }${ unit };`
+	}
+
+	Object.keys( blockLayouts ).forEach( property => {
+		const values = Object.keys( blockLayouts[ property ] )
+			.filter( key => key.indexOf( 'Unit' ) === -1 )
+			.reduce( ( obj, key ) => {
+		  return {
+					...obj,
+					[ key ]: blockLayouts[ property ][ key ],
+		  }
+			}, {} )
+
+		Object.entries( values ).forEach( ( [ state, value ] ) => {
+			const unit = getUnit( property, state )
+
+			if ( state.indexOf( 'desktop' ) !== -1 ) {
+				desktopCss.push( getValue( property, state, value, unit ) )
+			}
+
+			if ( state.indexOf( 'tablet' ) !== -1 ) {
+				tabletCss.push( getValue( property, state, value, unit ) )
+			}
+
+			if ( state.indexOf( 'mobile' ) !== -1 ) {
+				mobileCss.push( getValue( property, state, value, unit ) )
+			}
+		} )
 	} )
 
 	css += `:root { ${ compact( desktopCss ).join( '' ) }}`
 
-	if ( tabletMobileCss.length > 0 ) {
-		css += `@media screen and (max-width: ${ breakDesktop - 1 }px){ :root { ${ compact( tabletMobileCss ).join( '' ) }} }`
-	}
-
 	if ( tabletCss.length > 0 ) {
-		css += `@media screen and (min-width: ${ breakTablet }px) and (max-width: ${ breakDesktop - 1 }px){:root { ${ compact( tabletCss ).join( '' ) }}}`
+		css += `@media screen and (max-width: ${ breakDesktop - 1 }px){ :root { ${ compact( tabletCss ).join( '' ) }} }`
 	}
 
 	if ( mobileCss.length > 0 ) {

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

@@ -75,7 +75,19 @@
 // Containers
 .stk-container:not(.stk--no-padding) {
 	padding: cssvar(container-padding);
+
+	&:hover {
+		padding: cssvar(container-padding-hover);
+	}
+}
+.stk--is-hovered .stk-container:not(.stk--no-padding) {
+	padding: cssvar(container-padding-hover);
+}
+
+:where(.stk-hover-parent:hover, .stk-hover-parent.stk--is-hovered) .stk-container:not(.stk--no-padding) {
+	padding: cssvar(container-padding-parent-hover);
 }
+
 .stk--container-small .stk-container:not(.stk--no-padding) {
 	#{ '--stk-container-padding' }: cssvar(container-padding-small);
 }
@@ -87,6 +99,15 @@
 }
 .stk-container-padding {
 	padding: cssvar(container-padding);
+	&:hover {
+		padding: cssvar(container-padding-hover);
+	}
+}
+.stk--is-hovered .stk-container-padding {
+	padding: cssvar(container-padding-hover);
+}
+:where(.stk-hover-parent:hover, .stk-hover-parent.stk--is-hovered) .stk-container-padding {
+	padding: cssvar(container-padding-parent-hover);
 }
 
 // Columns

src/styles/block-design-system.scss

@@ -24,6 +24,10 @@ $block-design-system: (
 		desktop: 32px 32px,
 		mobile: 24px 24px,
 	),
+
+	container-padding-hover: cssvar(container-padding),
+	container-padding-parent-hover: cssvar(container-padding),
+
 	container-padding-large: (
 		desktop: 64px 80px,
 		mobile: 32px 24px,