I am using CSS Grid extensively in my project.
When I define a component and make it editable it works perfectly dropping them into different grid positions. However, when I update the component it ends up positioning them all in the same grid-area.
How do I stop the grid area from changing when I update all of the components? I’m sure it’s simple but I am definitely missing something.
I’m guessing I create classes for the editable content and specify them rather than the inner content checkbox? However, I want to edit everything but the grid-area so is there a way to exclude an attribute?
I think I need to see a little bit more of your code (HTML and CSS) to help you with both problems. Could you set up a CodePen or some other file share?
If I look at the structure of your component I might be able to suggest a way to refactor. Right now there isn’t a way to exclude an attribute from editing.
Bob
sounds like what’s happening is the update is restoring the original grid area as defined in component definition… and you want to be able to edit the grid area to be different for each instance of the component?
is that right?
in general, if you want to protect a specific html feature from being overwritten by the update, then it needs to be editable or wrapped in an editable container.
for instance if you wanted to be able to choose between different classes that would place the component in different locations on the grid, then you need to have a class name or combination of names for each location and include them all in the Editable Area: Classes dropdown so the edits you make on each instance will stick and not be overwritten.
then if you ever need to reset it back to the original definition, just delete all class names from the instance and update… the behavior should be the same as what you are getting now.
I’ve created a .md file that tries to sort all this component stuff out so i don’t get confused, and i could post it if anyone is interested… it’s still a work in progress tho.
Hi @excede,
I looked at the site files you sent - gorgeous !
It looks like you are setting all of your grid localizations using inline styles. Therefore you can just modify your components by allowing the the style attribute to be editable.
In this case, the inner content is editable and additionally, any changes in the “style” attribute will be maintained on component update. This will work for your other components as well.
If you switch to using classes, you would have to add each allowed class into the classes input.
Let me know if this works for you,
Bob
!