I'm having an issue where Gutenberg is pre-rendering with the theme's style.css, and some of the styles are not fit for the editor. Specifically, I have a class that utilizes transform: translate which basically slides the block off of the page in the back end.
It should be simple enough to add CSS for Gutenberg to stop rendering this in the back end, but I'm struggling.
My class of .bg has transform on it, so I placed .editor-styles-wrapper .bg in my style.css with transform: unset; which does nothing. I've also tried transform: none; which does nothing as well.
I thought maybe something was getting stuck in cache so I've refreshed and refreshed, but it's the most recent stylesheet. I also added editor-style.css using add_theme_support('editor-styles') in functions.php which has the same result of nothing.
I have tried .bg:not(.editor-styles-wrapper) in the style.css which also does nothing. I have tried even #editor .bg which again, just does nothing. I have tried removing the transform from the .bg class just in styles.css itself to see if there's something being cached or it's getting it from elsewhere, which did work. I've tried placing each bit of CSS to the end of the stylesheet, which had no effect as well.
Any ideas on this one? I'm stumped.
.editor-styles-wrapperinto your stylesheets, WP will read in the CSS file and automatically add it in when you add it as an editor stylesheet, replacing anyhtml/bodyrules accordingly. It's more likely that because of this your CSS doesn't apply to the rule once it's transformed, and doing what your question asks means that instead of incorrect rules, no rules of any kind would be applied and you wouldn't get what you wanted]transformsince CSS transforms are used to animate the movement of blocks. What are you trying to do to items with that class that requires it?