Elements are not visible in viewport, and managing States

I’m running Elements b23 (23110) and no elements are being displayed in the viewport when added to the page (see screenshot below, also see Invisible.elements file).

Also, I’ve been reading about states in TailwindCSS and I can’t help but feel the current implementation of ‘none, static, hover’ for each property/group (effects, filters, transforms, etc) is not only limiting, but also a pain to manage. I routinely create element states based on :has(), :focus(), [visible], [open], etc. There’s no way to create these types of states within Elements without resorting to typing custom CSS in a tiny text field.

Also, why not create a ‘States’ group to components, that you can then add various states to, which contain only the properties related to said state. The current solution puts far too much on the user to remember which states have which properties set as the only way to see what properties a state has is to go through each property/group individually (very time consuming).

I think you hit the same bug as @WeaverPixel, in this thread :face_with_monocle:

I’ll paste the same reply/workaround below…

We’re aware of this bug and it’s actually something we’re working on fixing for the next beta :sweat_smile:

It’s an issue with the editor not updating (even though the objects are there). To workaround this until the next beta, simply create another page, and swap to it and then back again (you should only need to do this once).

Let me know if that fixes the issue, and stay tuned for the next beta.

1 Like