Ecommerce Shopify WordPress Discussion

How to use :hover in Gutenberg custom blocks?

So I have a problem with building block that has background-color attribute and the user can change it using ColorPalette component. When creating a custom block in gutenberg we need 2 functions inside of registerBlockType: save and edit. I'm using inline CSS to generate correct styles for each block. Here is my edit() function: edit: ( { attributes, setAttributes } ) => { /* some code */ const [ isHover, setIsHover ] = useState( false ); const handleMouseEnter = () => { setIsHover( true ); }; const handleMouseLeave = () => { setIsHover( false ); }; return <div { ...blockProps }> <InspectorControls key="settings" group="styles"> // controls are here </InspectorControls> <InnerBlocks /> <button style={ { backgroundColor: isHover ? attributes.btnBgColorHover : attributes.btnBgColor, color: isHover ? attributes.btnTextColorHover : attributes.btnTextColor } } onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave }> <span class="material-symbols-outlined"> expand_more </span> </button> </div> } as you can see I'm using isHover state and onMouseEnter and onMouseLeave to set the correct color selected by the user. And now I can't use it in save function because content rendered by save function does not support things like onClick, onMouseEnter, onMouseLeave etc (even if I define these inside of save, gutenberg just renders the element using content returned by save). save: ( { attributes } ) => { return <div { ...blockProps }> <InnerBlocks.Content /> <button style={ { backgroundColor: isHover ? attributes.btnBgColorHover : attributes.btnBgColor, color: isHover ? attributes.btnTextColorHover : attributes.btnTextColor } } onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave }> <span class="material-symbols-outlined"> expand_more </span> </button> </div> } How to build a block with background color on hover (or just a color on hover) so the user will be able to change it?
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.