Gutenberg edit destroys layout

Author Posts

Theresa September 19, 2025 at 10:50 pm

I was really enjoying being able to use the Enable Gutenberg setting to make a small change and then turn it off and go back to styling the page. I have run into a problem and I am hoping to find a solution.

I have a div with width and padding set. When I make any edit in Gutenberg, whether from inside Microthemer or using the site editor, the formatting for that block is no longer applied. The last time, I was just changing the target link for a button, which should not have had any effect.

I have noticed when I go back to the page in Microthemer and click on the div, a new selector is created in a new folder “Home – below the fold”. Is it possible to turn this behavior off? The old selector is still there, but is no longer linked to the block. I can restyle the new selector and move it to the Home folder, and it works fine. Firefox is having trouble displaying styles in the below the fold folder, so I prefer not to use it.

The current selector name is: WP elements af1d7487d40cc801184759781423c9be
The selector code is: .wp-block-group-is-layout-constrained .wp-elements-af1d7487d40cc801184759781423c9be
The block involved is the black Reviews box on this page: https://theresah19.sg-host.com

I have been able to work around it, but it is frustrating. I suspect there is something small that I have done that may be causing this behavior.


Sebastian September 22, 2025 at 11:06 am

Hi Theresa,

Thanks for reporting this. Let’s go through each point.

1. The formatting gets lost
It’s likely that Gutenberg changes the class when updating the block that you happen to be targeting with Microthemer :

wp-elements-af1d7487d40cc801184759781423c9be

The solution is to customise the CSS selector Microthemer uses.

  1. Locate the selector in Microthemer that applied the formatting to the block (folder search may be helpful here)
  2. Click the “Re-target selector” icon near the selector name in the top toolbar
  3. Select the block again
  4. In the top toolbar, choose an alternative CSS selector that does not reference the long string of random numbers and letters.
  5. Click the “Update” button

Your styles should remain even if you update the block in future.

In general, it’s good to avoid CSS selectors that targets very long random strings because they are often dynamically updated. Microthemer automatically avoids these for known classes. I will add wp-elements-abc123 to the list, but in the meantime, the manual workaround above should help.

2. Firefox issue with below fold styles
The code Microthemer uses for asynchronous CSS is standard and supported across all browsers. So if they styles aren’t working in Firefox, it it likely due to another reason. Maybe some invalid CSS in the stylesheet that Firefox is more strict on. Or forgetting the click Publish / clear a cache.

Example code:

<link
  rel="stylesheet"
  href="wp-content/micro-themes/mt/conditional/active/home_x2d_below_fold.css?mts=8&#038;ver=6.8.2"
  id="microthemer-home_x2d_below_fold-css"
  media="print"
  onload="this.onload=null; this.media='all';"
/>

However, if you did want to prevent Microthemer from automatically splitting code into separate “below fold” folder you can turn off the “Auto-folder” feature at the bottom left of the interface.

I hope that helps, let me know if you need further assistance.

Thanks,
Sebastian

Theresa September 22, 2025 at 7:40 pm

Thank you, Sebastian. Your detailed answers are most helpful.

Theresa

Sebastian September 23, 2025 at 8:24 am

You’re welcome!

You must login or register to reply to this topic.