Skip to content

Commit b059e99

Browse files
kaeizenkaeizen
committed
hover states
1 parent 5ec5a99 commit b059e99

File tree

8 files changed

+323
-134
lines changed

8 files changed

+323
-134
lines changed

‎src/block-components/helpers/borders/edit.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n'
1717
import { useAttributeEditHandlers } from '~stackable/hooks'
1818
import { applyFilters } from '@wordpress/hooks'
1919

20-
const BORDER_CONTROLS = [
20+
export const BORDER_CONTROLS = [
2121
{
2222
value: '',
2323
title: __( 'None', i18n ),

‎src/components/base-control2/hover-state-toggle.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const _ALL_HOVER = [ 'normal', 'hover', 'parent-hover', 'collapsed' ]
5151
const ALL_HOVER_ATTRIBUTE_SUFFIX = ALL_HOVER.map( s => upperFirst( camelCase( s ) ) )
5252

5353
const HoverStateToggle = props => {
54-
const [ currentHoverState, _blockHoverClass, hasParentHoverState, hasCollapsedState, isCollapsedBlock ] = useBlockHoverState( props.globalControl )
54+
const [ currentHoverState, _blockHoverClass, hasParentHoverState, hasCollapsedState, isCollapsedBlock ] = useBlockHoverState( { globalControl: props.globalControl } )
5555
const deviceType = useDeviceType()
5656

5757
// These are all of the attributes for all states.

‎src/hooks/use-block-hover-state.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ register( createReduxStore( 'stackable/hover-state', {
113113
selectors: STORE_SELECTORS,
114114
} ) )
115115

116-
export const useBlockHoverState = ( globalControl = false ) => {
116+
export const useBlockHoverState = ( { globalControl = false } = {} ) => {
117117
const { clientId } = useBlockEditContext()
118118
const clientIds = useSelect( select => select( 'core/block-editor' ).getMultiSelectedBlockClientIds() )
119119

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

Lines changed: 71 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,101 +3,139 @@
33
*/
44
import { useSelect } from '@wordpress/data'
55
import { useEffect, useState } from '@wordpress/element'
6+
import { useBlockEditContext } from '@wordpress/block-editor'
67

78
/**
89
* External dependencies
910
*/
1011
import { compact } from 'lodash'
12+
import { useBlockHoverState } from '~stackable/hooks'
1113
/*
1214
:root { --stk-container-border-radius: 10px 10px 10px 10px; :where(.stk--is-hovered, .stk-block:hover) {--stk-container-border-radius: 50px 50px 50px 50px;}}
1315
*/
14-
const renderGlobalStyles = ( blockLayouts, setStyles, breakDesktop = 1024, breakTablet = 768 ) => {
16+
17+
const transformToNested = ( _blockLayouts ) => {
18+
const devices = [ "desktop", "tablet", "mobile" ]
19+
20+
const blockLayouts = {}
21+
22+
for ( const property in _blockLayouts ) {
23+
blockLayouts[ property ] = {}
24+
25+
devices.forEach( device => {
26+
blockLayouts[ property ][ device ] = {}
27+
28+
if ( typeof blockLayouts[ property ][ `${ device }` ] !== undefined ) {
29+
blockLayouts[ property ][ device ][ 'normal' ] = blockLayouts[ property ][ `${ device }` ]
30+
}
31+
32+
if ( typeof blockLayouts[ property ][ `${ device }Hover` ] !== undefined ) {
33+
blockLayouts[ property ][ device ][ 'hover' ] = blockLayouts[ property ][ `${ device }Hover` ]
34+
}
35+
36+
if ( typeof blockLayouts[ property ][ `${ device }ParentHover` ] !== undefined ) {
37+
blockLayouts[ property ][ device ][ 'parent-hover' ] = blockLayouts[ property ][ `${ device }ParentHover` ]
38+
}
39+
} )
40+
}
41+
42+
return blockLayouts
43+
}
44+
45+
const renderGlobalStyles = ( blockLayouts, setStyles, currentHoverState, blockUniqueId, parentHoverBlock, breakDesktop = 1024, breakTablet = 768 ) => {
1546
if ( Object.keys( blockLayouts ).length === 0 ) {
1647
setStyles( '' )
1748
return
1849
}
1950
let css = ''
2051

21-
const desktopCss = []
22-
const tabletCss = []
23-
const mobileCss = []
52+
const deviceCss = {
53+
'desktop': [],
54+
'tablet': [],
55+
'mobile': []
56+
}
2457

2558
const getUnit = ( property, state ) => {
2659
return blockLayouts[ property ][ `${ state }Unit` ] ?? 'px'
2760
}
2861

29-
const getValue = ( _property, state, value, unit ) => {
62+
const getValue = ( _property, device, state, value, unit ) => {
3063
let property = _property
3164

32-
if ( state.indexOf( 'ParentHover' ) !== -1 ) {
33-
property += '-parent-hover'
34-
} else if ( state.indexOf( 'Hover' ) !== -1 ) {
65+
if ( state === 'parent-hover' && currentHoverState === 'parent-hover' && blockUniqueId && parentHoverBlock ) {
3566
property += '-hover'
67+
} else if ( state !== 'normal' ) {
68+
property += `-${ state }`
3669
}
3770

38-
if ( property.indexOf( 'shadow' ) !== -1 ) {
39-
return `${ property }: ${ value };`
71+
let style = ''
72+
if ( property.includes( 'shadow' ) ) {
73+
style = `${ property }: ${ value };`
74+
} else if ( typeof value === 'object' ) {
75+
style = `${ property }: ${ value.top }${ unit } ${ value.right }${ unit } ${ value.left }${ unit } ${ value.bottom }${ unit };`
76+
} else {
77+
style = `${ property }: ${ value }${ unit };`
4078
}
4179

42-
if ( typeof value === 'object' ) {
43-
return `${ property }: ${ value.top }${ unit } ${ value.right }${ unit } ${ value.left }${ unit } ${ value.bottom }${ unit };`
80+
if ( currentHoverState === 'parent-hover' && state === 'parent-hover' && blockUniqueId && parentHoverBlock ) {
81+
style = `.stk--is-hovered.stk-${ blockUniqueId }{ ${ style } }`
4482
}
4583

46-
return `${ property }: ${ value }${ unit };`
84+
return style
4785
}
4886

4987
Object.keys( blockLayouts ).forEach( property => {
5088
const values = Object.keys( blockLayouts[ property ] )
5189
.filter( key => key.indexOf( 'Unit' ) === -1 )
52-
.reduce( ( obj, key ) => {
90+
.reduce( ( _blockLayouts, key ) => {
5391
return {
54-
...obj,
92+
..._blockLayouts,
5593
[ key ]: blockLayouts[ property ][ key ],
5694
}
5795
}, {} )
5896

5997
Object.entries( values ).forEach( ( [ state, value ] ) => {
6098
const unit = getUnit( property, state )
6199

62-
if ( state.indexOf( 'desktop' ) !== -1 ) {
63-
desktopCss.push( getValue( property, state, value, unit ) )
64-
}
65-
66-
if ( state.indexOf( 'tablet' ) !== -1 ) {
67-
tabletCss.push( getValue( property, state, value, unit ) )
68-
}
100+
const device = state.includes( 'desktop' ) ? 'desktop' : ( state.includes( 'tablet' ) ? 'tablet' : 'mobile' )
101+
const hoverState = state.includes( 'ParentHover' ) ? 'parent-hover' : ( state.includes( 'Hover' ) ? 'hover' : 'normal' )
69102

70-
if ( state.indexOf( 'mobile' ) !== -1 ) {
71-
mobileCss.push( getValue( property, state, value, unit ) )
72-
}
103+
deviceCss[ device ].push( getValue( property, device, hoverState, value, unit ) )
73104
} )
74105
} )
75106

76-
css += `:root { ${ compact( desktopCss ).join( '' ) }}`
107+
if ( deviceCss.desktop.length > 0 ) {
108+
css += `:root { ${ compact( deviceCss.desktop ).join( '' ) }}`
109+
}
77110

78-
if ( tabletCss.length > 0 ) {
79-
css += `@media screen and (max-width: ${ breakDesktop - 1 }px){ :root { ${ compact( tabletCss ).join( '' ) }} }`
111+
if ( deviceCss.tablet.length > 0 ) {
112+
css += `@media screen and (max-width: ${ breakDesktop - 1 }px){ :root { ${ compact( deviceCss.tablet ).join( '' ) }} }`
80113
}
81114

82-
if ( mobileCss.length > 0 ) {
83-
css += `@media screen and (max-width: ${ breakTablet - 1 }px){:root { ${ compact( mobileCss ).join( '' ) }}}`
115+
if ( deviceCss.mobile.length > 0 ) {
116+
css += `@media screen and (max-width: ${ breakTablet - 1 }px){:root { ${ compact( deviceCss.mobile ).join( '' ) }}}`
84117
}
85118

86119
setStyles( css )
87120
}
88121

89122
export const GlobalBlockLayoutStyles = () => {
90-
const { blockLayouts } = useSelect( select => ( {
123+
const { blockLayouts, selectedBlockUniqueId, SelectedParentHoverBlock,SelectedParentHoverBlockChildren, SelectedHoverChildren } = useSelect( select => ( {
91124
blockLayouts: select( 'stackable/global-block-layouts' ).getBlockLayouts() || [],
125+
selectedBlockUniqueId: select( 'core/block-editor' ).getSelectedBlock()?.attributes?.uniqueId,
126+
SelectedParentHoverBlock: select( 'stackable/hover-state').getSelectedParentHoverBlock(),
127+
SelectedParentHoverBlockChildren: select( 'stackable/hover-state').getSelectedParentHoverBlockChildren(),
128+
SelectedHoverChildren: select( 'stackable/hover-state').getSelectedHoverChildren()
92129
} ), [] )
93130

131+
const [ currentHoverState ] = useBlockHoverState( { globalControl: true } )
94132
const [ styles, setStyles ] = useState( '' )
95133

96134
useEffect( () => {
97135
if ( blockLayouts && typeof blockLayouts === 'object' ) {
98-
renderGlobalStyles( blockLayouts, setStyles )
136+
renderGlobalStyles( blockLayouts, setStyles, currentHoverState, selectedBlockUniqueId, SelectedParentHoverBlock )
99137
}
100-
}, [ JSON.stringify( blockLayouts ) ] )
138+
}, [ JSON.stringify( blockLayouts ), currentHoverState, SelectedParentHoverBlock ] )
101139

102140
return styles
103141
}

0 commit comments

Comments
 (0)