UX question for a new plugin: advanced selectors

[lexoyo]

Hello GrapesJS Community,

As some of you may already know, I am actively working on the development of Silex, a free/libre website builder, which will soon be using GrapesJS as its underlying engine. As a part of this project, I have already released several plugins to fill in some of the features that Silex currently lacks to make it a compelling alternative to other web builders like Webflow.

I am writing today to share a new plugin idea and to seek your valuable feedback and suggestions. This plugin revolves around the concept of advanced CSS Selectors, aimed to offer users the ability to define intricate CSS selectors in order to style:

1. Tag name (DIV, HEADER...)
2. Siblings (+, ~)
3. Child of a class
4. Child of a tag name
5. Child of a hovered element (or any pseudo-selector)

This feature does not appear to be on the current roadmap for GrapesJS (please correct me if I'm wrong) and I think it could provide a useful addition to the platform. Is this a good idea to do it as a plugin? (@artf let me know if you have plans that would make it incompatible or redondant with the core?)

Here are some ideas for the ux and implémentation:

• When the focus is on the CSS class list input, a "DIV" button appears (depending on the tag name of the selected elements).
• Adding a tag name selector adds a differently colored badge.
• Selectors have a context menu allowing to add a sibling or parent (this opens a filtered list with the classes of parents/siblings + tag names of parents/siblings).
• Selecting a parent adds a differently colored section to the left of the selector badge.
• Selecting a sibling adds a differently colored section to the right of the selector.
• The parts to the left and right of the selectors also have a context menu allowing the addition of a pseudo-selector, the selection of another parent/sibling or tag name, or the removal of the parent or sibling.

My primary areas of concern are:

• Is this technically feasible within GrapesJS' framework?
• Is the user experience intuitive and comprehensive, particularly when adding pseudo-selectors to the left and right parts of the selector?

An alternative (or perhaps supplementary) approach could be to allow users to manually input a selector.

Also interesting: in webflow, you can't explicitly define selectors like "child of a class" or "sibling", you can create nested structures by adding elements within others, and the cascading nature of CSS applies. You can then style these nested elements differently based on their parent class or element.

I'd love to hear your thoughts, ideas, and any feedback you might have. If there's anyone here with a knack for creating UI mockups and would be interested in collaborating, that would be fantastic as well.

For a broader view of the development ideas for Silex, you can visit our roadmap on GitHub here.

Thank you for taking the time to read this and for any assistance you can provide!

[glaprida]

I'm very interested in this. Especially the parent:state > child selector

Like .card:hover > .img{}

This is what I've been thinking to build:
Add a new select right next to the state select, where "This" or "Self" is pre-selected, but you can choose any parent.

Styles will always apply to the selected element, so if I wanted to achieve the example above, I would have to select the .img element, and then choose the parent .card from the select element, and also the :hover state from that select element.

I think that's understandable enough for the user... But I'm a bit lost on how to do actual implementation.

Let me know what you think and maybe we con work something out together!

[lexoyo]

Also I wish I knew if @artf will add this to the official road map at one point in which case we can do it all together

[artf]

I think from the core perspective there is nothing to add (you can create rules with custom selectors already).
I think it's all about the UI/UX here which could have quite a lot of opinions, so I'd definitely place this as a plugin.

[lexoyo]

Ok so let's work on this together @glaprida :)

[glaprida]

Awesome! Reach me on discord lapridagaspar

[lexoyo]

hi @glaprida i tried but i'm not sure you got the friend request
if you feel like a chat on matter most there is silex's chat (https://short.silex.me/chat)