Pseudo classes defined in global styles are not showing

After I defined pseudo classes in Cwicly Global style settings, those pseudo classes are not showing when I want to apply them to an actual block element.

Explanation video:

Enviroment info:

  • WordPress version: 6.0
  • Gutenberg Plugin version: -
  • Cwicly Plugin version:
  • Cwicly Theme version: 1.0.3

Reference (8th reply):

Thanks @Marius

Well I guess we’ll have to stick with Custom CSS for now.

Could you tell me what problems you are facing?
Everything should be fine by now and from my perspective it’s working as intended.

I explained it in video above @Marius

Here it is :slight_smile: AwesomeScreenshot-5/25/2022,11:19:46PM

You are able to create global pseudo classes inside the global styles panel.

How do global pseudo classes work?
For example you can switch to the hover state while being inside the global panel, go to the Typography panel, and set a specific rule, e.g. color: red; to the h1.
Now every h1 on your entire site would apply a red color on hover.
That is exactly the same route you want to go when creating and styling your custom ones.

On the other side you are able to use or create block based pseudo classes/elements.
You are still able to assign your global pseudo classes to a block by just typing it in.
Global pseudo classes won’t appear on the block state dropdown list, this is intentional.
You will find them in the list after typing them in, they also will remain there.

Thank you Marius for the answer. It clears up some things for me. I had no idea I can just type inside a pseudo class option field. There may be some icon in the future indicating that it is possible to enter a custom pseudo class.

The pseudo class related areas need some (UI) improvements, I do agree.
Might start a feedback topic about that, or will you? :brain:

Feel free to start it. I almost feel like I am spamming the discourse forum right now haha :joy:

Thanks for helping @Marius.

Indeed, the pseudo classes and elements selector does need clarification and improvement!

I’d like to dig this one up :slight_smile:

Do you find that working with pseudo classes has improved in Cwicly?

Hey @Louis, thanks for the follow-up.

Yes, working with pseudo classes improved a lot, really a fan of the new picker.

However, the main issue I always had with it is still there.
Before, after or any other added custom pseudo class/element do not come with a visual indicator like we have when selecting hover, active or focus.
Since I often work with the before/after pseudo element, I regularly mess up entire block design settings, assuming I am in the normal mode.

I hope this can be addressed at some point.

1 Like

Hey @Marius,

Thanks for taking the time to answer.
Very good point here, as always. Definitely something to get working properly in the next update or so.