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)

[lexoyo]

@artf I'm sorry I can't find a way to replace the default selector manager with a custom one
Would you have some pointers ? Is it even a good approach ?

[artf]

Did you check already this section?

[lexoyo]

Ooooh that's what we are looking for thank you
I don't know how i missed it
Thank you @artf

[lexoyo]

One more question @artf, and hopefully not too dumb

I can't edit a custom selector, here is a reproductible demo

Reproduce:

• after loading an element is selected
• change the background color to blue (in decoration > background color)
• in the browser console, do editor.getCss()

What I get is * { box-sizing: border-box; } body {margin: 0;}.div\\.container\\ \\>\\ p{background-color:blue;}

What I would expect is * { box-sizing: border-box; } body {margin: 0;}div.container > p{background-color:blue;} (I removed a . in front of div and \\ in front of each blank space)

Here is what the demo does:

• in the config passed to init: add selectorManager: { escapeName: (name) => name } to avoid escaping the class names
• in the canvas, there is a div.container > p with some text in it
• after load i do editor.SelectorManager.add('div.container > p'), which gives me a customSelector
• then I select the div.container > p and do

      p.getSelectors().add(customSelector);
      editor.select(p)
     editor.Selectors.addSelected(customSelector)
  

Is this the intended behavior?
Thanks a lot for your help!

[artf]

Selectors are currently only of two types.
So with your example, it just creates a class selector (with escaping characters) and not the custom selector you'd expect.

The current way to work with any custom selector is to rely on CssRule (which supports custom selectors via selectorsAdd property), here is how it would work in your case:

  const CUSTOM_SELECTOR = 'div.container > p';

  const rule = editor.Css.addRules(`${CUSTOM_SELECTOR} {
   background-color: blue;
  }`)[0];

  editor.on('component:toggled', (component) => {
    const selected = editor.getSelected();
    if (selected?.getEl()?.matches(CUSTOM_SELECTOR)) {
      // Ensure the default selection is ended with a timeout
      setTimeout(() => editor.Selectors.select(rule));
    }
  });

  editor.on('load', () => {
    const wrapper = editor.getWrapper();
    const p = wrapper.find(CUSTOM_SELECTOR)[0];
    p && editor.select(p);
  });

[lexoyo]

Ok, it works, thank you @artf !!! 🙏

[lexoyo]

Hello I'm back on this project after I did a POC last time. I wish I could have some feedback before it's implemented :)

This time I am taking the W3C specs as a reference and I thought about the UX too :)

Supported

Selector Type	Example
Basic class selector	.element
Pseudo-class	.element:hover
Parent-child relationship	.parent > .child
Sibling combinator	.parent + .child
Tag-based selector	div .child
Pseudo-class with parameters	.element:nth-child(2)
Attribute selector	input[type="text"]
Pseudo-element	.element::before
Universal selector	* (only allowed alone)

Not supported

Selector Type	Example
Negation pseudo-class	.element:not(:nth-child(3n))
Complex pseudo-class	.element:has(> :nth-child(2))

UX

Here is a sketch of what i ended up with

And here are the use cases I am including in my tests:

• .child (already possible with the default Selector Manager)
• .child:pseudo (already possible with the default Selector Manager)
• .parent > .child (new, allows defining a parent-child relationship)
• .parent:pseudo > .child
• .parent:pseudo .child
• tag .child (new, allows specifying a tag instead of only classes)
• Pseudo-selectors with parameters, e.g., :nth-child(2)
• Pseudo-selectors with a selector, e.g., :not(.child)
• :is(), :where(), and :has() pseudo-classes with a list of SimpleSelectors.
  hello, here are some css i use sometimes for e.g., :
• details[open] .css-element:after
• .css-element:nth-child(n + 4)
• .css-element:has(> :nth-child(2))
• .css-element:not(:nth-child(3n))
• .css-element > :last-child
• @media (min-width: 993px)
• .css-element option
• #toggle:checked ~ .css-element

My grapesjs plugin will be made of web components

Let me know what you think or if you have questions to challenge the concepts 👍

[lexoyo]

Here is the project
https://github.com/silexlabs/grapesjs-advanced-selector

With a live demo
https://codepen.io/lexoyo/full/EaxZrmz

Here is how it looks

Let me know what you think