I noticed something when I styled the 1st item in the element.
I have a container which contains two buttons in it. Both have the same global class. However, when I add some styling for the first button with the :first-child pseudo-class, it doesn’t show the styling in the editor. Anyway, It works well on the front end.
Can confirm it’s not working.
Seems to be related to global classes, since it’s working with block classes.
It doesn’t get added in the back-end’s styling rules.
Maybe you want to create a bug report?
Why don’t you just use the gap property on the parent container?
I think that’s the way to go, since it comes with some benefits.
One of them is the ability to stack the buttons vertically on smaller screens by only changing the flex direction.
In your current setup you would need to override the margin-right and then set a margin-bottom.
But I can see also why you would add it to a global class. It’s just a suggestion.
I’ll try to go through every item, please let me know if I’m missing anything.
:first-child styles are not applied correctly on the backend.
Correct. This is currently a limitation with how we’re rendering styles for blocks (<style> tag above the block itself, which is considered a sibling). We are looking at the different solutions available to us. I appreciate this is an issue. Rest assured it is something we’re looking to improve in the coming updates.
The editor doesn’t render the custom CSS added to the editor.
I’m going to have to ask you to detail this part a bit more as I can’t quite comprehend what you’re referring to exaclty. Is this custom CSS within a Cwicly block? Global stylesheet not rendering?
Styling hover effect doesn’t show the hover preview, having to hover over the element to see the changes.
This would apply to global classes only if I’m not mistaken, please confirm otherwise.
In any case, thanks for bringing this up as it is something that will be worked on very soon to provide a seamless experience.
Thanks for taking the time to point these issues out @jornes. We really do appreciate it. If I’ve missed anything, please let me know.
I have tested this. Now, the live preview in the editor shows only whenever I choose the :first-child, :last-child and other pseudo-classes. But, when I switch to normal mode, the pseudo-classes styling will not show in the editor(anyway, it works fine on the front end). I will make a screencast when I have time later if it’s necessary.