Pseudo classes defined in global styles are not showing

[Dev.tomi]

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:
https://www.awesomescreenshot.com/video/9098773?key=c94f19af9188b47f8cc9ede6f2f4f7fe

Enviroment info:

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

[Marius]

@Louis

This would be because those pseudo classes have not been created for the selected block. That pseudo class will have to be created in the pseudo dropdown from the block inspector for the specified block. This is done because it allows us to not have a whole bunch of unused pseudo classes in the pseudo class list for a block in particular, and also means that we don’t have to track all pseudo classes used by every single block, which would end up being a nightmare…

But I can appreciate that it might not be clear that you’re only creating pseudo classes in the global styles panel for those global styles and not globally…

Reference (8th reply):
https://feedback.cwicly.com/boards/bugs/posts/editor-pseudo-classes-issue

[Dev.tomi]

Thanks @Marius

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

[Marius]

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

[Dev.tomi]

I explained it in video above @Marius

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

[Marius]

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.

[Dev.tomi]

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.

[Marius]

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

[Dev.tomi]

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

[Louis]

Thanks for helping @Marius.

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

[Louis]

I’d like to dig this one up

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

[Marius]

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.
Thanks.

[Louis]

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.

Thanks!