Skip to content

Commit 2501f7c

Browse files
kaeizenkaeizen
committed
correctly display the color for the current hover state
1 parent 5016923 commit 2501f7c

File tree

3 files changed

+35
-26
lines changed

3 files changed

+35
-26
lines changed

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
/**
88
* External dependencies
99
*/
10-
import { useDeviceType } from '~stackable/hooks'
10+
import { useDeviceType, useBlockHoverState } from '~stackable/hooks'
1111

1212
/**
1313
* WordPress dependencies
@@ -18,6 +18,7 @@ import { registerPlugin } from '@wordpress/plugins'
1818

1919
const EditorPreviewClass = () => {
2020
const deviceType = useDeviceType()
21+
const [ currentHoverState ] = useBlockHoverState( { forceUpdateHoverState: true } )
2122
const editorEl = useSelect( select => {
2223
return select( 'stackable/editor-dom' ).getEditorDom()
2324
}, [] )
@@ -33,6 +34,13 @@ const EditorPreviewClass = () => {
3334
editorEl.classList.add( `stk-preview-device-${ deviceType.toLowerCase() }` )
3435
}
3536

37+
// Add hover state class
38+
// Dev note: This allows us to easily add CSS rules for each hover state in global styles.
39+
if ( editorEl && editorEl.classList.contains( `stk-preview-state--${ currentHoverState }` ) === false ) {
40+
editorEl.classList.remove( 'stk-preview-state--normal', 'stk-preview-state--hover', 'stk-preview-state--parent-hover', 'stk-preview-state--collapsed' )
41+
editorEl.classList.add( `stk-preview-state--${ currentHoverState }` )
42+
}
43+
3644
// Add theme class
3745
if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
3846
const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
@@ -45,6 +53,10 @@ const EditorPreviewClass = () => {
4553
editorEl.classList.remove( 'stk-preview-device-desktop', 'stk-preview-device-tablet', 'stk-preview-device-mobile' )
4654
editorEl.classList.add( `stk-preview-device-${ deviceType.toLowerCase() }` )
4755
}
56+
if ( editorEl?.classList.contains( `stk-preview-state--${ currentHoverState }` ) === false ) {
57+
editorEl.classList.remove( 'stk-preview-state--normal', 'stk-preview-state--hover', 'stk-preview-state--parent-hover', 'stk-preview-state--collapsed' )
58+
editorEl.classList.add( `stk-preview-state--${ currentHoverState }` )
59+
}
4860
if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
4961
const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
5062
editorEl.classList.add( theme )
@@ -53,7 +65,7 @@ const EditorPreviewClass = () => {
5365

5466
return () => mo.disconnect()
5567
}
56-
}, [ editorEl, deviceType ] )
68+
}, [ editorEl, deviceType, currentHoverState ] )
5769

5870
return null
5971
}

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,6 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
109109
decls.desktopParentHover.push( `${ customProperty }${ suffix }: ${ inheritedValue };` )
110110
}
111111

112-
if ( currentHoverState !== 'normal' ) {
113-
const currentHover = mode === '' && currentHoverState === 'parent-hover' ? '' : `-${ currentHoverState }`
114-
decls.desktopHover.push( `${ customProperty }-current-hover: var(${ customProperty }${ currentHover });` )
115-
}
116-
117112
// If button background color is gradient, plain style buuttons should use the button outline color.
118113
if ( property === 'buttonBackgroundColor' && isGradient( scheme[ property ]?.[ state ] ) ) {
119114
decls[ state ].push( `:where(.is-style-plain){ --stk-button-plain-text-color${ suffix }: var(--stk-button-outline-color${ suffix }); }` )

‎src/styles/editor-block-design-system.scss‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@ div.stk-block > :is(h1,h2,h3,h4,h5,h6) {
1414
#{ '--stk-accent-color' }: cssvar(accent-color-parent-hover);
1515
}
1616

17-
.stk--is-hovered > .stk-hover-parent .stk-block a {
17+
.stk--is-hovered > .stk-hover-parent .stk-block a,
18+
.stk-preview-state--parent-hover .is-selected > .stk-block a {
1819
color: var(--stk-link-color-parent-hover);
1920
}
20-
.is-selected > .stk--is-hovered.stk-block a {
21-
color: var(--stk-link-color-current-hover);
21+
.stk-preview-state--hover .is-selected > .stk-block a {
22+
color: var(--stk-link-color-hover);
2223
}
2324

2425
// Block spacing when horizontally oriented.
@@ -45,7 +46,8 @@ div.stk-block > :is(h1,h2,h3,h4,h5,h6) {
4546
}
4647
}
4748

48-
.stk--is-hovered > .stk-hover-parent :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
49+
.stk--is-hovered > .stk-hover-parent :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination),
50+
.stk-preview-state--parent-hover .is-selected > :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
4951
&:not(.is-style-link, .is-style-ghost, .is-style-plain) .stk-button {
5052
background: var(--stk-button-background-color-parent-hover, cssvar(button-background-color));
5153
#{ '--stk-button-text-color' }: var(--stk-button-text-color-parent-hover, #fff);
@@ -65,28 +67,28 @@ div.stk-block > :is(h1,h2,h3,h4,h5,h6) {
6567
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-parent-hover, cssvar(button-background-color));
6668
}
6769
}
68-
.is-selected > .stk--is-hovered:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
70+
.stk-preview-state--hover .is-selected > :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
6971
&:not(.is-style-link, .is-style-ghost, .is-style-plain) .stk-button {
70-
background: var(--stk-button-background-color-current-hover, cssvar(button-background-color));
71-
#{ '--stk-button-text-color' }: var(--stk-button-text-color-current-hover, #fff);
72-
#{ '--stk-accent-color-hover' }: var(--stk-button-text-color-current-hover, #fff);
73-
#{ '--stk-accent-color' }: var(--stk-button-text-color-current-hover, #fff);
72+
background: var(--stk-button-background-color-hover, cssvar(button-background-color));
73+
#{ '--stk-button-text-color' }: var(--stk-button-text-color-hover, #fff);
74+
#{ '--stk-accent-color-hover' }: var(--stk-button-text-color-hover, #fff);
75+
#{ '--stk-accent-color' }: var(--stk-button-text-color-hover, #fff);
7476
}
7577
&.is-style-link .stk-button {
76-
#{ '--stk-accent-color-hover' }: var(--stk-link-color-current-hover);
77-
#{ '--stk-accent-color' }: var(--stk-link-color-current-hover);
78+
#{ '--stk-accent-color-hover' }: var(--stk-link-color-hover);
79+
#{ '--stk-accent-color' }: var(--stk-link-color-hover);
7880
}
7981
&.is-style-ghost .stk-button {
80-
#{ '--stk-button-outline-color' }: var(--stk-button-outline-color-current-hover, #008de4);
81-
#{ '--stk-button-text-color' }: var(--stk-button-outline-color-current-hover, #008de4);
82-
#{ '--stk-accent-color-hover' }: var(--stk-button-outline-color-current-hover, #008de4);
83-
#{ '--stk-accent-color' }: var(--stk-button-outline-color-current-hover, #008de4);
82+
#{ '--stk-button-outline-color' }: var(--stk-button-outline-color-hover, #008de4);
83+
#{ '--stk-button-text-color' }: var(--stk-button-outline-color-hover, #008de4);
84+
#{ '--stk-accent-color-hover' }: var(--stk-button-outline-color-hover, #008de4);
85+
#{ '--stk-accent-color' }: var(--stk-button-outline-color-hover, #008de4);
8486
}
8587
&.is-style-plain .stk-button {
86-
#{ '--stk-button-background-color' }: var(--stk-button-background-color-current-hover, #008de4);
87-
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
88-
#{ '--stk-accent-color-hover' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
89-
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
88+
#{ '--stk-button-background-color' }: var(--stk-button-background-color-hover, #008de4);
89+
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-hover, cssvar(button-background-color));
90+
#{ '--stk-accent-color-hover' }: var(--stk-button-plain-text-color-hover, cssvar(button-background-color));
91+
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-hover, cssvar(button-background-color));
9092
}
9193
}
9294

0 commit comments

Comments
 (0)