I realize the “Remove Classes & IDs (beta)” option in settings is tagged as Beta, so there are likely issues, but here’s one I ran into just FYI.
When I toggle that setting on and then try to work with interactions, it generates console errors as if the ID’s I’m trying to target don’t exist. I have tried clicking the little dot next to the custom ID’s to make it “green/active”, but run into the same issues.
I have sense turned that setting back off, but here are the steps to reproduce it if I remember correctly:
Toggle Remove Classes & IDs (beta) on.
Add any element to the block editor and add a custom ID.
With that element selected, open the interactions panel and set a click action for the “current” element, choose custom, and set any interaction. (I set it so when I click the current element, it toggles a class to the body element).
Try the interaction on the front end to see if it toggles the class or generates a console error.
For me, this works fine when the “Remove Classes & IDs (beta)” is turned off, but not when it’s turned on. I haven’t tested it again in a few versions, but I wanted to document it just in case. I’ll look into it more if needed. Thanks!
Unfortunately, I can’t seem to recreate this issue when Classes & IDs are removed.
Could you possibly tell me if the ID for the interaction element appears in the markup on the frontend?
I think I figured out what’s going on here. I had a section (#section-id) with a button (#button-id) inside. I set an interaction on the button (set to current) and set it to change the CSS property (background-color: black) of the section when clicked.
Originally I thought it wasn’t working because I needed to activate the section ID so the interaction would be able to find the selector in order to work. It turns out, I didn’t need to activate the section ID, but rather the button ID. When I toggle the little green dot on only the button ID, then it seems to work fine.
Not sure if this makes sense, but I think it was a case of me not understanding the steps needed rather than a bug. So it seems when you have “Remove Classes & IDs” turned on, you need to make sure to activate the ID of the element you’re adding the interaction to.
I’m not sure if it’s easy to add or not, but maybe when “Remove Classes & IDs” is turned on and you add an interaction to an element, it automatically toggles the green dot to active for that ID, and when you remove the interaction, it toggles it back off. This might add too much complexity, but either way, I know how to make it work now.
I don’t usually use things marked as “beta”, but I was testing this because I am interested in having the DOM as clean as possible. Thanks for you help as always.
Sorry for not reacting earlier!
Thanks for letting me know where things went wrong.
We are planning a complete rework of interactions to make them easier to work with.
Toggling the ID on automatically is a great suggestion, although we wouldn’t toggle it off again if the interaction is removed.
Just adding that “Remove Classes & IDs” is now considered stable and is the set by default for new installations.