0

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.

2
  • you shouldn't be manually adding .editor-styles-wrapper into your stylesheets, WP will read in the CSS file and automatically add it in when you add it as an editor stylesheet, replacing any html/body rules 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]
    – Tom J Nowell
    Sep 13, 2023 at 16:16
  • also note that it's probably a little more complicated than this given that you're wanting to use transform since CSS transforms are used to animate the movement of blocks. What are you trying to do to items with that class that requires it?
    – Tom J Nowell
    Sep 13, 2023 at 16:19

1 Answer 1

0

The quickest solution I found was to target my body ID on the front end so the back end does not apply this to .editor-styles-wrapper. What I end up with is #ContainerID .bg which seems to function properly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.