Howdy Qwen! Grid developer here – I’ll try to answer your (great!) questions in detail:
the grids have been assigned an ID with a computer generated name in a string of numbers
This allows you to drag items around on the grid independent of each other, even if they use the same classes or duplicate IDs; in order to do this we need each child of a Grid to have a unique ID. We use this unique ID to control grid-item CSS independent of the CSS that you apply with your classes.
We care about the quality of our generated code, and I personally agree that these IDs are long and arbitrary. We made a compromise here to ship Grid to our users sooner, but we have some ideas for how we can improve the exported code:
One way we may try to improve this would be to use a similar auto-naming technique we use for auto-generated class names: For example, if you’re adding a Button to a grid, it might get an ID like button-1, button-3, etc.
A second, simpler improvement: we could use a simple counter to provide more concise and human-readable names, such as item-1, item-3, item-42, etc.
What do you think about these ideas? Would this help?
is there any way to rename [grid item IDs] before exporting?
Unfortunately this isn’t feasible at the moment; we could harness existing user-supplied IDs, but since it’s possible for users to provide duplicate IDs we decided against it, as it would lead to hard-to-track bugs.
making it near impossible to easily edit the nodes in the CSS without painstaking matching the names
If you supply an ID for an element, it will use that ID and a w-node class in the CSS; this should help make it easier to find the appropriate CSS.
Thanks for your feedback; hope the explanation helps!
P.S. If you’re truly desperate to use more human-readable names, you could supply an ID manually for each grid item, then do a search-and-replace on the exported CSS to replace all #item-id.w-node-abcdef-1234 { ... } selectors with #item-id { ... }
Here’s a tool you can use to strip w-node classes from your CSS: RegExr: Learn, Build, & Test RegEx
Here’s a tool to strip w-node classes from your HTML: RegExr: Learn, Build, & Test RegEx
(
These could very well break your HTML/CSS, so use at your own risk!)
That said, I would recommend just keeping the generated names for now as you’re less likely to run into problems that way. Thanks!