You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
GrapesJS style manager is used in Silex v3 to style CSS classes and ID of the selected element in the editor
Here are use cases where this is not enough
In silex v3 users are designing with dynamic data, so sometimes we need to style selectors like .container img because the image is not selectable at edition time
When designing lists or cards, one need selectors and pseudo selectors: .list ul.cell::nth-child(odd) > li
Also when styling a rich text which comes from a headless CMS you need selectors like .my-text ul li
It would be nice to be able to style html tags (h2, nav...) in grapesjs
For now in silex v3 what we do is add CSS to the head editor but then these styles are not available in the style manager
Here are the ideas I could come up with in order to create a useful plugin for grapesjs
Solution 1
A UI for grapesjs css
UI to list, select, edit, add, delete css selectors present in grapesjs
code editor to edit the properties of the selected selectors
Solution 2
Just a code editor to edit all CSS
Code editor displaying the site css
Plug the code editor with grapesjs style manager so that the edited styles are also editable in the ui (if they are simple classes or ids)
Solution 3
Preview arbitrary selectors in the layers UI and add arbitrary selectors to the style manager
Add a text filed on top of the layers list
Type arbitrary css selector
Highlight the targeted elements or hide the others
[No? Or add a button "select targets"?] select elements in the list (+on stage, just use GrapesJS select with component find)
A button to "style selection" => adds the css selector to the site and select it in the style editor (firrst ask for its display name in the style manager)
Add a button to the style manager to edit the selector (in a dialog? In the layers?)
When the user renames the style from the style manager, make sure it works properly
Solution 4 is good, it lets the user select a class among parents, but while we are at it, we should also let the user select among other CSS combinators such as "next sibling", which would mean we style the element when it is the next sibling of the 2nd selector
Why?
GrapesJS style manager is used in Silex v3 to style CSS classes and ID of the selected element in the editor
Here are use cases where this is not enough
.container img
because the image is not selectable at edition time.list ul.cell::nth-child(odd) > li
.my-text ul li
Here are the ideas I could come up with in order to create a useful plugin for grapesjs
Solution 1
A UI for grapesjs css
Solution 2
Just a code editor to edit all CSS
Solution 3
Preview arbitrary selectors in the layers UI and add arbitrary selectors to the style manager
About custom UI for Selector Manager: https://grapesjs.com/docs/modules/Selectors.html#customization
Links
The text was updated successfully, but these errors were encountered: