I need some help from a fellow developer and wondered if anyone here is familiar with developing in Gutenberg.
The issue I cannot get my head around is hover states, in particular colour..
I have tried two different methods to create a colour picker that would apply a hover colour to some text, however the output of the color Picker component is a hex code. Hover states cannot be added as inline styles so I cant use these.
I tried using Tailwinds classnames that use hex codes classes but the package manager doesn’t dynamically read the values of my variables in the classes so they aren’t compiled into the stylesheet.
The only way I can think of doing it is to have a list of colour classnames that you can choose, but this is very static and I can’t add every possible colour.
I have also tried using the block.json style attribute that outputs the default text and background picker.. But this outputs class names into the block props that don’t match the necessary classname to make hover states. They are just text-white or bg-blue etc.
Im at a loss, and I’m find developing in Gutenberg very taxing for such simple things.
[ad_2]
There are people in this subreddit that have created their own blocks.